/* =====================================================================
   DEBC 포털 리뉴얼 디자인 시스템 (2026-08-07)
   근거: Docs/260806_장기종 리뉴얼 최종 시안 (PC/MO) 분석 — DESIGN.md 참조
   원칙: KRDS 준수 · 화이트+로열블루 모노톤 플랫 · 전 자산 로컬(폐쇄망)
   ===================================================================== */
/* 브랜드 토큰은 debc-tokens.css(공통)로 옮겼다 — 2026-08-09.
   관리자(admin.css)도 같은 토큰을 쓰기 때문이다. 여기서 다시 정의하면
   로드 순서에 따라 값이 갈려 관리자와 사용자 화면 색이 어긋난다. */


body.egov-body { color: var(--debc-text); background: #fff; }
/* 시안 실측 그리드: 캔버스 1920 · 콘텐츠 컨테이너 1600(좌우 여백 160) */
@media (min-width: 1400px) { .container { max-width: 1600px; } }
/* 레이아웃 main 의 기본 여백을 없앴으므로(풀블리드 요소 허용), 여백 없는 페이지에 상단 간격을 준다 */
.egov-content > .container:first-child { padding-top: 2.56rem; }
.egov-content > .rnw-crumbbar:first-child,
.egov-content > .rnw-hero:first-child { padding-top: 0; }

/* ---------- 헤더/유틸 ---------- */
.rnw-utilbar { background: #fff; border-bottom: 1px solid var(--debc-line); font-size: 1.36rem; }
.rnw-utilbar > .container { min-height: 42px; }
.rnw-utilbar a { color: var(--debc-text-sub); text-decoration: none; }
.rnw-utilbar a:hover { color: var(--debc-primary); }

.rnw-fontsize { display: inline-flex; align-items: center; gap: 0.32rem; }
.rnw-fontsize .btn {
  width: 22px; height: 22px; padding: 0; line-height: 1;
  border: 1px solid var(--debc-line); border-radius: 4px;
  background: #fff; color: var(--debc-text-sub); font-size: 1.28rem;
}
.rnw-fontsize .btn:hover { border-color: var(--debc-primary); color: var(--debc-primary); }

.rnw-header { background: #fff; }
.rnw-logo img { height: 52px; }

/* 헤드바 1단: 로고 + GNB + 유틸 아이콘 (시안) */
.rnw-headbar { background: #fff; border-bottom: 1px solid var(--debc-line); position: relative; }
.rnw-headbar-inner { display: flex; align-items: stretch; gap: 3.2rem; padding: 0 12px; min-height: 116px; }
.rnw-headbar-inner > .rnw-logo,
.rnw-headbar-inner > .rnw-head-util { display: flex; align-items: center; }
.rnw-headbar-inner > .rnw-gnb { flex: 1; display: flex; align-items: stretch; }
.rnw-head-util { display: flex; align-items: center; gap: 0.8rem; margin-left: auto; }
.rnw-icon-btn {
  width: 44px; height: 44px; border: 0; border-radius: 8px; background: #fff;
  color: var(--debc-primary); font-size: 1.84rem; display: inline-flex;
  align-items: center; justify-content: center;
}
.rnw-icon-btn:hover { background: var(--debc-bg); }
.rnw-icon-btn-primary { background: var(--debc-primary); color: #fff; }
.rnw-icon-btn-primary:hover { background: var(--debc-primary-deep); color: #fff; }

/* 검색 확장 패널 */
.rnw-search-panel { border-top: 1px solid var(--debc-line); background: var(--debc-bg); padding: 1.6rem 0; }
.rnw-search-form { display: flex; align-items: center; gap: 0.8rem; }
.rnw-search-form .form-control {
  flex: 1; border: 2px solid var(--debc-primary); border-radius: 24px; padding: 0.8rem 1.76rem;
}
.rnw-search-form .btn { border: 0; background: transparent; color: var(--debc-primary); font-size: 1.68rem; }

/* 헤더 검색 */
.rnw-search { max-width: 360px; }
.rnw-search .form-control {
  border: 2px solid var(--debc-primary); border-right: 0;
  border-radius: 24px 0 0 24px; padding-left: 1.6rem;
}
.rnw-search .btn {
  border: 2px solid var(--debc-primary); border-left: 0;
  border-radius: 0 24px 24px 0; background: #fff; color: var(--debc-primary);
}

/* ---------- GNB (메뉴별 개별 드롭다운) ---------- */
.rnw-gnb { background: transparent; }
.rnw-gnb .rnw-gnb-list {
  flex: 1; display: flex; justify-content: space-evenly; align-items: stretch;
  margin: 0; padding: 0; list-style: none;
}
.rnw-gnb .rnw-gnb-item { display: flex; align-items: stretch; }
/* 드롭다운은 개별 메뉴가 아니라 GNB 바 전체를 기준으로 펼친다(시안: 화면 폭 전체) */
.rnw-gnb .rnw-gnb-item { position: static; }
.rnw-gnb .rnw-gnb-link {
  display: flex; align-items: center;
  padding: 0 1.92rem; font-size: 1.792rem; font-weight: 700; white-space: nowrap;
  color: var(--debc-text); text-decoration: none; border-bottom: 3px solid transparent;
}
.rnw-gnb .rnw-gnb-item:hover > .rnw-gnb-link,
.rnw-gnb .rnw-gnb-item:focus-within > .rnw-gnb-link {
  color: var(--debc-primary); border-bottom-color: var(--debc-primary);
}
/* 드롭다운 패널: 좌측 파란 블록(1뎁스명) + 우측 2뎁스 pill/3뎁스 불릿 */
.rnw-gnb .rnw-dropdown {
  display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 1030;
  /* 기준: .rnw-headbar (position:relative) — 화면 전체 폭으로 펼침 */
  width: 100%; background: #fff; border-top: 1px solid var(--debc-line);
  border-bottom: 1px solid var(--debc-line);
  box-shadow: 0 10px 24px rgba(22, 51, 126, .12);
  overflow: hidden;              /* 좌측 파란 배경 확장이 뷰포트를 넘지 않도록 */
}
/* 내용은 본문 컨테이너 폭에 맞춰 정렬(고해상도에서 좌우 쏠림 방지) */
.rnw-gnb .rnw-dd-inner {
  max-width: 1600px; margin: 0 auto; padding: 0 12px;
  display: flex; align-items: stretch;
}
.rnw-gnb .rnw-gnb-item.open > .rnw-dropdown { display: block; }
.rnw-gnb .rnw-gnb-item.open > .rnw-gnb-link { color: var(--debc-primary); border-bottom-color: var(--debc-primary); }
/* 메뉴 항목 ↔ 드롭다운 사이 미세 간격에서도 hover 가 끊기지 않도록 투명 브릿지 */
.rnw-gnb .rnw-dropdown::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 14px;
}

.rnw-dropdown .rnw-dd-title {
  position: relative; flex: 0 0 200px; background: var(--debc-primary); color: #fff;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 2.56rem 1.6rem; font-size: 1.92rem; font-weight: 700;
}
/* 파란 블록을 화면 왼쪽 끝까지 잇는다(시안) — 컨테이너 정렬은 유지 */
.rnw-dropdown .rnw-dd-title::before {
  content: ""; position: absolute; top: 0; bottom: 0; right: 100%;
  width: 100vw; background: var(--debc-primary);
}
.rnw-dropdown .rnw-dd-body {
  flex: 1; padding: 2.4rem 3.2rem 2.88rem;
  /* 시안: 4열 고정 그리드(5번째부터 다음 줄로 줄바꿈) */
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.24rem 2.88rem; align-content: start;
}
@media (max-width: 1199.98px) {
  .rnw-dropdown .rnw-dd-body { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.rnw-dd-group { min-width: 0; }
.rnw-dd-group > a.rnw-dd-pill {
  display: inline-block; max-width: 100%; background: var(--debc-navy); color: #fff;
  border-radius: 18px; padding: 0.544rem 1.6rem; font-size: 1.44rem; font-weight: 600;
  line-height: 1.35; text-decoration: none; margin-bottom: 0.88rem;
  word-break: keep-all;          /* 어절 단위 줄바꿈(시안) */
}
.rnw-dd-group > a.rnw-dd-pill:hover { background: var(--debc-primary); }
.rnw-dd-group ul { list-style: none; margin: 0; padding: 0; }
.rnw-dd-group ul li a {
  display: block; padding: 0.288rem 0 0.288rem 1.28rem; font-size: 1.408rem;
  color: var(--debc-text-sub); text-decoration: none; position: relative;
}
.rnw-dd-group ul li a::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--debc-muted);
}
.rnw-dd-group ul li a:hover { color: var(--debc-primary); }

/* ---------- 외부 링크 표시 `.rnw-ext` (2026-08-10) ----------
   시안 근거: 정보공개 > 경영공시 화면의 형제탭 2번(통합공시·알리오)에 외부 아이콘이 그려져 있다
   (`Docs/분석/메뉴대조_시안대_구현.md` 3절 532행).

   대상은 메뉴 데이터가 '새 창'으로 정한 링크다 — `GnbMenuVO.blankTarget` 이 참인 8건
   (151·152·153 정책조사연구 3건 · 422 레드휘슬 · 424 국민신문고 · 532 알리오 등).
   메뉴 데이터가 아니라 **표시 규칙**이므로 발주처 회신(151~153 의 실제 주소)과 무관하게 지금 적용된다.

   왜 아이콘 폰트를 쓰지 않는가
    Bootstrap Icons 가 로컬에 있지만, 이 표시는 **GNB·전체메뉴·사이트맵 3곳에서 수백 번 반복**된다.
    글리프 하나를 위해 마크업에 <i> 를 넣으면 정화기 계약(<i> 는 class 가 지워진다)과도 얽힌다.
    유니코드 화살표(U+2197)는 폰트 의존이 없고 폐쇄망에서도 반드시 그려진다.

   접근성(KWCAG) — 새 창으로 열리는 링크는 미리 알려야 한다.
    링크에 `aria-label="메뉴명 (새 창 열림)"` 을 함께 붙인다(nav.html).
    aria-label 이 있으면 접근성 이름이 그것으로 확정되므로 ::after 의 화살표는 읽히지 않는다
    — 눈으로는 보이고 소리로는 중복되지 않는다. */
.rnw-ext::after {
  content: "\2197";
  margin-left: .18em;
  font-size: .85em;
  line-height: 1;
  vertical-align: baseline;
  opacity: .75;
}
/* 남색 pill(2뎁스) 안에서는 배경이 남색이라 화살표도 흰색을 따라간다(color: inherit 기본). */

/* ---------- 모바일 전체메뉴 (풀스크린 2단 분할) ---------- */
.rnw-mmenu { position: fixed; inset: 0; z-index: 2000; background: #fff; display: none; flex-direction: column; }
.rnw-mmenu.open { display: flex; }
.rnw-mmenu-head { display: flex; align-items: center; justify-content: space-between; padding: 1.28rem 1.6rem; border-bottom: 1px solid var(--debc-line); }
.rnw-mmenu-body { flex: 1; display: flex; overflow: hidden; }
.rnw-mmenu-depth1 { flex: 0 0 38%; background: var(--debc-bg); overflow-y: auto; }
.rnw-mmenu-depth1 button {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  padding: 1.52rem 1.6rem; font-size: 1.6rem; font-weight: 700; color: var(--debc-text-sub);
}
.rnw-mmenu-depth1 button.active { background: #fff; color: var(--debc-primary); border-left: 3px solid var(--debc-primary); }
.rnw-mmenu-depth2 { flex: 1; overflow-y: auto; padding: 0.96rem 1.6rem; }
.rnw-mmenu-depth2 .pane { display: none; }
.rnw-mmenu-depth2 .pane.active { display: block; }
.rnw-mmenu-depth2 a.d2 { display: block; padding: 1.12rem 0; font-weight: 600; color: var(--debc-text); text-decoration: none; border-bottom: 1px solid var(--debc-line); }
.rnw-mmenu-depth2 details { border-bottom: 1px solid var(--debc-line); }
.rnw-mmenu-depth2 details summary { padding: 1.12rem 0; font-weight: 600; cursor: pointer; list-style: none; position: relative; }
.rnw-mmenu-depth2 details summary::after { content: "+"; position: absolute; right: 0.32rem; color: var(--debc-muted); }
.rnw-mmenu-depth2 details[open] summary::after { content: "−"; }
.rnw-mmenu-depth2 details ul { list-style: none; padding: 0 0 0.96rem 0.8rem; margin: 0; }
.rnw-mmenu-depth2 details ul a { display: block; padding: 0.56rem 0 0.56rem 1.28rem; font-size: 1.472rem; color: var(--debc-text-sub); text-decoration: none; position: relative; }
.rnw-mmenu-depth2 details ul a::before { content: ""; position: absolute; left: 0; top: .85em; width: 4px; height: 4px; border-radius: 50%; background: var(--debc-muted); }

/* ---------- 전체 사이트맵 모달(데스크톱 햄버거) ---------- */
.rnw-mmenu { overflow-y: auto; }
.rnw-sitemap { padding: 3.2rem 0 4.8rem; }
.rnw-sitemap-title { font-size: 2.4rem; font-weight: 800; color: var(--debc-navy); margin-bottom: 2.4rem; }
.rnw-sitemap-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2.56rem; }
.rnw-sitemap-col .col-head {
  display: block; background: var(--debc-primary); color: #fff; border-radius: 8px;
  padding: 0.96rem 1.28rem; font-weight: 700; text-align: center; text-decoration: none; margin-bottom: 1.28rem;
}
.rnw-sitemap-col ul { list-style: none; margin: 0; padding: 0; }
.rnw-sitemap-col > ul > li { margin-bottom: 0.88rem; }
.rnw-sitemap-col a.d2 {
  display: block; font-weight: 600; color: var(--debc-text); text-decoration: none;
  font-size: 1.488rem; padding: 0.24rem 0; word-break: keep-all;
}
.rnw-sitemap-col a.d2:hover { color: var(--debc-primary); }
.rnw-sitemap-col ul ul { padding: 0.32rem 0 0.48rem 0.96rem; }
.rnw-sitemap-col ul ul a {
  display: block; font-size: 1.36rem; color: var(--debc-text-sub); text-decoration: none;
  padding: 0.192rem 0 0.192rem 1.12rem; position: relative; word-break: keep-all;
}
.rnw-sitemap-col ul ul a::before {
  content: ""; position: absolute; left: 0; top: .68em; width: 3px; height: 3px;
  border-radius: 50%; background: var(--debc-muted);
}
.rnw-sitemap-col ul ul a:hover { color: var(--debc-primary); }
@media (max-width: 1399.98px) {
  .rnw-sitemap-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 3.2rem; }
}

/* ---------- 서브 공통: 브레드크럼 바 + 타이틀 + 균등분할 탭 (시안 정밀분석 2026-08-07) ---------- */
/* 브레드크럼: 화면 전체 폭 74px 바, 내용은 컨테이너 정렬 */
.rnw-crumbbar {
  border-top: 1px solid #E2E6E9; border-bottom: 1px solid #E2E6E9; background: #fff;
}
.rnw-crumbbar-inner { display: flex; align-items: stretch; height: 74px; }
.rnw-crumbbar .home {
  width: 74px; flex: 0 0 74px; display: flex; align-items: center; justify-content: center;
  border-left: 1px solid #E2E6E9; border-right: 1px solid #E2E6E9;
  color: var(--debc-text-sub); font-size: 1.68rem; text-decoration: none;
}
.rnw-crumbbar .home:hover { color: var(--debc-primary); }
.rnw-crumbbar .sep { display: flex; align-items: center; color: var(--debc-muted); font-size: 1.2rem; padding: 0 0.8rem; }
.rnw-crumbbar .crumb { position: relative; display: flex; align-items: center; gap: 0.56rem; padding: 0 1.44rem; }
.rnw-crumbbar .crumb > a { color: var(--debc-text); text-decoration: none; font-size: 1.52rem; white-space: nowrap; }
.rnw-crumbbar .crumb > a:hover { color: var(--debc-primary); }
.rnw-crumbbar .caret { font-size: 0.96rem; color: var(--debc-text-sub); }
/* 항목별 형제 선택 드롭다운 */
.rnw-crumbbar .crumb-menu {
  display: none; position: absolute; left: 0; top: 100%; z-index: 1020; min-width: 200px;
  margin: 0; padding: 0.64rem 0; list-style: none; background: #fff;
  border: 1px solid var(--debc-line); border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 18px rgba(22, 51, 126, .10);
}
.rnw-crumbbar .crumb.has-sub:hover .crumb-menu,
.rnw-crumbbar .crumb.has-sub:focus-within .crumb-menu { display: block; }
.rnw-crumbbar .crumb-menu a {
  display: block; padding: 0.72rem 1.6rem; font-size: 1.44rem; color: var(--debc-text-sub); text-decoration: none;
  white-space: nowrap;
}
.rnw-crumbbar .crumb-menu a:hover { background: var(--debc-bg); color: var(--debc-primary); }

/* 크럼이 컨테이너를 넘으면 마지막 항목만 줄어든다 — **전 구간 공통** (2026-08-10 정리)
   ------------------------------------------------------------------
   `.rnw-crumbbar-inner` 는 줄바꿈·스크롤이 없는 flex 라 크럼이 넘치면 **문서 폭 자체가 늘어난다**.
   1차에는 이 안전장치를 `max-width:767.98px` 안에만 넣었는데, 그러면 **768~1399 가 무방비**다
   (같은 실수를 TOP 버튼에서도 했다 — 2026-08-10 QA 실측).
   여기 규칙은 **넘치지 않으면 아무 일도 하지 않는다**(말줄임은 부족할 때만 생긴다).
   · min-width:0 이 없으면 flex 아이템의 자동 최소크기(=내용폭) 때문에 shrink 가 무시된다.
   · overflow-x:auto 로 가두는 방법은 쓰지 않는다 — .crumb-menu 드롭다운이 absolute 라 잘려
     형제 메뉴를 고를 수 없게 된다(고치려다 더 큰 걸 깰 뻔했다). */
.rnw-crumbbar-inner { min-width: 0; }
.rnw-crumbbar .crumb { min-width: 0; }
.rnw-crumbbar .crumb:last-of-type { flex: 0 1 auto; }
.rnw-crumbbar .crumb:last-of-type > a { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* 모바일 브레드크럼 — 1뎁스(대메뉴)를 뺀다. (2026-08-09, S1 검증 중 발견)
   ------------------------------------------------------------------
   `.rnw-crumbbar-inner` 는 줄바꿈·스크롤이 없는 flex 라, 3뎁스 메뉴에서 크럼이
   컨테이너를 넘으면 **페이지 전체가 가로로 밀린다** — 375px 실측 문서 폭
   menuNo=212 → 509px · 253 → 503px · 211 → 480px (본문과 무관한 기존 결함이다.
   본문이 제자리에 있어도 화면이 통째로 어긋나 보여 T1 34화면이 전부 영향을 받는다).
   시안 MO 는 애초에 `홈 > 2뎁스 > 3뎁스` 2단만 그린다(전수분석 §4-2 A).
   그래서 첫 크럼과 그 뒤 구분자를 **화면에서만** 숨긴다 — display:none 이 아니라
   클리핑이라 스크린리더의 경로 안내는 그대로 남는다(KWCAG).
   ※ `overflow-x:auto` 로 가두는 방법은 쓰지 않았다 — 크럼의 ▼ 드롭다운(.crumb-menu)이
     absolute 라 스크롤 컨테이너에 잘려 모바일에서 형제 메뉴를 못 고르게 된다.
   ※ 정식 대응은 S10(MO 대응 A). 그때 이 규칙과 함께 정리한다. */
@media (max-width: 767.98px) {
  .rnw-crumbbar .crumb:first-of-type:not(:only-of-type),
  .rnw-crumbbar .crumb:first-of-type:not(:only-of-type) + .sep {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .rnw-crumbbar .crumb { padding: 0 0.8rem; }
  .rnw-crumbbar .sep { padding: 0 0.4rem; }
  .rnw-crumbbar .crumb > a { font-size: 1.408rem; }
}

/* 타이틀 행 */
/* ★ 좌우 여백을 준다 (2026-09-07 바로잡음).
   종전에는 위아래 여백만 있어 이 상자의 «직계 자식» 이 화면 끝(0)부터 시작했다.
   제목(.title-wrap)과 검색상자는 각자 여백을 갖고 있어 24px 안쪽에 있었는데,
   여백 없는 자식만 그보다 왼쪽에 서서 **제목보다 튀어나와 보였다**
   (발주처 지적: 「faq 타이틀보다 토털 3건 영역이 왼쪽에 있어」).
   실측 1440px — 정본 Total 24~1416 · 우리 0~1440.
   정본은 본문 상자에 `padding: 0 24px`(좁은 화면 16px)를 준다. 같은 값으로 맞춘다.
   ※ 이미 여백을 가진 자식(제목·검색)은 그대로다 — 이 값은 «여백이 없던 것» 만 제자리로 돌린다. */
.rnw-sub { padding: 3.52rem 0 5.6rem; }   /* 좌우 여백은 debc-pb.css 가 «.inner 없는 화면» 에만 준다 */
.rnw-title-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1.6rem;
  min-height: 121px; padding: 3.2rem 0 2.24rem; border-bottom: 1px solid #555354; margin-bottom: 2.56rem;
}
.rnw-title-row.no-rule { border-bottom: 0; margin-bottom: 1.28rem; }
/* 탭이 뒤따르면 타이틀 하단선을 생략한다 — 탭의 상단선과 겹쳐 2줄로 보이던 문제 */
.rnw-title-row.has-tabs { border-bottom: 0; margin-bottom: 0; }
.rnw-page-title { font-size: 4rem; font-weight: 800; margin: 0; line-height: 1.25; }
.rnw-title-util { display: flex; gap: 0.8rem; flex-shrink: 0; }
.rnw-title-util .util-ico {
  width: 36px; height: 36px; border: 0; border-radius: 50%; background: #EBEBEB;
  color: var(--debc-text-sub); display: inline-flex; align-items: center; justify-content: center;
}
.rnw-title-util .util-ico:hover { background: var(--debc-primary); color: #fff; }
.rnw-title-util .util-ico.copied { background: var(--debc-green); color: #fff; }

/* 탭: 컨테이너 폭 균등 분할 + 가운데 정렬 + 칸 전체폭 6px 하단바 */
.rnw-tabs {
  display: flex; margin: 0 0 3.2rem; border-top: 1px solid #555354; border-bottom: 1px solid #A8A8A8;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
}
.rnw-tabs::-webkit-scrollbar { display: none; }
.rnw-tabs a {
  flex: 1 1 0; min-width: 120px; display: flex; align-items: center; justify-content: center;
  height: 92px; padding: 0 0.96rem; text-align: center; white-space: normal; word-break: keep-all;
  font-size: 1.6rem; font-weight: 600; color: var(--debc-text-sub); text-decoration: none;
  border-bottom: 6px solid transparent; margin-bottom: -1px;
}
.rnw-tabs a:hover { color: var(--debc-primary); }
.rnw-tabs a.active { color: var(--debc-primary); font-weight: 700; border-bottom-color: var(--debc-primary); }

/* 본문: 감싸는 카드 없음(시안). 강조는 연블루 풀폭 박스로만 */
.rnw-sub-body { line-height: 1.8; }
/* `:where()` 로 감싼 이유(2026-08-09, S1) — 이 두 줄은 CMS 본문의 **기본값**이지
   확정값이 아니다. `.rnw-sub-body h2`(0,1,1)로 두면 뒤에 오는 `.rnw-h2c`(0,1,0) 같은
   한 클래스 선택자가 특정도에서 져서 본문 블록 클래스가 통째로 안 먹는다.
   `:where()` 는 특정도 0 이라 h2/h3 기본 모양은 그대로면서 클래스가 항상 이긴다. */
:where(.rnw-sub-body) h2 { font-size: 2.4rem; font-weight: 800; margin: 0 0 1.76rem; }
:where(.rnw-sub-body) h3 {
  font-size: 1.84rem; font-weight: 700; color: var(--debc-navy);
  margin: 3.2rem 0 1.28rem; padding-left: 1.12rem; border-left: 4px solid var(--debc-primary);
}
.rnw-sub-body p { margin: 0 0 1.44rem; }
.rnw-sub-body ul { padding-left: 1.92rem; }
.rnw-sub-body li { margin-bottom: 0.64rem; }
.rnw-sub-body img { max-width: 100%; height: auto; }
.rnw-sub-box { background: #F3F6FD; border-radius: 8px; padding: 2.56rem 2.88rem; margin: 2.24rem 0; }
.rnw-sub-empty { text-align: center; color: var(--debc-text-sub); padding: 6.4rem 1.6rem; }
@media print { .rnw-title-util, .rnw-crumbbar, .rnw-gnb, .rnw-utilbar, .rnw-tabs, .rnw-top-btn { display: none !important; } }
@media (max-width: 575.98px) {
  .rnw-crumbbar-inner { height: 56px; }
  .rnw-crumbbar .home { width: 56px; flex: 0 0 56px; }
  .rnw-sub { padding: 1.92rem 0 3.84rem; }
  .rnw-page-title { font-size: 2.56rem; }
  .rnw-tabs a { height: 64px; min-width: 100px; font-size: 1.44rem; }
}

/* ---------- 페이지네이션 (시안: 순수 텍스트형) ---------- */
.rnw-paging { display: flex; align-items: center; justify-content: center; gap: 0.56rem; flex-wrap: wrap; margin: 2.56rem 0 0.64rem; }
.rnw-paging a, .rnw-paging span { text-decoration: none; font-size: 1.52rem; padding: 0.32rem 0.8rem; }
.rnw-paging .num { color: var(--debc-muted); }
.rnw-paging .num.current { color: var(--debc-primary); font-weight: 700; }
.rnw-paging .nav-word { color: var(--debc-text-sub); display: inline-flex; align-items: center; gap: 0.32rem; }
.rnw-paging .nav-word.disabled { color: var(--debc-muted); pointer-events: none; }
@media (max-width: 575.98px) {
  /* MO 시안: 이전/다음 행과 숫자 행 2행 분리 */
  .rnw-paging { flex-direction: column; gap: 0.8rem; }
  .rnw-paging .rnw-paging-words, .rnw-paging .rnw-paging-nums { display: flex; gap: 0.56rem; justify-content: center; width: 100%; }
}

/* =====================================================================
   메인 히어로 (2026-08-11 전면 재작성 — 시안 실측 규격)

   근거 : DESIGN.md §3-1 / Docs/분석/시안대조_메인.md
   시안 실측(PC 1920 캔버스 · 컨테이너 1600)
     · 골격   배너 670 : 갭 37 : 패널 893 = 1600, 히어로 높이 545
     · 배경   히어로 = 흰색 / 연회청 면은 **패널에만**  ← 종전 구현은 이 둘이 서로 반대였다
     · 배너   라운드 14~16 · 테두리 없음 · 하단 오버레이 컨트롤 바 72(MO 36)
     · 아이콘 원 지름 128(MO 79) · 열 중심 간격 200(MO 109) · 행 간격 203 · 라벨 20px

   왜 `.row`/`col-*` 을 쓰지 않는가
    ① 670:893 은 12분할로 표현되지 않는다(5:7 은 근사치라 갭 37 도 못 맞춘다).
    ② `.row` 는 음수 마진 때문에 **1400px 에서만** 가로 12px 넘침을 만든 전력이 있다.
   ===================================================================== */
.rnw-hero { background: #fff; padding: 3.2rem 0 4.16rem; }
.rnw-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 670fr) minmax(0, 893fr);
  gap: 37px;
  align-items: start;
}

/* ---------- 배너 슬라이드 ---------- */
.rnw-hero-bnr { min-width: 0; }
.rnw-bnr {
  position: relative; overflow: hidden;
  border-radius: 15px;               /* 시안 14~16 */
  aspect-ratio: 670 / 545;           /* 폭이 줄어도 슬롯 비율은 유지된다 */
  background: #0F1B2E;               /* contain 여백이 이미지보다 어두워야 배너가 앞으로 나온다 */
}
.rnw-bnr-track { position: absolute; inset: 0; }
.rnw-bnr-slide { position: absolute; inset: 0; }
.rnw-bnr-slide > a { display: block; width: 100%; height: 100%; }
.rnw-bnr-slide img { position: relative; width: 100%; height: 100%; object-fit: contain; display: block; }
.rnw-bnr[data-fit="cover"] .rnw-bnr-slide img { object-fit: cover; }

/* 같은 이미지를 흐리게 깔아 contain 여백을 메운다. cover 면 이미지가 다 덮으므로 보이지 않는다. */
.rnw-bnr-bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  filter: blur(26px) brightness(.62); transform: scale(1.18);
}
.rnw-bnr[data-fit="cover"] .rnw-bnr-bg { display: none; }

/* **JS 가 없어도 첫 장은 보인다.** 2번째부터만 감추고, 회전은 `.is-js` 가 붙은 뒤에만 한다
   (S4 박스탭과 같은 설계 — 스크립트가 죽어도 화면이 사라지지 않는다). */
.rnw-bnr-slide + .rnw-bnr-slide { opacity: 0; visibility: hidden; }
.rnw-bnr.is-js .rnw-bnr-slide { opacity: 0; visibility: hidden; transition: opacity .45s ease; }
.rnw-bnr.is-js .rnw-bnr-slide.is-on { opacity: 1; visibility: visible; }

/* 컨트롤 바 — 시안: 배너 하단 오버레이 h72, 배경 rgb(107,115,136) 반투명 */
.rnw-bnr-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 72px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; background: rgba(107, 115, 136, .78);
}
/* `hidden` 은 UA 규칙이라 위 `display:flex` 에 진다 — 작성자 규칙으로 다시 감춘다. */
.rnw-bnr-bar[hidden], .rnw-bnr-all[hidden] { display: none; }
.rnw-bnr-idx { margin: 0; color: rgba(255, 255, 255, .72); font-size: 1.6rem; letter-spacing: .02em; }
.rnw-bnr-idx .cur { color: #fff; font-weight: 700; }
.rnw-bnr-btns { display: flex; gap: 8px; }
.rnw-bnr-btn {
  width: 32px; height: 32px; border-radius: 50%; border: 0; padding: 0;
  background: #fff; color: #23324A; font-size: 1.52rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.rnw-bnr-btn:hover { background: var(--debc-primary); color: #fff; }
.rnw-bnr-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* `+` 전체보기 (M-14 권고안) */
.rnw-bnr-all {
  position: absolute; inset: 0 0 72px 0; overflow: auto;
  background: rgba(15, 27, 46, .94); padding: 1.92rem 2.24rem; color: #fff;
}
.rnw-bnr-all-tit { margin: 0 0 1.28rem; font-weight: 700; font-size: 1.52rem; }
.rnw-bnr-all ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.12rem; }
.rnw-bnr-all a { display: block; color: #fff; text-decoration: none; font-size: 1.248rem; }
.rnw-bnr-all img { width: 100%; height: 54px; object-fit: cover; border-radius: 6px; display: block; margin-bottom: 0.48rem; }
.rnw-bnr-all a:hover span { text-decoration: underline; }

.rnw-bnr--empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.64rem; background: var(--debc-bg); color: var(--debc-text-sub); text-align: center; padding: 1.6rem;
}
.rnw-bnr--empty p { margin: 0; font-size: 1.472rem; }

/* 이미지 비율 안내(M-12 미확정 — 확정되면 관리자에서 감춘다) */
.rnw-bnr-note {
  margin: 1.12rem 0 0; font-size: 1.28rem; line-height: 1.6; color: var(--debc-text-sub);
}
.rnw-bnr-note strong { color: var(--debc-text); font-weight: 700; }

/* ---------- 자주 찾는 서비스 ----------
   **시안 정확값(원 128 · 열 간격 200 · 라벨 20px)은 아래 `min-width: 1600px` 절에만 둔다.**
   시안 규격은 패널이 893 일 때 성립하는 값이고, 패널이 893 이 되려면 컨테이너가 1600 이어야 한다.
   그보다 좁은 폭에 같은 값을 쓰면 **열 간격이 라벨 폭(160)보다 좁아져 라벨끼리 겹친다**
   (1400 뷰포트 실측: 열 중심 간격 157.3 < 라벨 160). 그래서 기본값은 비율형이다. */
.rnw-quick {
  background: var(--debc-hero-panel); border: 0; border-radius: 16px;
  padding: 36px 32px 30px; min-width: 0; align-self: stretch;
}
.rnw-quick-head { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; }
.rnw-quick h2 { font-size: 2.4rem; font-weight: 700; margin: 0; letter-spacing: -.02em; }
.rnw-quick-nav { display: flex; gap: 8px; }
.rnw-quick-nav button {
  width: 34px; height: 34px; border-radius: 50%; padding: 0;
  border: 1px solid var(--debc-line); background: #fff; color: var(--debc-text-sub);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.rnw-quick-nav button:hover:not(:disabled) { border-color: var(--debc-primary); color: var(--debc-primary); }
.rnw-quick-nav button:disabled { opacity: .4; cursor: default; }

.rnw-quick .grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 8px; row-gap: 26px; margin-top: 14px;
}
.rnw-quick a {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--debc-text); text-decoration: none; text-align: center;
}
.rnw-quick a .ico {
  width: 96px; height: 96px; border-radius: 50%; background: #fff;
  border: 1px solid var(--debc-halo-2);
  box-shadow: 0 8px 18px rgba(29, 80, 200, .10);
  display: flex; align-items: center; justify-content: center;
  font-size: 3.68rem; color: var(--debc-primary);
}
.rnw-quick a .txt { width: 100%; font-size: 1.6rem; line-height: 1.35; word-break: keep-all; }
.rnw-quick a:hover .ico { background: var(--debc-primary); color: #fff; border-color: var(--debc-primary); }
.rnw-quick a:hover .txt { color: var(--debc-primary); }

/* 시안 캔버스(컨테이너 1600 · 패널 893)에서만 시안 실측값을 그대로 쓴다.
   1600 은 DESIGN §5-1 의 5단계에 없는 값이지만 임의로 만든 값이 아니다 —
   `renewal.css` 가 이미 `min-width:1400px` 에서 컨테이너를 1600 으로 키우고 있고,
   그 컨테이너가 실제로 1600 이 되는 지점이 뷰포트 1600 이다(그 아래는 뷰포트 폭을 따른다). */
@media (min-width: 1600px) {
  .rnw-quick { padding: 54px 90px 40px 75px; border-radius: 20px; }
  .rnw-quick h2 { font-size: 3.12rem; }
  .rnw-quick-nav button { width: 38px; height: 38px; }
  /* 원 128 · 열 중심 간격 200(= 원 128 + 간격 72) · 행 중심 간격 203(= 항목 165 + 간격 39) */
  .rnw-quick .grid {
    grid-template-columns: repeat(4, 128px); justify-content: space-between;
    column-gap: 0; row-gap: 39px;
  }
  .rnw-quick a .ico { width: 128px; height: 128px; font-size: 4.96rem; }
  /* 라벨은 원(128)보다 넓게 잡는다 — `업무지원인 서비스`(8자 x 20px = 160)가 원 폭 안에서 세 줄로 쪼개진다.
     열 중심 간격이 200 이라 160 까지는 옆 라벨과 부딪히지 않는다. */
  .rnw-quick a .txt { width: 160px; margin: 0 -16px; font-size: 2rem; }
}
/* 8개를 넘을 때 JS 가 페이지를 나눈다 — 나누기 전에는 전부 보인다(스크립트가 없으면 그대로 여러 행). */
.rnw-quick .grid a[data-qpage-off] { display: none; }

/* ---------- 히어로 반응형 (브레이크포인트는 DESIGN §5-1 의 5단계만 쓴다) ---------- */
/* 992~1199 는 2열이 유지되는 가장 좁은 구간이라 배너 칸이 385 까지 줄어든다(1024 실측).
   패널 내용이 그대로면 패널만 82px 더 길어져 **아래가 어긋난 채로 보인다** — 여기서 한 단계 더 줄인다.
   (2열 → 1열 전환점 자체는 M-15 권고대로 991.98 을 유지한다.) */
@media (max-width: 1199.98px) and (min-width: 992px) {
  .rnw-quick { padding: 26px 20px 22px; }
  .rnw-quick h2 { font-size: 1.92rem; }
  .rnw-quick .grid { row-gap: 16px; margin-top: 10px; }
  .rnw-quick a { gap: 7px; }
  .rnw-quick a .ico { width: 76px; height: 76px; font-size: 2.88rem; }
  .rnw-quick a .txt { font-size: 1.36rem; }
  .rnw-quick-nav button { width: 30px; height: 30px; }
}
/* 991.98 = GNB 가 햄버거로 바뀌는 지점. 히어로도 여기서 세로로 쌓인다(현행 col-lg-* 와 같은 지점 —
   시안에 PC 2열 → MO 1열 전환 폭이 없어 기존 값을 유지한다. M-15 권고안 그대로). */
@media (max-width: 991.98px) {
  .rnw-hero-grid { grid-template-columns: 1fr; gap: 20px; }
  .rnw-quick { align-self: auto; }
  .rnw-quick .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }  /* 시안 MO 3열 */
}
@media (max-width: 767.98px) {
  .rnw-hero { padding: 1.92rem 0 2.88rem; }
  /* MO 시안 좌우 여백 19~20px(배너 337 @375). **`.egov-content` 가 이미 12px 을 대고 있어**
     여기서는 나머지 7px 만 더한다 — 19px 을 그대로 쓰면 31px 이 되어 배너가 313 으로 줄었다(실측).
     상위 여백이 바뀌면 이 값도 함께 봐야 한다. */
  .rnw-hero > .container { padding-left: 7px; padding-right: 7px; }
  .rnw-bnr { border-radius: 10px; }
  .rnw-bnr-bar { height: 36px; padding: 0 12px; }
  .rnw-bnr-btn { width: 24px; height: 24px; font-size: 1.152rem; }
  .rnw-bnr-idx { font-size: 1.28rem; }
  .rnw-bnr-all { inset: 0 0 36px 0; padding: 1.28rem; }
  .rnw-bnr-all ul { grid-template-columns: repeat(2, 1fr); }
  /* MO 시안 패널은 335×375 다 — 3열 x 3행(8칸)이 그 안에 들어가려면 행 피치가 약 100 이어야 한다.
     원 79 는 시안값이므로 줄이지 않고 **원과 라벨 사이·행 사이 여백만** 좁힌다. */
  .rnw-quick { padding: 22px 16px 18px; }
  .rnw-quick h2 { font-size: 2rem; }
  .rnw-quick .grid { row-gap: 12px; margin-top: 8px; }
  .rnw-quick a { gap: 6px; }
  .rnw-quick a .ico { width: 79px; height: 79px; font-size: 3.04rem; }  /* 시안 MO 실측 79 */
  .rnw-quick a .txt { font-size: 1.36rem; }
  .rnw-quick-nav button { width: 30px; height: 30px; }
}

.rnw-section { padding: 4.16rem 0; }
.rnw-section.tint { background: var(--debc-bg); }
/* 섹션 제목 — **영문 라벨 + 국문 제목 2단**(DESIGN §3, 2026-08-11 실측).
   영문만 쓰거나 국문만 쓰면 시안과 다르다. 영문 라벨은 장식이 아니라 **시안의 구성요소**다.
   ※ 스크린리더에는 "NOTICE & NEWS 재단 소식 살펴보기" 로 이어 읽힌다 — 둘 다 제목의 일부라 맞다. */
.rnw-section h2.sec-title { font-size: 2.4rem; font-weight: 800; margin-bottom: 2.08rem; }
.rnw-section h2.sec-title .eyebrow {
  display: block; font-size: 1.312rem; font-weight: 700; letter-spacing: .12em;
  color: var(--debc-primary); margin-bottom: 0.56rem;
}
.rnw-section h2.sec-title .ko { display: block; }

/* 재단소식 pill 탭 + 카드 */
.rnw-pills { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 1.76rem; }
.rnw-pills a { border: 1px solid var(--debc-line); border-radius: 20px; padding: 0.56rem 1.68rem; font-size: 1.472rem; font-weight: 600; color: var(--debc-text-sub); text-decoration: none; }
.rnw-pills a.active { background: var(--debc-primary); border-color: var(--debc-primary); color: #fff; }
/* ★ 카드 글자는 **어디서든 줄바꿈**한다 — 2026-08-12 발주처 지적("가로 스크롤 바도 있는데?")의 원인이었다.
     칸 폭은 `row-cols-2` 가 50% 로 못박으므로 긴 낱말이 들어와도 칸이 넓어지지 않는다.
     대신 **글자가 칸 밖으로 삐져나가** 문서 전체가 가로로 흐른다.
     실측(SNS `blog.naver.com/debc2019` = 156px, 칸 안폭 117px): 320px에서 24px · 360px에서 4px 가로 스크롤.
     375 이상에서 안 보였던 이유는 컨테이너 좌우 여백 12px 이 삼켰기 때문이다 — **없어진 게 아니라 가려져 있었다.**
     제목(`.tit`)에도 함께 건다: 게시물 제목은 DB 값이라 주소·영문 낱말이 언제든 들어올 수 있다.
     `anywhere` 를 모르는 구형 브라우저를 위해 `break-word` 를 앞에 둔다(뒤 선언이 이긴다). */
.rnw-news-card { border: 1px solid var(--debc-line); border-radius: var(--debc-radius); background: #fff; padding: 1.76rem 1.92rem; height: 100%; display: block; text-decoration: none; color: inherit; min-width: 0; overflow-wrap: break-word; overflow-wrap: anywhere; }
.rnw-news-card:hover { border-color: var(--debc-primary); }
.rnw-news-card .cat { font-size: 1.248rem; color: var(--debc-primary); font-weight: 700; }
.rnw-news-card .tit { font-weight: 600; margin: 0.56rem 0 0.96rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; }
.rnw-news-card .date { font-size: 1.28rem; color: var(--debc-muted); }

/* =====================================================================
   SNS STORY — 실제 게시물 카드 (2026-08-12 신설, DESIGN §3-3 ④)

   여태 **채널 안내 카드 4장**이었다. 시안은 **게시물 12건**을 4장씩 넘긴다.
   자료는 `TB_MAIN_EXPSR`(EXPSR_SE='SNS') — 썸네일·제목·채널·게시일·주소.

   ★ 스크립트가 없으면 **12건이 전부 보인다.** `.is-js` 가 붙은 뒤에만 4장씩 감춘다.
     (배너·박스탭·주요사업과 같은 설계 — 눌러도 아무 일이 없는 버튼을 두지 않는다.)
   ===================================================================== */
.rnw-sns-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2.4rem; flex-wrap: wrap; }
.rnw-sns-head .sec-title { margin-bottom: 0; }
.rnw-sns-link { display: flex; align-items: center; gap: 1.44rem; }
.rnw-sns-link .lbl { font-size: 1.28rem; font-weight: 700; letter-spacing: .1em; color: var(--debc-text-sub); }
.rnw-sns-link ul { display: flex; gap: 0.8rem; list-style: none; margin: 0; padding: 0; }
/* 시안 실측: 원형 지름 45px */
.rnw-sns-link a {
  display: flex; align-items: center; justify-content: center; width: 45px; height: 45px;
  border: 1px solid var(--debc-line); border-radius: 50%; background: #fff;
  color: var(--debc-navy); font-size: 1.84rem; text-decoration: none;
}
.rnw-sns-link a:hover, .rnw-sns-link a:focus-visible { background: var(--debc-navy); border-color: var(--debc-navy); color: #fff; }

/* 시안 실측: 4열 · 카드 폭 376 · 갭 32 · 썸네일 376x210(16:9 에 가깝다) */
.rnw-sns-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; list-style: none; margin: 2.56rem 0 0; padding: 0; }
.rnw-sns-list > li { min-width: 0; }
/* 제목에 주소·영문 낱말이 들어와도 칸 밖으로 나가지 않게 한다(재단소식 카드와 같은 이유 — 아래 주석 참조) */
.rnw-sns-list a { display: block; min-width: 0; color: inherit; text-decoration: none; overflow-wrap: break-word; overflow-wrap: anywhere; }
.rnw-sns-list .thumb { display: block; width: 100%; aspect-ratio: 376 / 210; border-radius: 10px; overflow: hidden; background: var(--debc-bg); }
.rnw-sns-list .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rnw-sns-list .noimg { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--debc-muted); font-size: 2.88rem; }
.rnw-sns-list .tit {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  margin: 1.44rem 0 1.12rem; font-weight: 600; line-height: 1.5; min-height: 4.5em;
}
.rnw-sns-list a:hover .tit, .rnw-sns-list a:focus-visible .tit { color: var(--debc-primary); text-decoration: underline; }
.rnw-sns-list .meta { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.rnw-sns-list .ch { border-radius: 999px; padding: 0.32rem 1.12rem; font-size: 1.248rem; font-weight: 700; background: var(--debc-bg); color: var(--debc-navy); }
.rnw-sns-list .de { font-size: 1.312rem; color: var(--debc-muted); }
.rnw-sns-list.is-js > li[data-sns-off] { display: none; }
.rnw-sns-empty { margin: 2.56rem 0 0; color: var(--debc-text-sub); }

.rnw-sns-bar { display: flex; align-items: center; gap: 1.44rem; margin-top: 2.4rem; }
/* ★ 위 `display:flex` 가 UA 의 `[hidden]{display:none}` 을 이긴다 —
     이 한 줄이 없으면 **JS 를 꺼도 죽은 버튼이 그대로 보인다**(배너 바에서 이미 밟은 함정). */
.rnw-sns-bar[hidden] { display: none; }
.rnw-sns-bar .ind { font-size: 1.44rem; color: var(--debc-text-sub); }
.rnw-sns-bar .ind .now { color: var(--debc-text); font-weight: 700; }
.rnw-sns-bar .prog { flex: 1; height: 3px; background: var(--debc-line); border-radius: 2px; overflow: hidden; }
.rnw-sns-bar .prog i { display: block; height: 100%; width: 0; background: var(--debc-navy); transition: width .25s; }
.rnw-sns-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--debc-line);
  background: #fff; color: var(--debc-text); font-size: 1.6rem; cursor: pointer;
}
.rnw-sns-btn:hover { border-color: var(--debc-primary); color: var(--debc-primary); }

@media (max-width: 991.98px) {
  .rnw-sns-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 767.98px) {
  .rnw-sns-head { align-items: flex-start; }
  .rnw-sns-list { gap: 16px; }
  .rnw-sns-list .tit { -webkit-line-clamp: 2; min-height: 3em; font-size: 1.52rem; }
  .rnw-sns-link a { width: 38px; height: 38px; font-size: 1.6rem; }
}

/* =====================================================================
   유관기관 롤링 (2026-08-12 신설 — 여태 구현 0건, DESIGN §3-3 ⑤)

   자료 `TB_RLTE_INSTT` 중 **로고가 있는 7건**. `LOGO_URL` 은 완성 경로다
   (TB_MAIN_EXPSR.IMG_NM 은 파일명만 — 두 컬럼의 규칙이 다르다).

   ★ **저절로 움직이는 것은 JS 가 켜졌을 때만이다.** 스크립트가 없으면 손으로 미는 띠다 —
     멈출 수단(정지 버튼)이 동작하지 않는 상태에서 화면이 저 혼자 움직이면 KWCAG 2.2.2 위반이다.
     '동작 줄이기'가 켜져 있으면 애초에 움직이지 않는다.
   ===================================================================== */
.rnw-partner { border-top: 1px solid var(--debc-line); border-bottom: 1px solid var(--debc-line); background: #fff; }
.rnw-partner-box { position: relative; display: flex; align-items: center; gap: 1.6rem; height: 137px; }
.rnw-partner-track { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.rnw-partner-track::-webkit-scrollbar { display: none; }
.rnw-partner-track ul { display: flex; align-items: center; gap: 4.8rem; list-style: none; margin: 0; padding: 0; }
.rnw-partner-track li { flex: 0 0 auto; }
.rnw-partner-track img { display: block; height: 46px; width: auto; max-width: 190px; object-fit: contain; }
.rnw-partner-track a { display: block; }
.rnw-partner-pause {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--debc-line);
  background: #fff; color: var(--debc-text-sub); cursor: pointer;
}
.rnw-partner-pause:hover { border-color: var(--debc-primary); color: var(--debc-primary); }
.rnw-partner-pause[hidden] { display: none; }
.rnw-partner-box.is-js .rnw-partner-track { overflow: hidden; }
.rnw-partner-box.is-js .rnw-partner-track ul { animation: rnwPartnerRoll 34s linear infinite; width: max-content; }
.rnw-partner-box.is-js.is-paused .rnw-partner-track ul { animation-play-state: paused; }
@keyframes rnwPartnerRoll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── 약관·개인정보처리방침 전문 화면 (2026-08-20 — 아코디언 폐지) ──
   법정 고지물은 «지금 시행 중인 한 벌» 을 읽으러 오는 화면이다. 접어 두면 한 번 더 눌러야 하고
   인쇄·본문검색(Ctrl+F)에도 걸리지 않는다. 그래서 전문을 그대로 편다. */
.policy-current { margin: 3.2rem 0 0; }
.policy-tit { margin: 0 0 1.6rem; font-size: 2.4rem; font-weight: 700; color: #16337E; }
.policy-current .jenny-content { font-size: 1.7rem; line-height: 1.8; }
.policy-old { margin: 4.8rem 0 0; padding-top: 2.4rem; border-top: 1px solid #E5E8EA; }
.policy-old h3 { margin: 0 0 1.2rem; font-size: 1.8rem; font-weight: 700; }
.policy-old ul { margin: 0; padding-left: 2rem; }
.policy-old li { margin: .4rem 0; }
@media (prefers-reduced-motion: reduce) {
  .rnw-partner-box.is-js .rnw-partner-track { overflow-x: auto; }
  .rnw-partner-box.is-js .rnw-partner-track ul { animation: none; }
}
@media (max-width: 767.98px) {
  .rnw-partner-box { height: 96px; gap: 0.96rem; }
  .rnw-partner-track ul { gap: 2.88rem; }
  .rnw-partner-track img { height: 34px; max-width: 140px; }
}

/* =====================================================================
   주요 사업 둘러보기 (2026-08-12 동작 부여 — DESIGN §3-3 ③)

   발주처: "배경 이미지 안에 버튼들이 많이 있는데 구현이 안 된 것 같아" — 맞다.
   우측이 고정 문구 한 덩어리였고 하위 카드·`더 알아보기` 가 아예 없었다.
   시안 동작은 **좌 메뉴 클릭 → 우 비주얼 전체 교체**이고, 활성 표시는 **남색 면 채움**이다
   (종전 구현은 좌측 세로선이었다).

   ★ **JS 를 끄면 첫 판이 그대로 보인다.** 두 번째 판부터만 감추고, 전환은 `.is-js` 가 붙은 뒤에만 한다.
   ===================================================================== */
.rnw-biz { display: grid; grid-template-columns: minmax(0, 301fr) minmax(0, 1262fr); gap: 24px; align-items: stretch; }
.rnw-biz-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rnw-biz-menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 0.96rem;
  padding: 1.76rem 1.92rem; border: 1px solid var(--debc-line); border-radius: 8px;
  background: #fff; font-weight: 600; color: var(--debc-text); text-decoration: none;
}
.rnw-biz-menu a .bi { color: var(--debc-muted); }
.rnw-biz-menu a:hover { border-color: var(--debc-primary); color: var(--debc-primary); }
/* 시안 실측: 활성은 **남색 면 채움 + 흰 글씨**(rgb(25,60,144))이고 비활성보다 크다 */
.rnw-biz-menu a.is-on {
  background: #193C90; border-color: #193C90; color: #fff; padding-top: 3.04rem; padding-bottom: 3.04rem;
}
.rnw-biz-menu a.is-on .bi { color: #fff; }

.rnw-biz-stage { position: relative; min-width: 0; }
.rnw-biz-pane {
  border-radius: 12px; padding: 4.16rem 4.48rem; color: #fff; min-height: 340px;
  display: flex; flex-direction: column; justify-content: center;
  /* 배경 사진 5장은 아직 없다(자산 대기). `--biz-bg` 를 넣으면 사진 + 어두운 오버레이가 된다. */
  background:
    linear-gradient(rgba(9, 27, 66, .72), rgba(9, 27, 66, .72)),
    var(--biz-bg, linear-gradient(135deg, #16337E 0%, #2E5BE0 100%));
  background-size: cover; background-position: center;
}
/* 두 번째 판부터 감춘다 — 스크립트가 없어도 첫 판은 보인다. */
.rnw-biz-pane + .rnw-biz-pane { display: none; }
.rnw-biz.is-js .rnw-biz-pane { display: none; }
.rnw-biz.is-js .rnw-biz-pane.is-on { display: flex; }
.rnw-biz-pane .eyebrow { margin: 0 0 0.8rem; font-size: 1.312rem; font-weight: 700; letter-spacing: .12em; color: rgba(255, 255, 255, .72); }
.rnw-biz-pane h3 { margin: 0 0 1.12rem; font-size: 3.04rem; font-weight: 800; letter-spacing: -.02em; }
.rnw-biz-pane .dsc { margin: 0 0 2.24rem; color: rgba(255, 255, 255, .86); line-height: 1.7; max-width: 67.2rem; }
.rnw-biz-more {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 0.8rem;
  padding: 0.88rem 2.24rem; border: 1px solid rgba(255, 255, 255, .85); border-radius: 999px;
  color: #fff; text-decoration: none; font-weight: 600; font-size: 1.472rem;
}
.rnw-biz-more:hover { background: #fff; color: #16337E; }
/* 하위 카드 3개 — 자식 메뉴를 그대로 쓴다(별도 표를 두면 메뉴와 어긋난다) */
.rnw-biz-sub { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin: 2.88rem 0 0; padding: 0; }
.rnw-biz-sub a {
  display: block; padding: 1.28rem 1.92rem; border-radius: 8px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .34);
  color: #fff; text-decoration: none; font-weight: 600; font-size: 1.488rem;
}
.rnw-biz-sub a:hover { background: #1F449F; border-color: #fff; }

@media (max-width: 991.98px) {
  .rnw-biz { grid-template-columns: 1fr; gap: 14px; }
  /* MO 는 좌 메뉴가 **가로 스크롤 알약 탭**이 된다(DESIGN §5-2 5번). */
  .rnw-biz-menu { flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 0.48rem; scrollbar-width: none; }
  .rnw-biz-menu::-webkit-scrollbar { display: none; }
  .rnw-biz-menu li { flex: 0 0 auto; }
  .rnw-biz-menu a { padding: 0.96rem 1.6rem; border-radius: 999px; white-space: nowrap; font-size: 1.44rem; }
  .rnw-biz-menu a.is-on { padding-top: 0.96rem; padding-bottom: 0.96rem; }
  .rnw-biz-menu a .bi { display: none; }
  .rnw-biz-pane { padding: 2.56rem; min-height: 0; border-radius: 10px; }
  .rnw-biz-pane h3 { font-size: 2.08rem; }
  .rnw-biz-sub { margin-top: 1.92rem; gap: 8px; }
  .rnw-biz-sub a { font-size: 1.36rem; padding: 0.96rem 1.44rem; }
}

/* ---------- 게시판 목록/상세 (시안 §2-3, §2-4 실측) ---------- */
/* 검색바: 회색 풀폭 박스 — 목록 테이블 "위" */
.rnw-board-search {
  display: flex; gap: 0.96rem; align-items: center;
  background: #F8F8F8; padding: 1.76rem 1.92rem; margin-bottom: 2.56rem;
}
.rnw-board-search .form-select { flex: 0 0 220px; border: 1px solid #D5D5D5; border-radius: 4px; background-color: #fff; }
.rnw-board-search .form-control { flex: 1; border: 1px solid #D5D5D5; border-radius: 4px; }
.rnw-btn-search {
  flex: 0 0 auto; background: var(--debc-primary); color: #fff; border: 0; border-radius: 4px;
  padding: 0.8rem 2.4rem; font-weight: 600;
}
.rnw-btn-search:hover { background: var(--debc-primary-deep); color: #fff; }

/* Total 표기 — 숫자만 파란색 */
.rnw-total { margin: 0 0 1.12rem; font-size: 1.52rem; color: var(--debc-text); }
.rnw-total strong { color: var(--debc-primary); }

/* 목록 테이블 */
table.rnw-board { width: 100%; border-collapse: collapse; border-top: 1px solid #555354; }
table.rnw-board th {
  background: #F3F6FD; font-weight: 700; text-align: center; padding: 1.6rem 0.96rem;
  border-bottom: 1px solid #E0E0E0; border-left: 1px solid #E8ECF3;
}
table.rnw-board th:first-child { border-left: 0; }
table.rnw-board td {
  text-align: center; padding: 1.76rem 0.96rem; border-bottom: 1px solid #E0E0E0;
  border-left: 1px solid #EFEFEF; color: var(--debc-text-sub); font-size: 1.52rem;
}
table.rnw-board td:first-child { border-left: 0; }
table.rnw-board td.tit { text-align: left; padding-left: 2.88rem; }
table.rnw-board td.tit a { color: var(--debc-text); text-decoration: none; }
table.rnw-board td.tit a:hover { color: var(--debc-primary); text-decoration: underline; }
table.rnw-board td.empty { padding: 4.8rem 1.6rem; color: var(--debc-muted); }

/* 열 폭 — 종전에는 템플릿의 `<col style="width:100px">` 인라인이었다.
   인라인은 미디어쿼리로 이길 수 없어(특정도가 아니라 출처의 문제) MO 에서 번호 열을 좁힐 수 없었다.
   → 클래스로 옮겨 폭 조정을 이 파일 한 곳에서 하게 한다. */
table.rnw-board col.c-no { width: 100px; }
table.rnw-board col.c-file { width: 160px; }
table.rnw-board col.c-date { width: 160px; }
table.rnw-board col.c-hit { width: 110px; }

/* 제목 셀 안 메타 행 — **PC 에서는 그리지 않는다.**
   `display:none` 은 접근성 트리에서도 빼기 때문에, 같은 값을 두 번 마크업해도
   어느 폭에서든 스크린리더가 읽는 값은 한 벌뿐이다(중복 낭독이 생기지 않는다). */
.rnw-board-meta { display: none; }

/* -----------------------------------------------------------------------
   썸네일형 목록(BBSA02) — 규칙을 **여기서 걷어냈다** (2026-08-21)

   정책조사연구 카드는 퍼블리셔 정본 `.doc-list`(pb/css/page.min.css)로 갈아탔다.
   그전에는 시안 «그림» 만 보고 `.rnw-thumb-*` 라는 우리 이름으로 지어 만들었는데,
   표지가 카드 안에서 오른쪽으로 밀리고 터치 기기에서 엉뚱한 단추가 눌리는 문제가 있었다.
   정본 css 가 그 둘을 이미 해결해 둔다(`margin:0 auto` · `@media(max-width:767px)`).

   두 벌을 남겨 두면 다음 사람이 무엇이 살아 있는지 알 수 없어 엉뚱한 쪽을 고치게 된다.
   우리 몫으로 남은 «정본에 없는 상태» 둘 — 표지 없음(.doc-img-none) · 빈 목록(.doc-list-empty) —
   은 pb/css/debc-pb.css 에 있다(정본 옆에 두어야 함께 읽힌다).
   ----------------------------------------------------------------------- */


/* 게시글 상세 — 헤더 테이블 */
table.rnw-view { width: 100%; border-collapse: collapse; border-top: 1px solid var(--debc-primary); }
table.rnw-view .view-tit {
  background: #F3F6FD; text-align: center; font-weight: 700; font-size: 1.76rem;
  padding: 2.24rem 1.6rem; border-bottom: 1px solid #E0E0E0;
}
table.rnw-view th {
  background: #F3F6FB; width: 160px; font-weight: 600; text-align: center;
  padding: 1.36rem 1.6rem; border-bottom: 1px solid #E0E0E0; border-right: 1px solid #E8ECF3;
  font-size: 1.472rem;
}
table.rnw-view td {
  padding: 1.36rem 1.92rem; border-bottom: 1px solid #E0E0E0; font-size: 1.472rem;
  color: var(--debc-text-sub); text-align: left;
}
table.rnw-view td a { color: var(--debc-text); text-decoration: underline; }
table.rnw-view td a:hover { color: var(--debc-primary); }

/* 상세 본문 — 감싸는 카드 없음 */
.rnw-view-body { padding: 3.52rem 0.64rem 4.16rem; line-height: 1.85; }
.rnw-view-body img { max-width: 100%; height: auto; }

/* 하단 목록 버튼 — 가운데, 흰 배경 + 파란 테두리 */
.rnw-view-foot { display: flex; justify-content: center; gap: 0.96rem; margin-top: 1.6rem; }
.rnw-btn-list {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 200px; height: 60px; padding: 0 2.24rem; border-radius: 3px;
  background: #fff; border: 1px solid var(--debc-primary); color: var(--debc-primary);
  font-weight: 600; text-decoration: none;
}
.rnw-btn-list:hover { background: var(--debc-primary); color: #fff; }

/* 섹션 제목 장식(가운데 H2 + 짧은 파란 바) — 시안 §2-5 */
.rnw-sec-title { text-align: center; font-size: 2.56rem; font-weight: 800; margin: 3.84rem 0 0.96rem; }
.rnw-sec-title::after {
  content: ""; display: block; width: 28px; height: 6px; margin: 1.28rem auto 0;
  background: var(--debc-primary);
}

/* 태블릿 구간(768~1199) — **열 구성은 그대로 5열**이고, 고정 열 폭만 줄인다.
   DESIGN §5-1 이 1199.98px 에 대해 정한 원칙과 같다: "본문이 눌리기 전에 라벨열부터 줄인다."
   실측 근거 — 이 규칙이 없으면 768px 에서 고정 열(100+160+160+110=530)이 컨테이너를 먹어
   제목 칸이 **190px** 밖에 남지 않고, 제목이 **줄당 7.5자**로 끊겼다.
   (MO 2열 전환은 767.98px 이하다 — 그 값은 문서가 정한 것이라 바꾸지 않았다.
    이 블록은 그 아래 MO 블록보다 **먼저** 와야 한다. 같은 특정도라 순서가 승패를 정한다.) */
@media (max-width: 1199.98px) {
  table.rnw-board col.c-no { width: 5.44rem; }
  table.rnw-board col.c-file { width: 6.4rem; }
  table.rnw-board col.c-date { width: 10.24rem; }
  table.rnw-board col.c-hit { width: 6.4rem; }
  table.rnw-board th, table.rnw-board td { padding-left: 0.56rem; padding-right: 0.56rem; font-size: 1.408rem; }
  table.rnw-board td.tit {
    padding-left: 1.44rem;
    word-break: keep-all; overflow-wrap: break-word; overflow-wrap: anywhere;
  }
}

@media (max-width: 767.98px) {
  .rnw-board-search { flex-wrap: wrap; }
  .rnw-board-search .form-select { flex: 1 1 100%; }

  /* =====================================================================
     게시판 목록 **5열 → 2열** (DESIGN.md §5-2 3번 · §4-2, 2026-08-13 구현)

     왜 필요했나 — 종전 MO 규칙은 아래 한 줄(첨부 열 감추기)뿐이었다. 나머지 4열이
     375px 를 그대로 나눠 가져 **제목 칸이 5자쯤으로 눌렸고**, 한글은 음절마다 줄바꿈이
     허용되므로 `2025년 공사 계약현황` 이 「2025 / 년 공 / 사 계 / 약현 / 황」 으로 쪼개졌다.
     제목이 글자 단위로 끊기면 목록을 **읽을 수 없다** — 화면은 200 이고 값도 다 들어 있어
     지표로는 잡히지 않는 종류의 결함이다.

     규칙(문서 그대로) — 남기는 것은 **첫 열 + 제목** 둘이고,
     등록일·조회수는 **제목 셀 안 2행 메타**로 옮긴다(같은 값을 두 번 마크업한다).
     **첨부 열은 MO 에서 생략한다**(§4-2 명시) — 메타에 끼워 넣지 않았다.

     ★ `nth-child(n+3)` 으로 건 이유: 게시판마다 3~5열의 뜻이 다르지만(공지=첨부·등록일·조회 /
       Q&A=작성자·작성일·조회) **자리(3열부터)는 같다.** 표마다 다른 규칙을 만들면 반드시
       한쪽만 최신이 된다. 빈 목록 행의 `td[colspan]` 은 1열이라 이 규칙에 걸리지 않는다.
     ===================================================================== */
  table.rnw-board th:nth-child(n+3),
  table.rnw-board td:nth-child(n+3) { display: none; }
  /* 셀을 감춰도 `<col>` 은 남아 폭을 잡는다 — 함께 0 으로 눕히지 않으면 제목 칸이 그만큼 좁아진다. */
  table.rnw-board col.c-file,
  table.rnw-board col.c-date,
  table.rnw-board col.c-hit { width: 0; }
  /* 번호 열 100px 은 375px 의 27% 다. 제목에 폭을 넘긴다(시안 MO 목록도 번호가 좁다). */
  table.rnw-board col.c-no { width: 5.12rem; }
  table.rnw-board th:first-child,
  table.rnw-board td:first-child { padding-left: 0.32rem; padding-right: 0.32rem; font-size: 1.376rem; }

  table.rnw-board td.tit {
    padding-left: 1.28rem; padding-right: 0.96rem;
    /* keep-all 이 없으면 한글이 음절 단위로 끊긴다(이 결함의 직접 원인).
       띄어쓰기 없는 긴 낱말은 그대로 두면 표를 밀어내므로 함께 끊을 수 있게 한다.
       ★ `break-word` 만으로는 부족하다 — 그 값은 **표의 min-content 폭을 줄이지 않아**
         칸은 안 넘치는데 **표가 통째로 넓어진다**(실측: 신고하기 게시판의 점검용 제목
         `MSSCSC 웹취약점 점검(***-…)()<>''""%2…` 70자가 375px 에서 문서를 42px 밀었다).
         `anywhere` 는 min-content 를 줄여 그 원인을 없앤다. 두 줄을 함께 두는 이유는
         `anywhere` 를 모르는 브라우저가 앞 줄(break-word)로 되돌아가게 하기 위해서다. */
    word-break: keep-all; overflow-wrap: break-word; overflow-wrap: anywhere;
  }
  table.rnw-board td.tit a { display: inline-block; line-height: 1.5; }
  .rnw-board-meta {
    display: flex; flex-wrap: wrap; gap: 0.16rem 1.12rem; margin-top: 0.56rem;
    font-size: 1.312rem; color: var(--debc-text-sub);
  }

  .rnw-btn-list { min-width: 140px; height: 48px; }
}

/* ---------- 푸터 ---------- */
/* =====================================================================
   푸터 — **3단 구조** (2026-08-11 전면 재작성 · DESIGN.md §3-4)

   시안 실측: ①로고행(흰) ②정책행(연회청 #F7F8FD, 높이 105) ③정보행(흰), 전체 410.
   종전 구현은 2단(241px)이었고 §2 의 한 줄 설명이 그 2단을 전제하고 있었다(v2.4 에서 정정됨).

   ★ 이 절은 **전 화면 158개**에 걸린다. 값 하나를 바꾸면 전부 바뀐다.
   ===================================================================== */
.rnw-footer { background: #fff; border-top: 1px solid var(--debc-line); font-size: 1.392rem; color: var(--debc-text-sub); }

/* ① 로고행 — 좌 로고 / 우 (오시는길 버튼 + SNS 원형 4개) */
.rnw-foot-top > .container { display: flex; align-items: center; justify-content: space-between; gap: 2.4rem; min-height: 118px; flex-wrap: wrap; }
.rnw-foot-logo img { height: 46px; width: auto; display: block; }
.rnw-foot-act { display: flex; align-items: center; gap: 2.56rem; flex-wrap: wrap; }
/* 시안 실측: 남색 알약 149x47, rgb(0,54,137) */
.rnw-foot-way {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.72rem;
  min-width: 149px; height: 47px; padding: 0 1.76rem; border-radius: 999px;
  background: #003689; color: #fff; text-decoration: none; font-weight: 600; font-size: 1.52rem;
}
.rnw-foot-way:hover { background: var(--debc-primary-deep); color: #fff; }
.rnw-foot-sns { display: flex; align-items: center; gap: 13px; list-style: none; margin: 0; padding: 0; }
/* 시안 실측: 원형 지름 45, 중심 간격 61(= 45 + 16) */
.rnw-foot-sns a {
  width: 45px; height: 45px; border-radius: 50%; background: var(--debc-bg);
  display: inline-flex; align-items: center; justify-content: center;
}
.rnw-foot-sns a:hover { background: var(--debc-halo); }
.rnw-foot-sns img { width: 22px; height: 22px; }

/* ② 정책행 — 연회청 면. 좌 링크 5종(+이용약관) / 우 유관기관 */
.rnw-foot-policy { background: var(--debc-panel); border-top: 1px solid var(--debc-line); border-bottom: 1px solid var(--debc-line); }
.rnw-foot-policy > .container { display: flex; align-items: center; justify-content: space-between; gap: 1.92rem; min-height: 105px; flex-wrap: wrap; }
.rnw-foot-links { display: flex; align-items: center; flex-wrap: wrap; gap: 0.64rem 2.72rem; list-style: none; margin: 0; padding: 0; }
.rnw-foot-links a { font-weight: 600; color: var(--debc-text); text-decoration: none; font-size: 1.52rem; }
.rnw-foot-links a:hover { color: var(--debc-primary); text-decoration: underline; }
/* 개인정보처리방침만 강조(시안·구 구현 공통) */
.rnw-foot-links a.privacy { color: var(--debc-orange); font-weight: 700; }

/* 유관기관 — `<select>` 가 아니라 `<details>` 다(JS 없이 열린다. 이유는 footer.html 주석).
   시안대로 **위로 펼친다** — 목록을 absolute 로 띄우고 bottom 을 요약 바에 붙인다. */
.rnw-foot-instt { position: relative; width: 212px; flex: 0 0 auto; }
.rnw-foot-instt > summary {
  list-style: none; cursor: pointer; height: 44px; padding: 0 1.44rem;
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; border: 1px solid var(--debc-line); border-radius: 4px;
  color: var(--debc-text); font-size: 1.472rem;
}
.rnw-foot-instt > summary::-webkit-details-marker { display: none; }
.rnw-foot-instt[open] > summary { border-color: var(--debc-primary); }
.rnw-foot-instt[open] > summary .bi { transform: rotate(180deg); }
.rnw-foot-instt > ul {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 4px); z-index: 20;
  max-height: 260px; overflow-y: auto; margin: 0; padding: 0.56rem 0; list-style: none;
  background: #fff; border: 1px solid var(--debc-line); border-radius: 4px;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, .10);
}
.rnw-foot-instt > ul a { display: block; padding: 0.72rem 1.44rem; color: var(--debc-text); text-decoration: none; font-size: 1.408rem; }
.rnw-foot-instt > ul a:hover { background: var(--debc-bg); color: var(--debc-primary); }

/* ③ 정보행 — 좌 기관정보 / 중 연락처 2행 / 우 인증마크 2종 */
.rnw-foot-info > .container { display: flex; align-items: flex-start; justify-content: space-between; gap: 3.2rem; padding-top: 3.36rem; padding-bottom: 3.84rem; flex-wrap: wrap; }
.rnw-foot-org { flex: 1 1 auto; min-width: 0; }
.rnw-foot-org .nm { margin: 0 0 0.72rem; font-size: 1.632rem; font-weight: 700; color: var(--debc-text); }
.rnw-foot-org .addr { margin: 0 0 0.72rem; }
.rnw-foot-org .copy { margin: 0; color: var(--debc-muted); }
/* 연락처 — 라벨/값 2행. 하이픈·괄호는 줄바꿈 기회라 덩어리로 묶는다(구 .rnw-foot-tel 과 같은 이유). */
.rnw-foot-tel { display: flex; flex-direction: column; gap: 0.64rem; margin: 0; flex: 0 0 auto; }
.rnw-foot-tel > div { display: flex; align-items: baseline; gap: 1.12rem; }
.rnw-foot-tel dt { min-width: 7.36rem; font-weight: 700; color: var(--debc-text); }
.rnw-foot-tel dd { margin: 0; }
.rnw-foot-tel .hours { margin-left: 0.56rem; color: var(--debc-muted); }
.rnw-foot-nw { white-space: nowrap; }
/* 인증마크 — 시안 실측 WLB 79x75 · WA 82x75, 간격 28 */
.rnw-foot-mark { display: flex; align-items: center; gap: 28px; flex: 0 0 auto; }
.rnw-foot-mark img { height: 75px; width: auto; display: block; }

@media (max-width: 991.98px) {
  .rnw-foot-top > .container { min-height: 0; padding-top: 2.24rem; padding-bottom: 1.92rem; }
  .rnw-foot-policy > .container { min-height: 0; padding-top: 1.6rem; padding-bottom: 1.6rem; }
  .rnw-foot-info > .container { gap: 2.24rem; }
}
@media (max-width: 767.98px) {
  /* MO 시안: **유관기관 드롭다운을 빼고** 정책 링크를 2행으로 접는다(DESIGN §3-4). */
  .rnw-foot-instt { display: none; }
  .rnw-foot-links { gap: 0.8rem 1.76rem; font-size: 1.36rem; }
  .rnw-foot-links a { font-size: 1.36rem; }
  .rnw-foot-act { gap: 1.6rem; width: 100%; justify-content: space-between; }
  .rnw-foot-logo img { height: 38px; }
  .rnw-foot-way { min-width: 0; height: 40px; font-size: 1.408rem; }
  .rnw-foot-sns a { width: 38px; height: 38px; }
  .rnw-foot-sns img { width: 19px; height: 19px; }
  .rnw-foot-info > .container { flex-direction: column; align-items: flex-start; gap: 1.76rem; }
  .rnw-foot-mark img { height: 58px; }
}
/* (2026-08-11) 구 `.rnw-footer .rnw-foot-tel { white-space:nowrap }` 두 줄은 삭제했다.
   3단 푸터에서 `.rnw-foot-tel` 은 **연락처 정의목록 전체**를 가리키는 이름이 됐고,
   거기에 nowrap 을 걸면 좁은 화면에서 줄이 안 접혀 가로로 넘친다.
   전화번호가 `1588-` / `6072(평일` 로 갈리는 것을 막는 역할은 **값 하나만 감싸는**
   `.rnw-foot-nw` 로 옮겼다(위 ③ 정보행 절). 같은 선택자를 두 뜻으로 쓰지 않는다. */
/* TOP 버튼 — 기본은 **흐름 안(푸터 끝, 우측)** 이다. 떠 있는 것은 여백이 확보될 때뿐.
   ------------------------------------------------------------------ (2026-08-10 전 구간 정리)
   1차(2026-08-09)에는 375px 만 흐름 안으로 옮겼다. **768·1024 가 무방비로 남아 있었다** —
   QA 실측에서 110·211·251 이 두 폭 전건 겹쳤다(900·1200·1280·1399·1400·1600·1920 은 0건).
   원인은 폭 자체가 아니라 **컨테이너 바깥 여백**이다. 계산하면 이렇다.
     · vw < 1400 : 컨테이너 = min(vw, 1140) -> 여백 (vw-1140)/2  (vw<=1140 이면 0)
     · vw >= 1400: 컨테이너 = min(vw, 1600) -> 여백 (vw-1600)/2  (vw<1600 이면 0)
   버튼(46px) + 우측 간격(19px) = **65px** 이 있어야 본문을 안 가린다. 그 조건을 푸는 구간은
   **1271~1399** 와 **1731 이상** 두 토막으로 끊긴다. 폭을 키울수록 떴다 가라앉았다 하면
   더 이상하므로, **1732px 이상에서만 띄우고 그 아래는 전부 흐름 안**으로 통일했다.
   (1600 컨테이너가 서려면 1600 + 65*2 = 1730 이 필요하다 — 여기서 나온 값이다.)
   지우지는 않는다 — 긴 문서에서 맨 위로 돌아가는 수단을 없애면 접근성이 나빠진다.
   위치를 흐름 안으로 옮기면 겹침이 **구조적으로 불가능**해진다(z-index 다툼도 없다).
   시안도 TOP 을 푸터 구성요소로 그린다(DESIGN 2 푸터). */
.rnw-top-btn {
  position: static; display: block; margin: 1.6rem 1.6rem 1.92rem auto;
  width: 46px; height: 46px; border-radius: 50%; border: 0;
  background: var(--debc-navy); color: #fff; font-weight: 700; font-size: 1.248rem;
}
@media (min-width: 1732px) {
  .rnw-top-btn {
    position: fixed; right: 1.92rem; bottom: 1.92rem; z-index: 1500; margin: 0;
  }
}
@media (max-width: 767.98px) {
  .rnw-top-btn { width: 42px; height: 42px; font-size: 1.152rem; }
}

/* ---------- 반응형 ---------- */
@media (max-width: 991.98px) {
  .rnw-gnb { display: none !important; } /* 데스크톱 GNB 숨김 → 햄버거 */
  /* `.rnw-quick .grid` 3열 규칙은 위 "히어로 반응형" 절로 옮겼다(2026-08-11).
     같은 선택자를 파일 두 곳에 두면 **뒤쪽이 항상 이겨** 히어로 절의 값이 조용히 무시된다. */
}
@media (min-width: 992px) {
  .rnw-mmenu-toggle { display: none; }   /* 데스크톱에선 햄버거 숨김 */
}


/* ---------- 통합검색 결과 (시안 0.검색결과) ---------- */
.rnw-search-box { background: var(--debc-bg); border-radius: var(--debc-radius); padding: 2.24rem 2.56rem; margin-bottom: 2.88rem; }
.rnw-search-box .rnw-search-row { display: flex; gap: 1.28rem; margin-bottom: 1.28rem; }
.rnw-search-box .rnw-search-row:last-child { margin-bottom: 0; }
.rnw-search-box .form-select { max-width: 220px; border-radius: 6px; }
.rnw-search-box .form-control { flex: 1; border: 2px solid var(--debc-primary); border-radius: 6px; }
.rnw-search-box .btn-primary { background: var(--debc-primary); border-color: var(--debc-primary); border-radius: 6px; padding: 0.64rem 2.24rem; }

.rnw-search-summary {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.96rem;
  padding: 0.96rem 0 1.6rem; font-size: 1.68rem;
}
.rnw-search-summary .kw { color: var(--debc-primary); }
.rnw-search-summary .chip {
  display: inline-block; margin-left: 0.8rem; background: var(--debc-bg);
  border-radius: 14px; padding: 0.24rem 1.12rem; font-size: 1.36rem; color: var(--debc-text-sub);
}
.rnw-search-summary .chip b { color: var(--debc-primary); }
.rnw-search-summary .page-note { font-size: 1.36rem; color: var(--debc-primary); }

.rnw-pills .cnt {
  display: inline-block; margin-left: 0.56rem; background: var(--debc-muted); color: #fff;
  border-radius: 10px; padding: 0 0.72rem; font-size: 1.248rem;
}
.rnw-pills a.active .cnt { background: rgba(255,255,255,.35); }

.rnw-search-group-title { font-size: 1.6rem; font-weight: 700; color: var(--debc-primary); margin: 2.56rem 0 1.28rem; }
.rnw-search-group-title b { color: var(--debc-text); }
.rnw-search-list { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.rnw-search-list li { margin-bottom: 1.28rem; }
.rnw-search-item {
  display: block; border: 1px solid var(--debc-line); border-radius: var(--debc-radius);
  padding: 1.76rem 2.08rem; text-decoration: none; color: inherit; background: #fff;
}
.rnw-search-item:hover { border-color: var(--debc-primary); }
.rnw-search-item .tag {
  display: inline-block; background: var(--debc-navy); color: #fff; border-radius: 4px;
  padding: 0.192rem 0.88rem; font-size: 1.248rem; font-weight: 600; margin-right: 0.8rem;
}
.rnw-search-item .tit { font-weight: 700; }
.rnw-search-item .desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin: 0.8rem 0 0.96rem; font-size: 1.408rem; color: var(--debc-text-sub); line-height: 1.6;
}
.rnw-search-item .meta { font-size: 1.28rem; color: var(--debc-muted); display: flex; gap: 0.64rem; align-items: center; flex-wrap: wrap; }
.rnw-search-item .meta .bar { color: var(--debc-line); }
@media (max-width: 575.98px) {
  .rnw-search-box .rnw-search-row { flex-direction: column; }
  .rnw-search-box .form-select { max-width: none; }
}

/* ---------- 오류 페이지(404/403/5xx/전역 폴백) — 2026-08-07 신설 ---------- */
.rnw-errpage {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 3.2rem 1.6rem; background: #fff;
  font-family: 'Pretendard', 'Malgun Gothic', sans-serif; color: var(--debc-text);
}
.rnw-errpage-inner { max-width: 640px; text-align: center; }
.rnw-errpage-code {
  margin: 0 0 0.96rem; font-size: 6.4rem; font-weight: 800; line-height: 1;
  color: var(--debc-primary); letter-spacing: -.02em;
}
.rnw-errpage-title { margin: 0 0 1.6rem; font-size: 2.4rem; font-weight: 700; }
.rnw-errpage-desc { margin: 0 0 3.2rem; font-size: 1.6rem; line-height: 1.8; color: var(--debc-text-sub); }
.rnw-errpage-actions { display: flex; gap: 0.96rem; justify-content: center; flex-wrap: wrap; }
.rnw-errpage-btn {
  display: inline-block; min-width: 140px; padding: 1.28rem 2.56rem;
  font-family: inherit; font-size: 1.6rem; line-height: 1.4; cursor: pointer;
  border: 1px solid var(--debc-line); border-radius: var(--debc-radius);
  background: #fff; color: var(--debc-text); text-decoration: none; font-weight: 600;
}
.rnw-errpage-btn:hover { border-color: var(--debc-primary); color: var(--debc-primary); }
.rnw-errpage-btn.primary { background: var(--debc-primary); border-color: var(--debc-primary); color: #fff; }
.rnw-errpage-btn.primary:hover { background: var(--debc-primary-deep); border-color: var(--debc-primary-deep); color: #fff; }
@media (max-width: 575.98px) {
  .rnw-errpage-code { font-size: 4.8rem; }
  .rnw-errpage-title { font-size: 2rem; }
}

/* 관리자 레이아웃·로그인 스타일은 static/css/admin.css 로 분리했다 (R5-2, 2026-08-08). */

/* =====================================================================
   R2-1 특수 컴포넌트 (2026-08-08) — KRDS 단독, Bootstrap 미사용
   FAQ 아코디언 · 연혁 타임라인 · 조직도 · 절차 플로차트 · 신고창구 카드 · 오시는 길
   ===================================================================== */

/* ---------- 아코디언 (FAQ/Q&A) ---------- */
.rnw-acc { border-top: 2px solid var(--debc-text); }
.rnw-acc-item { border-bottom: 1px solid var(--debc-line); }
.rnw-acc-btn {
  width: 100%; display: flex; align-items: flex-start; gap: 1.44rem; text-align: left;
  padding: 1.84rem 4.8rem 1.84rem 1.6rem; background: #fff; border: 0; cursor: pointer;
  font-size: 1.632rem; font-weight: 600; color: var(--debc-text); position: relative;
  font-family: inherit; line-height: 1.5;
}
.rnw-acc-btn:hover { background: var(--debc-bg); }
.rnw-acc-btn:focus-visible { outline: 3px solid var(--debc-primary); outline-offset: -3px; }
.rnw-acc-btn .qmark {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--debc-primary); color: #fff; font-weight: 700; font-size: 1.44rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.rnw-acc-btn .cate { font-size: 1.312rem; font-weight: 600; color: var(--debc-primary); margin-right: 0.64rem; }
.rnw-acc-btn::after {
  content: ""; position: absolute; right: 1.92rem; top: 50%; width: 10px; height: 10px;
  border-right: 2px solid var(--debc-text-sub); border-bottom: 2px solid var(--debc-text-sub);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s;
}
.rnw-acc-btn[aria-expanded="true"] { color: var(--debc-primary); }
.rnw-acc-btn[aria-expanded="true"]::after { transform: translateY(-20%) rotate(-135deg); border-color: var(--debc-primary); }
.rnw-acc-panel { display: none; padding: 1.92rem 2.24rem 2.4rem 5.76rem; background: var(--debc-bg); }
.rnw-acc-panel.open { display: block; }

/* 약관·개인정보처리방침 아코디언(R6 — Bootstrap collapse 대체) 보조 스타일.
   FAQ 는 질문 아이콘(.qmark)이 있어 패널 좌측 여백이 크지만, 이 두 화면은 아이콘이 없다. */
.rnw-acc-btn .rnw-acc-tag {
  display: inline-block; margin-left: 0.8rem; padding: 0.16rem 0.72rem; border-radius: 4px;
  background: #EAF6EE; color: #2E7D4F; font-size: 1.184rem; font-weight: 700; vertical-align: middle;
}
.rnw-sub .rnw-acc-panel { padding-left: 2.24rem; }
.rnw-acc-more { margin: 1.6rem 0 0; text-align: right; }
.rnw-acc-more a { color: var(--debc-primary); font-size: 1.44rem; font-weight: 600; }
.rnw-sub-actions { margin: 1.92rem 0 0; text-align: right; }
.rnw-acc-panel .amark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; background: var(--debc-navy); color: #fff;
  font-weight: 700; font-size: 1.44rem; margin-right: 0.96rem; vertical-align: top;
}
.rnw-acc-panel .acontent { display: inline-block; width: calc(100% - 40px); line-height: 1.75; color: var(--debc-text-sub); }
.rnw-acc-empty { padding: 4.8rem 1.6rem; text-align: center; color: var(--debc-text-sub); }

/* ---------- 연혁 타임라인 ---------- */
.rnw-timeline { position: relative; padding: 1.6rem 0 0 0; }
.rnw-timeline::before {
  content: ""; position: absolute; left: 118px; top: 0; bottom: 0; width: 2px; background: var(--debc-line);
}
.rnw-tl-item { position: relative; display: flex; gap: 3.2rem; padding-bottom: 3.52rem; }
.rnw-tl-year {
  flex: 0 0 100px; text-align: right; font-size: 2.16rem; font-weight: 800; color: var(--debc-primary);
  line-height: 1.2; padding-top: 0.16rem;
}
.rnw-tl-item::before {
  content: ""; position: absolute; left: 112px; top: 0.72rem; width: 14px; height: 14px;
  border-radius: 50%; background: var(--debc-primary); border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--debc-primary);
}
.rnw-tl-body { flex: 1; padding-left: 2.24rem; }
.rnw-tl-body dl { margin: 0; display: grid; grid-template-columns: 62px 1fr; gap: 0.56rem 1.28rem; }
.rnw-tl-body dt { font-weight: 700; color: var(--debc-text-sub); font-size: 1.44rem; }
.rnw-tl-body dd { margin: 0; color: var(--debc-text); line-height: 1.6; }
@media (max-width: 767.98px) {
  .rnw-timeline::before { left: 7px; }
  .rnw-tl-item { flex-direction: column; gap: 0.64rem; padding-left: 3.2rem; }
  .rnw-tl-item::before { left: 0; }
  .rnw-tl-year { text-align: left; flex: none; }
  .rnw-tl-body { padding-left: 0; }
}

/* ---------- 조직도 ---------- */
.rnw-org { text-align: center; padding: 1.6rem 0 3.2rem; }
.rnw-org-top { display: inline-block; }
.rnw-org-box {
  display: inline-block; min-width: 190px; padding: 1.36rem 2.24rem; border-radius: var(--debc-radius);
  background: var(--debc-navy); color: #fff; font-weight: 700; font-size: 1.68rem;
}
.rnw-org-box.sub { background: var(--debc-primary); font-size: 1.568rem; min-width: 160px; }
.rnw-org-box.dept {
  background: #fff; color: var(--debc-text); border: 1px solid var(--debc-line);
  font-weight: 600; font-size: 1.472rem; min-width: 140px; padding: 1.12rem 1.6rem;
}
.rnw-org-line { width: 2px; height: 26px; background: var(--debc-line); margin: 0 auto; }
.rnw-org-row { display: flex; justify-content: center; gap: 1.6rem; flex-wrap: wrap; position: relative; }
.rnw-org-row::before {
  content: ""; position: absolute; top: -14px; left: 15%; right: 15%; height: 2px; background: var(--debc-line);
}
.rnw-org-col { display: flex; flex-direction: column; align-items: center; }
.rnw-org-col .rnw-org-line { height: 14px; }
.rnw-org-aside { display: flex; justify-content: center; gap: 1.6rem; margin-bottom: 0.32rem; }
/* 동적 렌더(REQ-043, js/org-tree.js) — API 트리를 ul/li 로 그린다. 클래스는 위 정적 규칙을 그대로
   재사용하므로(선택자가 태그 무관) ul 기본 여백·글머리만 죽인다. 3뎁스부터는 부모 아래 세로 스택.
   admin/base.css 미러 불필요 — 이 마크업은 사용자 화면 JS 가 런타임에만 만든다(관리자 상세는 정적 폴백을 그린다). */
.rnw-org ul { list-style: none; margin: 0; padding: 0; }
.rnw-org-stack { display: flex; flex-direction: column; align-items: center; gap: 0.64rem; margin-top: 0.8rem; }
.rnw-org-stack .rnw-org-box.dept { font-size: 1.36rem; min-width: 120px; padding: 0.72rem 1.28rem; }
/* 모바일: 부서가 줄바꿈되면 가로 연결선이 어긋나므로 세로 스택으로 전환한다. (QA R2-1 지적 2) */
@media (max-width: 767.98px) {
  .rnw-org-row { flex-direction: column; align-items: center; gap: 0.8rem; }
  .rnw-org-row::before { display: none; }
  .rnw-org-col .rnw-org-line { height: 10px; }
  .rnw-org-box, .rnw-org-box.sub, .rnw-org-box.dept { min-width: 200px; }
}

/* ---------- 절차 플로차트 ---------- */
.rnw-flow { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; padding: 1.6rem 0; }
.rnw-flow-step {
  flex: 1 1 160px; min-width: 150px; position: relative;
  background: #fff; border: 1px solid var(--debc-line); border-radius: var(--debc-radius);
  padding: 2.08rem 1.6rem; text-align: center; margin-right: 26px;
}
.rnw-flow-step:last-child { margin-right: 0; }
.rnw-flow-step::after {
  content: ""; position: absolute; right: -20px; top: 50%; width: 10px; height: 10px;
  border-top: 2px solid var(--debc-primary); border-right: 2px solid var(--debc-primary);
  transform: translateY(-50%) rotate(45deg);
}
.rnw-flow-step:last-child::after { display: none; }
.rnw-flow-no {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 50%; background: var(--debc-primary); color: #fff; font-weight: 700; font-size: 1.44rem;
  margin-bottom: 0.96rem;
}
.rnw-flow-tit { font-weight: 700; margin-bottom: 0.48rem; }
.rnw-flow-desc { font-size: 1.376rem; color: var(--debc-text-sub); line-height: 1.55; }
@media (max-width: 767.98px) {
  .rnw-flow { flex-direction: column; }
  .rnw-flow-step { margin: 0 0 26px; }
  .rnw-flow-step::after { right: 50%; top: auto; bottom: -20px; transform: translateX(50%) rotate(135deg); }
}

/* ---------- 신고창구 카드 ---------- */
.rnw-report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.76rem; padding: 1.6rem 0; }
.rnw-report-card {
  display: block; border: 1px solid var(--debc-line); border-radius: var(--debc-radius);
  padding: 2.24rem 2.4rem; background: #fff; text-decoration: none; color: inherit;
}
.rnw-report-card:hover { border-color: var(--debc-primary); box-shadow: 0 4px 14px rgba(22,51,126,.08); }
.rnw-report-card .tit { display: block; font-size: 1.68rem; font-weight: 700; margin-bottom: 0.8rem; color: var(--debc-navy); }
.rnw-report-card .desc { display: block; font-size: 1.408rem; color: var(--debc-text-sub); line-height: 1.65; }
.rnw-report-card .go { display: inline-block; margin-top: 1.44rem; font-size: 1.36rem; font-weight: 600; color: var(--debc-primary); }
.rnw-report-card .go::after { content: " ›"; }
.rnw-report-card .how {
  display: block; margin-top: 1.12rem; padding-top: 1.12rem; border-top: 1px dashed var(--debc-line);
  font-size: 1.312rem; color: var(--debc-text-sub); line-height: 1.6;
}
.rnw-report-card .how b { color: var(--debc-navy); }

/* ---------- 오시는 길 ----------
   .rnw-map-wrap/.rnw-map-info/.rnw-map-box 는 R2-1 의 정적 약도용(콘텐츠 670 초기본). 670 은 이후
   S4 박스탭 + 정의목록으로 다시 적재됐고(migration 39), 지도는 2026-08-19 부터 **브이월드**로 그린다
   (js/vworld-map.js — 센터정보 표 앞에 `.rnw-map` 을 끼운다). 아래 정적 약도 클래스는 다른 콘텐츠가
   쓸 수 있어 남긴다. */
.rnw-map-wrap { border: 1px solid var(--debc-line); border-radius: var(--debc-radius); overflow: hidden; background: var(--debc-bg); }
.rnw-map-wrap img { display: block; width: 100%; height: auto; }
.rnw-map-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.6rem; margin-top: 1.92rem; }
.rnw-map-box { border: 1px solid var(--debc-line); border-radius: var(--debc-radius); padding: 1.76rem 2.08rem; background: #fff; }
.rnw-map-box h3 { font-size: 1.6rem; font-weight: 700; margin: 0 0 0.8rem; color: var(--debc-primary); }
.rnw-map-box p, .rnw-map-box li { font-size: 1.44rem; color: var(--debc-text-sub); line-height: 1.7; margin: 0; }
.rnw-map-box ul { margin: 0; padding-left: 1.76rem; }

/* 브이월드 지도(Leaflet) — js/vworld-map.js 가 만든다. 높이는 여기서 정한다(Leaflet 은 높이 0 이면 안 그린다).
   레거시 카카오 지도가 410px 였다. 지도 자리는 정의목록(.rnw-dl) 바로 위라 아래 여백을 준다. */
.rnw-map {
  position: relative; height: 400px; margin: 0 0 2.4rem;
  border: 1px solid var(--debc-line); border-radius: var(--debc-radius); overflow: hidden;
  background: var(--debc-bg); z-index: 0;   /* Leaflet 내부 z-index(400~1000)가 헤더·드롭다운 위로 새지 않게 스택 문맥을 만든다 */
}
.rnw-map .rnw-map-status { margin: 0; padding: 4.8rem 1.6rem; text-align: center; color: var(--debc-text-sub); font-size: 1.44rem; }
.rnw-map-end { display: block; height: 0; overflow: hidden; }
.rnw-map-skip:focus {
  position: static !important; display: inline-block; margin: 0 0 0.8rem; padding: 0.48rem 1.28rem;
  border: 2px solid var(--debc-primary); border-radius: 6px; background: #fff; color: var(--debc-primary); font-weight: 700;
}
/* 마커 위 센터명 라벨 — 레거시 커스텀 오버레이(남색 제목띠)를 잇는다. */
.rnw-map .leaflet-tooltip.rnw-map-label {
  padding: 0.48rem 1.12rem; border: 0; border-radius: 6px; background: var(--debc-navy, #16337E); color: #fff;
  font-size: 1.36rem; font-weight: 700; line-height: 1.4; box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.rnw-map .leaflet-tooltip.rnw-map-label::before { border-top-color: var(--debc-navy, #16337E); }
.rnw-map .rnw-map-popup { font-size: 1.36rem; line-height: 1.6; }
.rnw-map .rnw-map-popup strong { color: var(--debc-navy, #16337E); }
/* 사이트 전역 링크 규칙(밑줄·색)이 Leaflet 확대/축소 버튼·저작권 링크를 흔들지 않게 */
.rnw-map .leaflet-bar a { text-decoration: none; }
.rnw-map .leaflet-control-attribution { font-size: 1.12rem; }
.rnw-map .leaflet-control-attribution a { color: var(--debc-primary); }

/* ---- 카카오맵 (2026-08-22 발주처 지시로 전환) ----
   ★ 지도 안의 img 는 본문 이미지가 아니라 **지도 타일**이다. 위쪽 `.rnw-sub-body img { max-width:100%;
   height:auto }` 가 타일에 걸리면 지도가 어긋나 깨진다. Leaflet 은 자기 CSS 로 이 규칙을 막아 두어
   지금까지 드러나지 않았을 뿐이다 — 카카오는 막아 주지 않으므로 여기서 막는다. */
.rnw-map img { max-width: none !important; max-height: none !important; height: auto; }
/* 지도가 자기 크기를 스스로 정하게 둔다(레이아웃 규칙이 새어 들어가면 회색 화면이 된다). */
.rnw-map > div { box-sizing: content-box; }
/* 마커 위 센터명 라벨 — 브이월드판(leaflet-tooltip)과 같은 모양. 카카오는 그냥 div 로 얹는다. */
.rnw-map .rnw-map-label {
  padding: 0.48rem 1.12rem; border-radius: 6px; background: var(--debc-navy, #16337E); color: #fff;
  font-size: 1.36rem; font-weight: 700; line-height: 1.4; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
/* 카카오 말풍선은 흰 상자를 스스로 그린다 — 안쪽 여백만 준다(브이월드 팝업과 글자 크기를 맞춘다). */
.rnw-map .rnw-map-popup-kakao { padding: 1.04rem 1.28rem; }

/* ---------- 게시물 본문 안의 영상 (2026-08-23) ----------
   ※ [정정 2026-08-25] 한때 「375px 에서 재생기가 잘린다」고 적어 두었으나 **잘못된 진단이었다.**
     원인은 화면이 아니라 캡처 도구였다 — `--window-size` 는 창 크기일 뿐 화면 폭이 아니라
     브라우저가 다른 폭으로 그렸다(100vw 가 391 로 잡혔다). 뷰포트를 제대로 지정해 재니
     문서폭 375 = 화면폭 375, 넘침 0 이다. 넘침은 ops/tools/overflow-scan.py 로 잰다. */
   js/bbs-video.js 가 본문의 «영상 링크» 를 이 모양으로 바꾼다. 본문에 <video> 를 직접 넣을 수
   없기 때문이다(정화기가 저장할 때 지운다 — SanitizeVideoTagTest).
   가로폭을 꽉 채우되 세로는 16:9 로 둔다 — 표지가 오기 전에는 높이가 0 으로 눌린다. */
.rnw-post-video { margin: 1.6rem 0 2.4rem; }
.rnw-post-video video {
  display: block; width: 100%; max-width: 96rem; margin: 0 auto;
  aspect-ratio: 16 / 9; background: #000;
  border-radius: var(--debc-radius); outline: 1px solid var(--debc-line);
}
.rnw-post-video figcaption {
  margin-top: 0.96rem; text-align: center;
  font-size: 1.44rem; color: var(--debc-text-sub);
}

/* 「불러오는 중」 — 재생기 위에 겹쳐 띄운다(js/bbs-video.js 가 필요할 때만 보인다).
   ★ 재생기 «위» 라 클릭을 가로채면 안 된다 — pointer-events:none 이 없으면
     표시가 떠 있는 동안 재생·정지 단추가 먹지 않는다. */
.rnw-post-video { position: relative; }
.rnw-video-loading {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.8rem 1.6rem; border-radius: 999px;
  /* 표지 위에 겹치므로 밝은 장면에서도 읽히게 충분히 어둡게 둔다(.62 는 흰 장면에서 흐렸다). */
  background: rgba(0, 0, 0, .78); color: #fff; font-size: 1.36rem; font-weight: 600;
  white-space: nowrap; pointer-events: none; z-index: 1;
}
.rnw-video-loading[hidden] { display: none; }
.rnw-video-loading-dot {
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  animation: rnw-video-spin 0.8s linear infinite;
}
@keyframes rnw-video-spin { to { transform: rotate(360deg); } }
/* 움직임을 줄여 달라고 한 이용자에게는 돌리지 않는다 — 어지럼증을 유발할 수 있다. */
@media (prefers-reduced-motion: reduce) {
  .rnw-video-loading-dot { animation: none; border-top-color: rgba(255, 255, 255, .35); }
}
/* 본문 이미지 규칙(max-width:100%)이 재생기에 걸리지 않게 — 지도와 같은 이유. */
.rnw-post-video video { max-height: none; }

/* 관리자 대시보드 스타일은 static/css/admin.css 로 분리했다 (R5-2, 2026-08-08). */

/* ---------- 안내 박스 (2026-08-08 QA R22-2) ----------
   제한 게시판 목록 상단의 "온라인 접수 준비 중" 안내. 신고창구 카드(menuNo 420)의 인라인 박스와
   같은 모양이되, 여기서는 클래스로 둔다(콘텐츠가 아니라 템플릿이 그리는 요소이므로). */
.rnw-notice-box {
  border: 1px solid var(--debc-line); border-left: 4px solid var(--debc-primary);
  border-radius: 10px; padding: 1.6rem 1.92rem; margin: 0 0 2.24rem; background: #F7F9FD;
}
.rnw-notice-box strong { display: block; margin-bottom: 0.64rem; color: var(--debc-text); }
.rnw-notice-box p { margin: 0; font-size: 1.44rem; color: var(--debc-text-sub); line-height: 1.7; }
.rnw-notice-box p + p { margin-top: 0.8rem; }
.rnw-notice-box a { color: var(--debc-primary); font-weight: 600; }

/* ---------- 메인 팝업 (REQ-055, 2026-08-09) ----------
   AS-IS 의 window.open 대신 화면 안 레이어로 띄운다(팝업 차단에 막히지 않게).
   관리자가 정한 좌표·크기는 인라인 style 로 들어오고, 여기서는 겉모습과 반응형만 정한다.
   공지성 알림이라 **모달이 아니다** — 배경 오버레이를 두지 않아 본문을 계속 쓸 수 있다. */
.rnw-popup-area { position: absolute; top: 0; left: 0; width: 100%; z-index: 1030; pointer-events: none; }
.rnw-popup {
  position: absolute; display: none; pointer-events: auto;
  background: #fff; border: 1px solid var(--debc-line, #DDE3EC); border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .16); overflow: hidden; max-width: calc(100vw - 24px);
}
.rnw-popup-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  padding: 0.96rem 0.8rem 0.96rem 1.44rem; background: var(--debc-navy, #16337E); color: #fff;
}
.rnw-popup-head h2 { margin: 0; font-size: 1.568rem; font-weight: 700; line-height: 1.4; }
.rnw-popup-x {
  flex: 0 0 auto; width: 30px; height: 30px; border: 0; border-radius: 6px;
  background: transparent; color: #fff; font-size: 1.92rem; line-height: 1; cursor: pointer;
}
.rnw-popup-x:hover { background: rgba(255, 255, 255, .18); }
.rnw-popup-x:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.rnw-popup-body { padding: 1.44rem; overflow: auto; }
/* 이관 팝업은 대부분 이미지 한 장이다 — 창 폭을 넘어가지 않게 강제한다. */
.rnw-popup-body img { max-width: 100%; height: auto; }
.rnw-popup-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  padding: 0.8rem 1.44rem; border-top: 1px solid var(--debc-line, #DDE3EC);
  background: var(--debc-bg, #F1F4F9); font-size: 1.36rem;
}
.rnw-popup-foot label { display: inline-flex; align-items: center; gap: 0.56rem; margin: 0; cursor: pointer; }
.rnw-popup-foot input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--debc-primary, #4A75E5); }
.rnw-popup-close {
  border: 1px solid var(--debc-line, #DDE3EC); border-radius: 6px; background: #fff;
  padding: 0.448rem 1.28rem; font-size: 1.36rem; cursor: pointer;
}
.rnw-popup-close:hover { border-color: var(--debc-primary, #4A75E5); color: var(--debc-primary, #4A75E5); }
.rnw-popup-close:focus-visible { outline: 2px solid var(--debc-primary, #4A75E5); outline-offset: 2px; }

/* 좁은 화면에서는 관리자가 지정한 좌표·폭을 무시한다 —
   PC 기준 left:600px 같은 값이 그대로 먹으면 팝업이 화면 밖으로 나가 닫을 수도 없다. */
@media (max-width: 767.98px) {
  .rnw-popup {
    left: 12px !important; right: 12px; width: auto !important; max-width: none;
    /* ★ 관리자 좌표와 함께 오는 이동값도 반드시 무효화한다(2026-08-19 결함 조치).
       등록 화면이 「가운데」를 고르면 인라인으로 `transform: translate(-50%,-50%)` 가 붙는다.
       종전에는 left·width 만 덮어써서 **그 이동이 그대로 남아** 폭의 절반만큼 왼쪽으로,
       높이의 절반만큼 위로 밀렸다 — 화면 밖으로 나가 닫기 버튼조차 누를 수 없었다.
       좁은 화면에서는 좌우 12px 로 꽉 채우는 것이 정답이므로 이동은 필요 없다. */
    transform: none !important;
    /* 세로 위치는 스크립트(main-popup.js reflow)가 위에서부터 쌓아 준다 —
       여기서 top 을 !important 로 고정하면 여러 개가 정확히 겹쳐 뒤엣것을 못 닫는다. */
    max-height: 86vh;
  }
  .rnw-popup-body { max-height: 60vh !important; }
}

/* =====================================================================
   S1 본문 블록 (2026-08-09) — T1 "사업·제도 안내형" 34화면의 뼈대
   근거: Docs/분석/시안분석_서브페이지_전수.md §3-1 · §6-3(1~4,9)
        + 시안 원본 실측(PC 1920 캔버스 / MO 375 캔버스)
          · Docs/260806_.../PC/sub/2.사업안내/창업지원/..._창업교육컨설팅.jpg
          · Docs/260806_.../PC/sub/1.제도안내/..._공공구매제도.jpg (좌측형 인트로)
          · Docs/260806_.../MO/sub/2.사업안내/창업지원/mobile_..._창업교육컨설팅.jpg

   -- 왜 화면별 템플릿이 아니라 CSS 인가 -------------------------------
   T1 34화면은 전부 MENU_TY_CODE=CONTENT 라 cms/cnt/EgovContentsView.html
   단 하나를 탄다. 본문은 TB_CONTENTS.CNTNTS_CN 을 th:utext 로 그대로 뿌린다.
   즉 화면을 늘리는 방법은 템플릿이 아니라 콘텐츠에 쓸 클래스를 정의하는 것이다.

   -- 마크업 계약(관리자가 콘텐츠 본문에 직접 쓴다) --------------------
     <div class="rnw-intro rnw-intro--center">        가운데형
       <h2 class="rnw-h2c">두 줄 요약</h2>            (또는 p.rnw-intro-lead)
       <p>설명 문장</p>
     </div>
     <div class="rnw-intro rnw-intro--left">          좌측형(제목 + 파란 바)
       <h2 class="rnw-h2l">공공구매제도 소개</h2>
       <p>설명 문장</p>
     </div>

     <dl class="rnw-dl">
       <dt class="rnw-dl-label">지원 대상</dt>
       <dd class="rnw-dl-body">
         <p>...</p>
         <h3>중소기업자간 경쟁</h3>                    콘텐츠 내 파란 소제목
         <ul><li>- 로 시작하는 줄</li></ul>
         <table class="rnw-tbl rnw-tbl--data"> ... </table>
         <div class="rnw-note"><ul><li>주석</li></ul></div>
       </dd>
     </dl>
   그리드는 dl 이 만든다 — dt/dd 를 그냥 나열하면 된다(2026-08-09 시딩본 형태).
   문서 6-3 의 `.rnw-dl-item` 래퍼를 쓴 콘텐츠도 `display:contents` 로 같은
   그리드에 얹혀 **두 마크업이 같은 화면을 낸다**(둘 다 유효, 골라 쓰면 된다).

   -- 래퍼형을 쓸 때 CSS 쪽에서 반드시 지킬 것 (2026-08-10 정정) -------
   위 "같은 화면을 낸다"는 **공짜가 아니다.** `display:contents` 래퍼가 끼면
   **자식 계열 의사클래스의 기준이 dl 이 아니라 래퍼로 바뀐다.**
     · `dd:last-child`        -> 래퍼마다 참 -> **전 항목이 마지막**이 된다
     · `dt:nth-of-type(n)`    -> 래퍼 안 유일한 dt -> **전부 1번**이 된다
   실제로 MO 항목 간격이 이 이유로 20여 화면에서 0px 이었다(375 실측: 251 `0,0,0,0,0,0`
   ↔ 평면형 655 `38,38`). 그래서 **`.rnw-dl` 을 기준으로 잡고 래퍼 경유 경로를 함께 쓴다**:
       .rnw-dl > .rnw-dl-body:last-child,
       .rnw-dl > .rnw-dl-item:last-child > .rnw-dl-body { … }
   새 규칙에 `:first-child`·`:last-child`·`:nth-*` 를 쓸 때마다 이 두 줄 형태로 쓸 것.
   (dd **안쪽**에만 걸리는 규칙은 래퍼와 무관하므로 그냥 써도 된다.)

   -- 계약을 확인하는 법(추론하지 말고 잰다) ---------------------------
   같은 페이지에서 DOM 을 평면형 -> 래퍼형으로 바꿔 두 상태를 재면 된다.
     dl.children 를 dt/dd 짝으로 묶어 `<div class="rnw-dl-item">` 로 감싼 뒤
     항목 간격 · dd margin-bottom · 배지 배경색을 비교한다.
   2026-08-10 실측: 655·630 을 375/1400 에서 각각 비교해 **네 경우 모두 동일**이었다.

   -- 실측 수치(PC 1920 캔버스, 컨테이너 1600 = x160~1760) -------------
     인트로 배경 #F3F6FD · 컨테이너 폭(풀블리드 아님) · 패딩 상하 48
     인트로 lead 26px Bold / 본문 20px · 사이 세로 구분선 1x22
     정의목록 좌단 x239(컨테이너 +79) · 라벨열 336 · 본문 x575~1690(폭 1115)
     사각 불릿 16x16 #16337E · 라벨 20px Bold · 본문 16px · 항목 간격 56
     데이터표 상단 2px 남색 · 헤더 배경 #ECF0F8 · 셀선 1px #DBDBDD · 15px 가운데
     주석박스 흰 배경 + 1px #DBDBDD · 13px 회색 · 행간 2.1
   색은 토큰으로 환산해 쓴다(#ECF0F8 = --debc-bg, #DBDBDD = --debc-line).
   ===================================================================== */

/* ---------- 인트로 박스 (.rnw-intro) ----------
   시안 34화면이 예외 없이 이 박스로 시작한다. 카드가 아니라 면이라 라운드가 없다. */
.rnw-intro {
  background: #F3F6FD; padding: 4.8rem 6.4rem; margin: 0 0 7.2rem;
  text-align: center; line-height: 1.8; color: var(--debc-text);
}
.rnw-intro--center { text-align: center; }
.rnw-intro > :first-child { margin-top: 0; }
.rnw-intro > :last-child { margin-bottom: 0; }
.rnw-intro p { font-size: 2rem; margin: 0 auto 0.64rem; max-width: 60em; }

/* 인트로 안의 제목 — 콘텐츠는 .rnw-h2c/.rnw-h2l(가운데/좌측) 또는 .rnw-intro-lead 를 쓴다.
   셋 다 같은 자리이므로 한 규칙으로 받는다. */
.rnw-intro-lead,
.rnw-intro .rnw-h2c,
.rnw-intro .rnw-h2l {
  display: block; font-size: 2.56rem; font-weight: 800; line-height: 1.5;
  color: var(--debc-text); margin: 0; max-width: none;
}
/* 가운데형: 제목 아래 얇은 세로 구분선(시안 1x22 회색). 요소를 더 두지 않으려고 ::after 로 그린다. */
.rnw-intro-lead::after,
.rnw-intro .rnw-h2c::after {
  content: ""; display: block; width: 1px; height: 22px;
  background: var(--debc-muted); margin: 1.76rem auto 2.08rem;
}
/* 좌측형: 구분선 대신 짧은 파란 바(시안 실측 39x7 -> 36x6). 공공구매 제도·인권경영 */
.rnw-intro--left { text-align: left; }
.rnw-intro--left p { margin-left: 0; margin-right: 0; }
.rnw-intro--left .rnw-intro-lead::after,
.rnw-intro--left .rnw-h2c::after,
.rnw-intro .rnw-h2l::after {
  width: 36px; height: 6px; background: var(--debc-primary); margin: 1.6rem 0 2.24rem;
}

/* ---------- 정의목록 (.rnw-dl) — T1 뼈대 ----------
   그리드는 dl 자체가 만든다. 콘텐츠는 dt/dd 를 그냥 나열하면 되고(2026-08-09 시딩본이
   쓰는 형태), 문서 6-3 의 `.rnw-dl-item` 래퍼를 쓴 콘텐츠도 `display:contents` 로
   같은 그리드에 얹혀 **두 마크업이 같은 화면을 낸다.** */
.rnw-dl {
  display: grid; grid-template-columns: 33.6rem minmax(0, 1fr);
  align-items: start; row-gap: 5.6rem;
  margin: 0 0 1.6rem; padding: 0 7.2rem;
}
.rnw-dl-item { display: contents; }
.rnw-dl-label {
  position: relative; padding-left: 4.16rem; font-size: 1.92rem; font-weight: 700;
  line-height: 1.6; color: var(--debc-text); word-break: keep-all;
}
.rnw-dl-label::before {                       /* 남색 사각 불릿 */
  content: ""; position: absolute; left: 0; top: .5em;
  width: 16px; height: 16px; background: var(--debc-navy);
}
/* dd 의 UA 기본 margin-inline-start:40px 를 지운다 — 안 지우면 본문이 통째로
   40px 밀려 시안(모바일은 컨테이너 좌단 정렬)과 어긋난다. 375px 렌더에서 실제로 났다. */
.rnw-dl-body { margin: 0; font-size: 1.6rem; line-height: 1.8; color: var(--debc-text); min-width: 0; }
.rnw-dl-body > :first-child { margin-top: 0; }
.rnw-dl-body > :last-child { margin-bottom: 0; }
.rnw-dl-body p { margin: 0 0 1.44rem; }
/* 시안의 본문 목록은 원형 불릿이 아니라 "- " 로 시작하는 줄이다(공공구매 제도 등). */
.rnw-dl-body ul { margin: 0 0 1.44rem; padding-left: 0; list-style: none; }
.rnw-dl-body ol { margin: 0 0 1.44rem; padding-left: 1.92rem; }
.rnw-dl-body li { margin-bottom: 0.56rem; }
.rnw-dl-body > ul > li { padding-left: 1.44rem; text-indent: -1.44rem; }
.rnw-dl-body > ul > li::before { content: "- "; }
/* 콘텐츠 안의 파란 소제목(단독 행). 시안 "중소기업자간 경쟁".
   콘텐츠가 h3 로 쓰든 .rnw-dl-tit 로 쓰든 같은 모양이 나오게 둘 다 받는다. */
.rnw-dl-tit,
.rnw-dl-body h3 {
  font-size: 1.6rem; font-weight: 700; color: var(--debc-primary);
  margin: 2.56rem 0 0.8rem; padding-left: 0; border-left: 0;
}
.rnw-dl-body > :first-child.rnw-dl-tit,
.rnw-dl-body > h3:first-child { margin-top: 0; }

/* ---------- 데이터 표 (.rnw-tbl / --data) ----------
   table-responsive 는 호환 레이어에 정의가 없다(문서 6-1) — .rnw-tbl-scroll 로 대체한다.
   word-break: keep-all 이 핵심이다. 이게 없으면 좁은 폭에서 "창/업/단/계" 처럼
   글자가 세로로 쪼개진다(R5 담당자 목록에서 실제로 났던 결함과 같은 유형). */
.rnw-tbl {
  width: 100%; border-collapse: collapse; margin: 0 0 1.92rem;
  font-size: 1.52rem; line-height: 1.6; word-break: keep-all;
}
.rnw-tbl caption {                             /* 표 제목은 화면에서 감추되 스크린리더에 남긴다 */
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.rnw-tbl th, .rnw-tbl td {
  padding: 1.36rem 1.6rem; text-align: center; vertical-align: middle;
  border-bottom: 1px solid var(--debc-line);
}
.rnw-tbl th + th, .rnw-tbl th + td, .rnw-tbl td + td, .rnw-tbl td + th {
  border-left: 1px solid var(--debc-line);     /* 열 사이만 — 표 좌우 바깥선은 없다(시안) */
}
.rnw-tbl--data { border-top: 2px solid var(--debc-navy); }
.rnw-tbl--data thead th { background: var(--debc-bg); font-weight: 700; }
/* 항목명(행 머리) 칸은 «색이 있어야» 값과 구분된다 — 정본 값 #f7f8fd (2026-09-20).
   HDINC 1차 검수(오시는 길 670): 「표의 항목명 셀의 컬러 미반영」.
   정본은 이 색을 화면마다 같은 값으로 못박아 둔다 —
     page.min.css  `.sub6_8_1|6_8_2|6_8_2_1|6_8_3 .info-section .krds-table-wrap .tbl.data tbody th{background-color:#f7f8fd}`
     (1_2·2_4_1~3·2_5_3·4_1_2_2·5_1_4·5_3_1 … 전 화면 동일 값).
   우리 본문은 `rnw-tbl` 로 적재돼 있어 그 규칙이 걸리지 않는다 — 같은 값을 여기에 둔다.
   ※ 흰색이던 것은 S1(2026-08-09) 최초 정의의 기본값일 뿐 근거가 있던 값이 아니다. */
.rnw-tbl--data tbody th { background: #f7f8fd; font-weight: 700; }
.rnw-tbl-scroll { overflow-x: auto; margin: 0 0 1.92rem; }
.rnw-tbl-scroll > .rnw-tbl { margin-bottom: 0; }

/* ---------- 주석 박스 (.rnw-note) ----------
   흰 배경 + 1px 보더. 시안은 라운드가 없다(카드가 아니라 각주 영역이라서). */
.rnw-note {
  border: 1px solid var(--debc-line); background: #fff;
  padding: 2.4rem 2.56rem; margin: 2.56rem 0;
  font-size: 1.312rem; line-height: 2.1; color: var(--debc-text-sub);
}
.rnw-note > :first-child { margin-top: 0; }
.rnw-note > :last-child { margin-bottom: 0; }
.rnw-note p { margin: 0; }
.rnw-note ul { margin: 0; padding-left: 0; list-style: none; }
.rnw-note li { margin-bottom: 0; padding-left: 1.44rem; text-indent: -1.44rem; }
.rnw-note li::before { content: "- "; }
.rnw-note strong { color: var(--debc-text); font-weight: 700; }

/* ---------- 본문 제목 (.rnw-h2c 가운데 / .rnw-h2l 좌측) ----------
   둘 다 "제목 + 짧은 파란 바". 기존 .rnw-sec-title(가운데)과 같은 계열이지만
   본문 블록 이름 규칙(문서 6-3 #9)에 맞춰 별도로 둔다.
   인트로 박스 안에서는 위 .rnw-intro 규칙이 덮어 "인트로 제목"이 된다. */
.rnw-h2c, .rnw-h2l {
  font-size: 2.56rem; font-weight: 800; line-height: 1.4;
  color: var(--debc-text); margin: 4.8rem 0 2.56rem;
}
.rnw-h2c { text-align: center; }
.rnw-h2l { text-align: left; }
.rnw-h2c::after, .rnw-h2l::after {
  content: ""; display: block; width: 36px; height: 6px;
  background: var(--debc-primary); margin-top: 1.6rem;
}
.rnw-h2c::after { margin-left: auto; margin-right: auto; }

/* ---------- 태블릿(<=1199px) ----------
   라벨열 336px 은 컨테이너 1600 기준이다. 폭이 줄면 본문이 먼저 눌리므로 라벨열부터 줄인다. */
@media (max-width: 1199.98px) {
  .rnw-dl { padding: 0; grid-template-columns: 24rem minmax(0, 1fr); }
  .rnw-intro { padding: 3.84rem; }
  /* 넘치는 표를 받아 주는 안전망 — **1199 이하 전 구간**. (2026-08-10 QA 실측 조치)
     S1 은 이 규칙을 `max-width:767.98px` 안에만 뒀는데, 정의목록이 2열로 남는
     768~1199 구간에서 dd 폭이 가장 좁아져 **거기서 넘쳤다**
     (menuNo=110 @768px: scrollWidth 780 vs clientWidth 768 — 90측정 중 유일한 넘침.
      원인 요소 `.rnw-tbl--data.rnw-tbl--left` 3열 지원제도 표).
     `word-break:keep-all` 때문에 한글 어절이 쪼개지지 않아 표의 min-content 폭이
     트랙(minmax(0,1fr))보다 커지면 표가 트랙 밖으로 삐져나온다 — 문서 폭이 함께 늘어난다.
     넘치지 않으면 스크롤바는 생기지 않는다. */
  .rnw-dl-body { overflow-x: auto; }
}

/* ---------- 모바일(<=767px) — 시안 MO 캔버스 375px 기준 ----------
   MO 시안 실측: 정의목록은 라벨이 본문 위로 올라간 세로 스택이고,
   표는 가로 스크롤이 아니라 폭에 맞춰 줄바꿈된다(2열 표가 343px 안에 들어간다).
   그래서 표에 min-width 를 강제하지 않는다. 열이 많아 넘칠 때만
   .rnw-dl-body(또는 .rnw-tbl-scroll)가 가로 스크롤을 받아 준다. */
@media (max-width: 767.98px) {
  .rnw-intro { padding: 2.56rem 2rem; margin-bottom: 3.84rem; }
  .rnw-intro p { font-size: 1.52rem; }
  .rnw-intro-lead, .rnw-intro .rnw-h2c, .rnw-intro .rnw-h2l { font-size: 2rem; }
  .rnw-intro-lead::after, .rnw-intro .rnw-h2c::after { margin: 1.44rem auto 1.6rem; }
  .rnw-intro--left .rnw-intro-lead::after,
  .rnw-intro--left .rnw-h2c::after,
  .rnw-intro .rnw-h2l::after { margin: 1.28rem 0 1.6rem; }

  /* 1열 스택 — row-gap 을 0 으로 되돌리고 라벨/본문 간격을 따로 준다.
     (2열에서는 row-gap 이 항목 간격이지만, 1열에서는 라벨과 본문 사이에도 끼어든다) */
  .rnw-dl { grid-template-columns: 1fr; row-gap: 0; }
  .rnw-dl-label { font-size: 1.76rem; padding-left: 2.56rem; margin: 0 0 1.44rem; }
  .rnw-dl-label::before { width: 11px; height: 11px; top: .45em; }
  .rnw-dl-body { overflow-x: auto; margin-bottom: 3.84rem; }  /* 넘치는 표만 스크롤 */
  /* **`.rnw-dl-body:last-child` 로 쓰면 안 된다** (2026-08-10, design-analyst 375 실측 제보).
     ------------------------------------------------------------------
     `.rnw-dl-item` 래퍼형 마크업에서는 dd 가 **래퍼 안의 마지막 자식**이라
     `:last-child` 가 **모든 항목에서 참**이 된다. MO 는 row-gap 이 0 이고 이 margin 만이
     항목 간격이므로, 래퍼를 쓴 화면은 **전 항목 간격이 0px 로 붙어 버린다.**
     실측(수정 전, 375px): 251 gaps `0,0,0,0,0,0` · 110 gap `0` (래퍼형)
                           ↔ 655 gaps `38,38` (평면형) — 두 마크업이 다른 화면을 냈다.
     래퍼를 쓴 콘텐츠가 20여 화면이라 영향이 크다(233 은 래퍼 24개).
     그래서 **dl 기준의 마지막 항목**만 지운다 — 래퍼형·평면형 둘 다 받는다. */
  .rnw-dl > .rnw-dl-body:last-child,
  .rnw-dl > .rnw-dl-item:last-child > .rnw-dl-body { margin-bottom: 0; }

  .rnw-tbl { font-size: 1.408rem; }
  .rnw-tbl th, .rnw-tbl td { padding: 1.12rem 0.8rem; }
  .rnw-note { padding: 1.76rem 1.6rem; line-height: 1.9; }
  .rnw-h2c, .rnw-h2l { font-size: 2rem; margin: 3.52rem 0 1.92rem; }
}

/* =====================================================================
   S3 시각 컴포넌트 (2026-08-09) — "텍스트는 들어갔는데 시안과 다른" 6종
   근거: 발주처 지적(제도안내_장애인기업이란 시안 대조) · DESIGN.md v2.1 §4-1
        + 시안 원본 픽셀 실측(PC 1920 캔버스 / 컨테이너 1600 / MO 375)
          · PC/sub/1.제도안내/장기종_서브페이지_제도안내_장애인기업이란.jpg
          · PC/sub/2.사업안내/시설공간/장기종_서브페이지_사업안내_시설공간_창업보육실.jpg
          · MO/sub/... 같은 2화면

   -- 왜 이 절이 필요했나 -----------------------------------------------
   S1 에서 인트로·정의목록·표·주석까지 세웠지만, 시안의 **시각 요소**는 전부
   표(<table>)나 밑줄 링크로 대체돼 있었다. HTTP 200 이고 글자도 다 들어가 있어
   지표로는 정상인데 화면이 시안과 딴판이었다(발주처가 직접 지적).
   여기서 정의하는 6종이 그 자리를 채운다.

   -- 실측 수치(PC 1920 캔버스, 본문 폭 x237~1686 = 1449) -----------------
     STEP 절차   좌 파란 셀 166 · 행 높이 131 · 원형 ▼ d36 · 우 텍스트 파랑 16 Bold
     원형 통계   pill 482x216 · 보더 2px #4A75E5 · 이음점 파란 원 d20 · 값 40 Bold
     CTA         pill h55(기본)/h90(대형) · 남색형 353x80 라운드 6
     남색 카드   467x411 · 헤드 152 남색 #01358B · 본문 흰 배경 · 3열 gap 22
     CI 카드     350x283 · 1px 컬러 보더 · 하단 컬러 띠 99 · 3열 gap 30
     강조 헤더   다크 바 #434343 h67 · 본문 흰 배경 · 박스 1px #DBDBDD
   색은 전부 토큰으로 환산해 쓴다(하드코딩 0 — #434343·CI 3색은 base.css 에 토큰 신설).

   -- 마크업 계약(관리자가 콘텐츠 본문에 직접 쓴다) ----------------------
   ※ 정화기(JennyHtmlSanitizer rich) 통과를 단위테스트로 못박아 두었다
     (HtmlSanitizeServiceTest#rich_S3_시각컴포넌트_마크업을_보존한다).
     계약을 바꾸면 그 테스트도 함께 고칠 것.
   ===================================================================== */

/* ---------- 0) 본문 최상위 블록의 좌우 여백 ----------
   시안에서 남색 카드·통계·CTA 는 정의목록(.rnw-dl)과 **같은 좌우 여백**을 쓴다
   (x237~1686). .rnw-dl 이 padding:0 4.5rem 로 만드는 그 자리다.
   dd 안에 넣은 경우에는 이 여백이 붙으면 안 되므로 `.rnw-sub-body >` 직계에만 건다. */
.rnw-sub-body > .rnw-navycard,
.rnw-sub-body > .rnw-stat,
.rnw-sub-body > .rnw-cta-row,
.cms-content > .rnw-navycard,
.cms-content > .rnw-stat,
.cms-content > .rnw-cta-row { padding-left: 7.2rem; padding-right: 7.2rem; }

/* ---------- 1) STEP 세로 절차 (.rnw-step) ----------
   **선택자가 이 컴포넌트의 핵심이다.**
   시안 11화면(120·212·213·214·221·222·231·232·241·242·251)의 "처리 절차"가
   이미 `<dd class="rnw-dl-body"><ol><li><strong>…` 로 들어와 있다. 클래스가 없으므로
   `.rnw-dl-body > ol` **자식 결합자**로 받는다.
   후손 선택자(`.rnw-dl-body ol`)로 걸면 안 된다 — 주석 박스(.rnw-note) 안 목록이나
   STEP 칸 안에 중첩된 목록까지 STEP 으로 그려진다(212 는 li 안에 ul 이 들어 있다).
   dl 밖에서 쓸 때를 위해 `ol.rnw-step` 도 같은 규칙을 받는다.

   ※ `<ol>` 은 STEP 전용이라는 계약(DESIGN §4-1-4)이 전제다. 그 밖의 목록은 `<ul>`.
   ※ 왜 pseudo 를 3개나 쓰나 — 시안 좌측 칸은 "STEP"(작은 글씨)과 "01"(큰 글씨)의
     2단 구성이다. 한 pseudo 의 content 로는 글자 크기를 나눌 수 없어
     번호=li::before · 원형▼=li::after · 단어 STEP=첫 자식의 ::before 로 나눴다.
     첫 자식이 없으면 "STEP" 단어만 사라지고 나머지는 그대로다(안전한 열화). */
.rnw-dl-body > ol,
ol.rnw-step {
  list-style: none; margin: 2.56rem 0; padding: 0;
  counter-reset: rnwstep;
}
.rnw-dl-body > ol > li,
ol.rnw-step > li {
  position: relative; counter-increment: rnwstep;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 13.1rem;                       /* 131px */
  margin: 0; padding: 2.24rem 2.56rem 2.24rem 20.8rem;   /* 좌 = 파란 칸 166 + 여백 42 */
  border: 1px solid var(--debc-line); background: #fff;
}
.rnw-dl-body > ol > li + li,
ol.rnw-step > li + li { margin-top: -1px; }    /* 보더 겹침 방지(2px 로 보이지 않게) */
.rnw-dl-body > ol > li:first-child,
ol.rnw-step > li:first-child { border-radius: 6px 6px 0 0; }
.rnw-dl-body > ol > li:last-child,
ol.rnw-step > li:last-child { border-radius: 0 0 6px 6px; }

/* 좌측 파란 칸 + 번호(01, 02 …) */
.rnw-dl-body > ol > li::before,
ol.rnw-step > li::before {
  content: counter(rnwstep, decimal-leading-zero);
  position: absolute; left: -1px; top: -1px; bottom: -1px; width: 16.6rem;  /* 166px */
  display: flex; align-items: center; justify-content: center; padding-top: 1.6rem;
  background: var(--debc-primary); color: #fff;
  font-size: 2.1rem; font-weight: 700; line-height: 1;
}
.rnw-dl-body > ol > li:first-child::before,
ol.rnw-step > li:first-child::before { border-radius: 6px 0 0 0; }
.rnw-dl-body > ol > li:last-child::before,
ol.rnw-step > li:last-child::before { border-radius: 0 0 0 6px; }

/* 번호 위 작은 "STEP" — 첫 자식(보통 <strong>)의 ::before 를 빌려 쓴다 */
.rnw-dl-body > ol > li > :first-child::before,
ol.rnw-step > li > :first-child::before {
  content: "STEP"; position: absolute; left: -1px; width: 16.6rem;
  top: 50%; margin-top: -2.56rem; text-align: center;
  font-size: 1.3rem; font-weight: 700; letter-spacing: .04em; line-height: 1; color: #fff;
}
/* 칸 사이 흰 원 + 파란 ▼ (마지막 칸 뒤에는 없다) */
.rnw-dl-body > ol > li:not(:last-child)::after,
ol.rnw-step > li:not(:last-child)::after {
  content: "\f282";                            /* bootstrap-icons: chevron-down */
  font-family: bootstrap-icons; font-size: 1.36rem;
  position: absolute; left: 8.3rem; bottom: -1.8rem; transform: translateX(-50%);
  width: 3.6rem; height: 3.6rem; border-radius: 50%; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--debc-primary);
}
/* 우측 칸 내용 */
.rnw-dl-body > ol > li > strong,
ol.rnw-step > li > strong {
  display: block; font-size: 1.6rem; font-weight: 700; color: var(--debc-primary);
  line-height: 1.6; word-break: keep-all;
}
.rnw-dl-body > ol > li > p,
ol.rnw-step > li > p { margin: 0.56rem 0 0; font-size: 1.504rem; color: var(--debc-text-sub); }
/* STEP 칸 안 중첩 목록(212 처럼 li 안에 ul 이 있는 경우) — 시안의 "- " 줄 */
.rnw-dl-body > ol > li ul,
ol.rnw-step > li ul { list-style: none; margin: 0.72rem 0 0; padding-left: 0; }
.rnw-dl-body > ol > li ul > li,
ol.rnw-step > li ul > li {
  margin: 0 0 0.24rem; padding-left: 1.44rem; text-indent: -1.44rem;
  font-size: 1.504rem; color: var(--debc-text-sub);
}
.rnw-dl-body > ol > li ul > li::before,
ol.rnw-step > li ul > li::before { content: "- "; }

/* ---------- 2) 원형(pill) 통계 (.rnw-stat) ----------
   마크업:
     <ul class="rnw-stat">
       <li><span class="rnw-stat-label">전체 장애인기업 수</span>
           <strong class="rnw-stat-value">174,344개사</strong></li>
       …
     </ul>
   pill 이 좌우로 맞붙고 이음점에 파란 원이 찍힌다(시안). 그래서 gap 이 아니라
   `margin-left:-2px`(보더 겹침) + `li + li::before`(원)로 만든다. */
.rnw-stat {
  display: flex; align-items: stretch; list-style: none;
  margin: 3.84rem 0 1.6rem; padding: 0;
}
.rnw-stat > li {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem;
  min-height: 21.6rem;                          /* 216px */
  padding: 1.92rem 2.56rem; text-align: center; word-break: keep-all;
  border: 2px solid var(--debc-primary); border-radius: 999px; background: #fff;
}
.rnw-stat > li + li { margin-left: -2px; }
.rnw-stat > li + li::before {                   /* 이음점 파란 원 (d20) */
  content: ""; position: absolute; left: -1rem; top: 50%; transform: translateY(-50%);
  width: 2rem; height: 2rem; border-radius: 50%; background: var(--debc-primary); z-index: 1;
}
.rnw-stat-label { display: block; font-size: 1.8rem; line-height: 1.5; color: var(--debc-text); }
.rnw-stat-value { display: block; font-size: 4rem; font-weight: 800; line-height: 1.2; color: var(--debc-primary); }

/* ---------- 3) CTA 버튼 (.rnw-cta) ----------
   시안의 파란 알약 버튼. 오른쪽 ▶ 는 CSS 가 붙이므로 본문에 쓰지 않는다.
     <p class="rnw-cta-row"><a class="rnw-cta" href="…">장애인기업 실태조사 바로가기</a></p>
   변형: --lg(대형) · --navy(남색 사각) · --soft(연블루 채움) · --line(흰 배경 선)
        --sm(표 안 소형) · --down(아이콘을 내려받기로) */
.rnw-cta-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 2.4rem; margin: 3.2rem 0;
}
.rnw-cta-row--right { justify-content: flex-end; }
.rnw-cta-row--left { justify-content: flex-start; }
/* <p class="rnw-cta-row"> 로 쓰는 경우 — `.rnw-intro p`·`.rnw-dl-body p`(둘 다 (0,1,1))가
   여백·글자크기를 먼저 잡아 버린다. 같은 자리에서 이기도록 부모를 붙여 특정도를 올린다. */
.rnw-intro p.rnw-cta-row { margin: 3.52rem auto 0; max-width: none; font-size: 1.6rem; }
.rnw-dl-body p.rnw-cta-row { margin: 1.92rem 0 1.44rem; font-size: 1.6rem; }
.rnw-cta {
  display: inline-flex; align-items: center; gap: 1.92rem;
  padding: 1.44rem 2.88rem; border: 1px solid var(--debc-primary); border-radius: 999px;
  background: var(--debc-primary); color: #fff; font-size: 1.6rem; font-weight: 700;
  line-height: 1.5; text-decoration: none; word-break: keep-all; cursor: pointer;
}
.rnw-cta::after {
  content: "\f231";                              /* bootstrap-icons: caret-right-fill */
  font-family: bootstrap-icons; font-size: 1.12rem; line-height: 1;
}
.rnw-cta:hover, .rnw-cta:focus { background: var(--debc-primary-deep); border-color: var(--debc-primary-deep); color: #fff; text-decoration: none; }
.rnw-cta--lg { padding: 2.88rem 4.16rem; font-size: 1.68rem; }
.rnw-cta--navy {
  border-radius: 6px; padding: 2.56rem 3.2rem;
  background: var(--debc-navy); border-color: var(--debc-navy);
}
.rnw-cta--navy:hover, .rnw-cta--navy:focus { background: var(--debc-primary-deep); border-color: var(--debc-primary-deep); }
.rnw-cta--soft { background: var(--debc-bg); color: var(--debc-primary); }
.rnw-cta--soft:hover, .rnw-cta--soft:focus { background: var(--debc-primary); color: #fff; }
.rnw-cta--line { background: #fff; color: var(--debc-primary); border-radius: 6px; }
.rnw-cta--line:hover, .rnw-cta--line:focus { background: var(--debc-primary); color: #fff; }
.rnw-cta--sm { padding: 0.72rem 1.76rem; gap: 1.28rem; font-size: 1.44rem; }
.rnw-cta--down::after { content: "\f30a"; font-size: 1.52rem; }   /* download */

/* ---------- 4) 강조 박스 다크 헤더 (.rnw-note--head) ----------
   251 처럼 **한 화면에 강조 박스가 둘 이상**이면 제목이 없는 흰 박스만으로는
   어디까지가 한 덩어리인지 읽히지 않는다. 시안은 박스마다 다크 바 제목을 얹는다.
     <div class="rnw-note rnw-note--head">
       <p><strong>[표준 산업분류] 따른 입주 제외 대상 업종</strong></p>   ← 첫 자식이 헤더가 된다
       <p>① …</p>
     </div>
   첫 자식을 박스 패딩만큼 음수 마진으로 빼내 폭을 가득 채운다(래퍼 요소를 늘리지 않으려고). */
.rnw-note--head { padding: 0; font-size: 1.52rem; line-height: 1.9; color: var(--debc-text); }
.rnw-note--head > :first-child {
  display: block; margin: 0 0 1.76rem; padding: 1.92rem 2.56rem;
  background: var(--debc-dark); color: #fff; font-size: 1.52rem; font-weight: 700; line-height: 1.5;
}
.rnw-note--head > :first-child::before {
  content: "\f567";                              /* bootstrap-icons: slash-circle */
  font-family: bootstrap-icons; font-weight: 400; margin-right: 0.88rem;
}
.rnw-note--head > :first-child strong { color: #fff; font-weight: 700; }
.rnw-note--head > :not(:first-child) { margin-left: 2.56rem; margin-right: 2.56rem; }
.rnw-note--head > :last-child { margin-bottom: 2.4rem; }

/* ---------- 5) 남색 카드 3열 (.rnw-navycard) ----------
     <ul class="rnw-navycard">
       <li>
         <p class="rnw-navycard-head"><i class="bi bi-building" aria-hidden="true"></i>법인기업</p>
         <p class="rnw-navycard-lead">상법에 의한 회사로서 …</p>
         <p>- 공동대표인 경우 …</p>
       </li>
     </ul>
   3열 그리드라 카드 높이가 자동으로 맞는다(가장 긴 카드 기준). */
.rnw-navycard {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.2rem;
  list-style: none; margin: 0 0 4.8rem; padding: 0;
}
.rnw-navycard > li {
  display: flex; flex-direction: column; margin: 0;
  border: 1px solid var(--debc-line); background: #fff; border-radius: 4px; overflow: hidden;
}
/* dd(.rnw-dl-body) 안에서 쓰면 `.rnw-dl-body > ul > li` 규칙이 "- " 글머리와 음수 들여쓰기를
   그대로 얹는다(실측: CI 카드 상단에 "-" 가 찍혔다). 카드형 목록에서는 되돌린다.
   ※ **특정도를 맞춰야 한다.** `.rnw-dl-body > ul > li::before` 는 (0,1,3)이라
     `.rnw-cicard > li::before`(0,1,2)로는 못 이긴다 — 1차 수정이 실제로 안 먹었다.
     그래서 `.rnw-dl-body > ul.<클래스>` 형태로 클래스를 하나 더 얹는다. */
.rnw-dl-body > ul.rnw-navycard > li::before,
.rnw-dl-body > ul.rnw-cicard > li::before,
.rnw-dl-body > ul.rnw-stat > li:first-child::before { content: none; }
.rnw-dl-body > ul.rnw-navycard > li,
.rnw-dl-body > ul.rnw-cicard > li,
.rnw-dl-body > ul.rnw-stat > li { padding-left: 0; text-indent: 0; }
.rnw-navycard > li::before { content: none; }
.rnw-navycard > li { padding-left: 0; text-indent: 0; }
.rnw-navycard-head {
  margin: 0; padding: 3.04rem 1.6rem 2.56rem; background: var(--debc-navy); color: #fff;
  display: flex; flex-direction: column; align-items: center; gap: 1.44rem;
  font-size: 2rem; font-weight: 700; line-height: 1.4; text-align: center; word-break: keep-all;
  border-left: 0;                              /* <h3> 로 쓰는 경우 본문 h3 의 파란 세로바를 지운다 */
}
.rnw-navycard-head .bi { font-size: 3.84rem; line-height: 1; }
.rnw-navycard > li > :not(.rnw-navycard-head) {
  margin: 0; padding: 0 2.56rem; text-align: center;
  font-size: 1.504rem; line-height: 1.9; color: var(--debc-text-sub); word-break: keep-all;
}
.rnw-navycard > li > .rnw-navycard-head + * { padding-top: 2.88rem; }
.rnw-navycard > li > :last-child { padding-bottom: 2.88rem; }
.rnw-navycard > li > .rnw-navycard-lead { font-size: 1.6rem; font-weight: 700; color: var(--debc-text); margin-bottom: 2.4rem; }
.rnw-navycard > li > .rnw-navycard-lead:last-child { margin-bottom: 0; }

/* ---------- 6) CI 3색 카드 (.rnw-cicard) ----------
     <ul class="rnw-cicard">
       <li class="ci-blue">
         <p class="rnw-cicard-label">사회적 측면</p>
         <p class="rnw-cicard-word">REFLECT</p>
         <p class="rnw-cicard-desc">장애인기업의 의미를 담아 가치를 반영</p>
       </li>
       … ci-green / ci-pink
     </ul>
   색은 항목마다 `--ci` 하나만 바꾼다 — 보더·큰 글씨·하단 띠가 모두 그 값을 참조한다.
   (색마다 규칙을 3벌씩 쓰면 나중에 한 곳만 고쳐 어긋난다.) */
.rnw-cicard {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem;
  list-style: none; margin: 3.2rem 0 1.6rem; padding: 0;
}
.rnw-cicard > li {
  --ci: var(--debc-ci-blue);
  display: flex; flex-direction: column; margin: 0; overflow: hidden;
  border: 1px solid var(--ci); border-radius: 4px; background: #fff; text-align: center;
}
.rnw-cicard > li.ci-green { --ci: var(--debc-ci-green); }
.rnw-cicard > li.ci-pink { --ci: var(--debc-ci-pink); }
.rnw-cicard > li > .rnw-cicard-label { margin: 0; padding: 4.16rem 1.92rem 0.64rem; font-size: 1.68rem; color: var(--debc-text); }
.rnw-cicard > li > .rnw-cicard-word { margin: 0; padding: 0 1.92rem 4.16rem; font-size: 2.64rem; font-weight: 800; letter-spacing: .01em; color: var(--ci); }
.rnw-cicard > li > .rnw-cicard-desc {
  margin: auto 0 0; padding: 2.4rem 1.92rem; background: var(--ci); color: #fff;
  font-size: 1.504rem; line-height: 1.6; word-break: keep-all;
}

/* ---------- 6-1) 인트로 제목 구분선 변형 (.rnw-h2c--bar) ----------
   **S1 의 판단을 시안 재확인으로 정정한다.** S1 은 "가운데 인트로의 제목 아래는
   파란 바가 아니라 얇은 세로선"이라고 못박았는데, 그건 창업교육·컨설팅(211) 시안이다.
   같은 가운데형인 110(장애인기업이란)은 **짧은 파란 바(36x6)** 다 — 시안에 두 변형이 다 있다.
   기본은 세로선(이미 시딩된 화면들이 그 모양)으로 두고, 파란 바가 필요한 화면만 이 클래스를 붙인다.
   (구분선이 아예 없는 인트로도 있다 — 그때는 클래스 없이 `<h2>` 만 쓰면 된다. 110 "육성 정책") */
.rnw-intro .rnw-h2c--bar::after {
  width: 36px; height: 6px; background: var(--debc-primary);
  margin: 1.76rem auto 2.08rem;
}

/* ---------- 6-2) 박스 없는 각주 (.rnw-note--plain) ----------
   .rnw-note 는 1px 보더 박스인데, 통계 아래 출처 표기처럼 **박스 없이 가운데 한 줄**인
   각주가 시안에 있다(110). 같은 글자 크기·색을 쓰되 박스만 없앤다. */
.rnw-note--plain, p.rnw-note--plain {
  border: 0; background: transparent; padding: 0; margin: 0.32rem 0 2.56rem; text-align: center;
}

/* ---------- 7) 표 셀 좌측 정렬 (.rnw-tbl--left / .tl / .tc) ----------
   .rnw-tbl 은 시안대로 가운데 정렬이 기본이지만, 주소·세부내용처럼 **문장이 들어가는 열**은
   시안이 좌측 정렬이다(251 지역센터 주소 16행 · 232 세부내용 5행 실측).
   표 단위(--left)와 칸 단위(.tl/.tc)를 함께 둔다 — 251 은 주소만 좌측이고 연락처는 가운데다. */
.rnw-tbl--left tbody td { text-align: left; vertical-align: top; }
.rnw-tbl td.tl, .rnw-tbl th.tl { text-align: left; }
.rnw-tbl td.tc, .rnw-tbl th.tc { text-align: center; }

/* ---------- 7-1) 줄바꿈 금지 칸 (.nw) — 전화·팩스·우편번호 (2026-08-10) ----------
   **`word-break: keep-all` 은 한글만 막는다.** 하이픈은 UAX#14 상 줄바꿈 기회라
   `054-900-1173` 이 좁은 칸에서 `054-` / `900-` / `1173` 로 쪼개진다
   (375 실측: 120 연락처 칸 폭 57px · 3~5줄 · 높이 113px, 251 은 2줄).
   값 단위로 확실히 막고 싶을 때 칸에 붙인다. 아래 8) 의 최소폭이 대부분을 이미 막지만,
   한 칸에 `1588-6072(평일 09:00~18:00)` 처럼 긴 문자열이 섞이면 이 클래스가 필요하다.
   **한 값 전체가 아니라 "덩어리"에 붙인다** — 아래 두 번째 예처럼 덩어리를 span 으로 나눠야
   전화번호와 안내 문구가 각각 온전히 한 줄로 남는다(칸 전체에 nowrap 을 걸면 칸이 넓어져
   다른 열이 눌린다). 같은 이유로 푸터 연락처는 `.rnw-foot-tel` 이라는 별도 클래스를 쓴다.
     <td class="tc nw">054-900-1173</td>
     <td class="tc"><span class="nw">1588-6072</span> <span class="nw">(평일 09:00~18:00)</span></td> */
.rnw-tbl .nw { white-space: nowrap; }

/* ---------- 8) 좁은 폭에서 표 칸의 최소 너비 (2026-08-10) ----------
   위 7-1 은 콘텐츠가 클래스를 붙여야 한다. **이미 적재된 20여 화면을 고치려면 CSS 만으로 되어야 한다.**
   원인을 다시 보면 "하이픈이 끊긴다"가 아니라 **열이 57px 까지 눌린 것**이다
   (`table-layout:auto` 가 남는 폭을 긴 한글 열에 몰아준다).
   그래서 칸에 **읽을 수 있는 최소 폭**을 준다 — 12자리 전화번호가 한 줄에 들어가는 값이 6.5rem(104px)이다.
     · 3열 표는 3x104 = 312 < 343 이라 **가로 스크롤 없이** 전화번호가 한 줄이 된다(120·251·252 신청접수).
     · 열이 많아 넘치면 `.rnw-dl-body{overflow-x:auto}` / `.rnw-tbl-scroll` 이 받는다 —
       6줄짜리 칸(252 구축현황 실측 h158)보다 가로 스크롤이 낫다.
   ※ S1 결정 3("표에 min-width 를 강제하지 않는다")과 어긋나지 않는다. 그건 **표 전체**의 min-width 였고
     2열 표가 343 안에 들어가는 것을 지키려는 것이었다 — 2열이면 212 라 그대로 들어간다.
   ※ **값을 rem 으로 박으면 안 된다.** 폭마다 글자 크기와 패딩이 달라서다(실측:
     375 는 14.08px·좌우 8px 라 104px 필요, 768 은 15.2px·좌우 16px 라 127px 필요).
     `ch`(숫자 0 의 폭) 기준으로 쓰면 글꼴이 바뀌어도 따라간다 — 전화번호 12자는 실측 **11.25ch**.
     처음에 `6.5rem`(104px) 로 넣었더니 375 에서 딱 1~2px 모자라 그대로 2줄이었다. */
@media (max-width: 991.98px) {
  .rnw-tbl td, .rnw-tbl th { min-width: calc(11.5ch + 3.2rem); }   /* 패딩 좌우 1rem */
}
@media (max-width: 767.98px) {
  .rnw-tbl td, .rnw-tbl th { min-width: calc(11.5ch + 1.6rem); }   /* 패딩 좌우 .5rem */
}

/* ---------- 태블릿(<=1199px) ---------- */
@media (max-width: 1199.98px) {
  .rnw-sub-body > .rnw-navycard,
  .rnw-sub-body > .rnw-stat,
  .rnw-sub-body > .rnw-cta-row,
  .cms-content > .rnw-navycard,
  .cms-content > .rnw-stat,
  .cms-content > .rnw-cta-row { padding-left: 0; padding-right: 0; }
  .rnw-stat-value { font-size: 3.2rem; }
}

/* ---------- 모바일(<=767px) — MO 시안 375 캔버스 실측 ----------
   · STEP  : 좌 파란 칸 166 -> 82, 행 높이 131 -> 90, 원 36 -> 26 (MO 시안 그대로)
   · 통계  : 가로 3열 -> **세로 스택**. pill 폭 약 252/375(=67%), 이음점 원은 아래 가운데로.
   · 카드  : 3열 -> 1열(남색 카드는 MO 시안도 세로 1열이다)
   · CTA   : 폭을 100% 로 채우지 않는다 — MO 시안도 글자폭 알약이다. 다만 줄바꿈은 허용. */
@media (max-width: 767.98px) {
  /* STEP */
  .rnw-dl-body > ol > li,
  ol.rnw-step > li { min-height: 9rem; padding: 1.6rem 1.6rem 1.6rem 11.04rem; }
  .rnw-dl-body > ol > li::before,
  ol.rnw-step > li::before { width: 8.2rem; font-size: 1.68rem; padding-top: 1.28rem; }
  .rnw-dl-body > ol > li > :first-child::before,
  ol.rnw-step > li > :first-child::before { width: 8.2rem; margin-top: -2.16rem; font-size: 1.12rem; }
  .rnw-dl-body > ol > li:not(:last-child)::after,
  ol.rnw-step > li:not(:last-child)::after {
    left: 4.1rem; bottom: -1.3rem; width: 2.6rem; height: 2.6rem; font-size: 1.12rem;
  }
  .rnw-dl-body > ol > li > strong,
  ol.rnw-step > li > strong { font-size: 1.52rem; }

  /* 통계 — 세로 스택 */
  .rnw-stat { flex-direction: column; align-items: center; margin: 2.56rem 0 0.96rem; }
  .rnw-stat > li { width: 67%; min-height: 10rem; padding: 1.6rem; }
  .rnw-stat > li + li { margin-left: 0; margin-top: -2px; }
  .rnw-stat > li + li::before { left: 50%; top: -1rem; transform: translateX(-50%); }
  .rnw-stat-label { font-size: 1.52rem; }
  .rnw-stat-value { font-size: 2.56rem; }

  /* 카드류 1열 */
  .rnw-navycard, .rnw-cicard { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .rnw-navycard { margin-bottom: 3.2rem; }
  .rnw-navycard-head { font-size: 1.76rem; padding: 2.24rem 1.6rem 1.92rem; }
  .rnw-navycard-head .bi { font-size: 3.2rem; }
  .rnw-navycard > li > :not(.rnw-navycard-head) { text-align: left; padding: 0 1.92rem; }
  .rnw-navycard > li > .rnw-navycard-lead { text-align: center; }
  .rnw-cicard > li > .rnw-cicard-label { padding-top: 2.56rem; }
  .rnw-cicard > li > .rnw-cicard-word { padding-bottom: 2.56rem; font-size: 2.24rem; }

  /* CTA */
  .rnw-cta-row { gap: 1.28rem; margin: 2.24rem 0; }
  .rnw-cta { padding: 1.28rem 2.24rem; gap: 1.44rem; font-size: 1.52rem; }
  .rnw-cta--lg { padding: 1.76rem 2.56rem; font-size: 1.6rem; }
  .rnw-cta--navy { padding: 1.6rem 2.24rem; }

  /* 강조 박스 다크 헤더 */
  .rnw-note--head > :first-child { padding: 1.44rem 1.6rem; margin-bottom: 1.44rem; }
  .rnw-note--head > :not(:first-child) { margin-left: 1.6rem; margin-right: 1.6rem; }
  .rnw-note--head > :last-child { margin-bottom: 1.6rem; }
}

/* =====================================================================
   S3-2 헌장(pledge)·서명 블록 (2026-08-09 추가분)
   근거: 시안 원본 실측
     · PC/sub/6.기관소개/윤리경영/..._인권경영.jpg (662, 배지 8개)
     · PC/sub/6.기관소개/윤리경영/..._고객중심경영.jpg (661, 4개)
     · PC/sub/4.참여마당/규제애로 신고/..._기업민원-보호·서비스-헌장.jpg (4303, 4개)
     · MO 같은 3화면
   실측(PC 1920): 배지 **70x70 정원** #4A75E5 · 좌단 x234(정의목록과 같은 자리) ·
                 본문 x334 · 행 피치 93(배지 70 + 간격 23) · 배지 글자 흰색 Bold
                 서명 구분선 1px #C6C6C6, 본문 폭 전체(x235~1688)
        (MO 375): 배지 42, 본문 x70, 배지는 첫 줄에 **상단 정렬**
   ===================================================================== */

/* ---------- 8) 헌장 정의목록 (.rnw-dl--pledge) ----------
   661·662·4303 은 `<dt class="rnw-dl-label">하나</dt><dd class="rnw-dl-body">…` 를
   반복하는 **같은 마크업**이다. 기본 .rnw-dl 로 두면 라벨열이 21rem 이라
   본문이 시안보다 230px 오른쪽에서 시작하고, 사각 불릿이 붙는다.
   그래서 dl 에 모디파이어 하나만 얹어 라벨을 원형 배지로 바꾼다
   (콘텐츠 구조는 그대로 — dt/dd 의 의미가 "항목명/내용"으로 맞는다). */
.rnw-dl--pledge {
  grid-template-columns: 9.9rem minmax(0, 1fr);   /* 배지 70 + 간격 29 */
  align-items: center; row-gap: 2.3rem;
}
.rnw-dl--pledge .rnw-dl-label {
  width: 7rem; height: 7rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  padding-left: 0; background: var(--debc-primary); color: #fff;
  font-size: 1.7rem; font-weight: 700; line-height: 1; text-align: center;
}
.rnw-dl--pledge .rnw-dl-label::before { content: none; }   /* 남색 사각 불릿 제거 */
.rnw-dl--pledge .rnw-dl-body { line-height: 1.75; }
.rnw-dl--pledge .rnw-dl-body > p:last-child { margin-bottom: 0; }

/* ---------- 9) 서명 블록 (.rnw-sign) ----------
   헌장 아래 "날짜 / 임직원 일동" 2줄. 시안은 본문 폭 전체의 1px 선 아래 가운데 정렬이다.
     <div class="rnw-sign"><p>2018. 5. 16</p><p>… 임직원 일동</p></div> */
.rnw-sign {
  margin: 7.2rem 7.2rem 0; padding: 5.6rem 0 0;
  border-top: 1px solid var(--debc-muted); text-align: center;
}
.rnw-sign p { margin: 0 0 0.96rem; font-size: 1.68rem; line-height: 1.7; color: var(--debc-text); }
.rnw-sign > :last-child { margin-bottom: 0; }

/* ---------- 10) 설명 없는 인트로의 구분선 제거 ----------
   531(경영공시 개요)처럼 인트로에 **제목 한 줄만** 있는 화면에서는 제목 아래 구분선이
   허공에 뜬다(시안에는 선이 없다). 아래에 형제가 없을 때만 지운다 — 콘텐츠 수정 불필요. */
.rnw-intro > .rnw-h2c:only-child::after,
.rnw-intro > .rnw-h2l:only-child::after,
.rnw-intro > .rnw-intro-lead:only-child::after { display: none; }

/* ---------- 11) 인트로 로고 워터마크 (.rnw-intro--wm) ----------
   헌장 3화면(4303·661·662) 인트로 우측에 기관 로고가 아주 옅게 깔린다.
   외부 자산이 아니라 이미 있는 로컬 로고(/images/debc/logo.svg)를 쓴다(폐쇄망).
   글자 위에 겹치므로 **본문 우측 여백을 확보**하고 투명도를 낮춰 대비를 해치지 않는다. */
.rnw-intro--wm { position: relative; padding-right: 38.4rem; }
.rnw-intro--wm::after {
  content: ""; position: absolute; right: 6.4rem; top: 50%; transform: translateY(-50%);
  width: 30.4rem; height: 10.4rem; pointer-events: none;
  background: url("/images/debc/logo.svg") no-repeat center / contain;
  /* background-image 에 직접 opacity 를 줄 수 없다 — 요소에 주면 본문 글자까지 흐려진다.
     그래서 별도 레이어(::after)로 깔고 회색조 + 낮은 불투명도로 낮춘다.
     ※ 시안은 **심볼만** 옅게 깔지만 우리가 가진 로컬 자산은 가로형 로고 락업뿐이다.
       전용 워터마크 SVG 를 받으면 여기 url 만 교체하면 된다(시안대조표에 X 로 기록). */
  filter: grayscale(1); opacity: .10;
}

@media (max-width: 1199.98px) {
  .rnw-sign { margin-left: 0; margin-right: 0; }
  .rnw-intro--wm { padding-right: 19.2rem; background-size: auto 8rem; background-position: right 2.4rem center; }
}

@media (max-width: 767.98px) {
  /* 배지는 첫 줄에 붙어 위쪽 정렬(MO 시안) — 문장이 3~4줄이라 가운데 정렬하면 배지가 문단 한가운데 뜬다 */
  .rnw-dl--pledge { grid-template-columns: 7rem minmax(0, 1fr); align-items: start; row-gap: 1.92rem; }
  .rnw-dl--pledge .rnw-dl-label { width: 4.2rem; height: 4.2rem; font-size: 1.28rem; margin: 0; }
  .rnw-dl--pledge .rnw-dl-body { margin-bottom: 0; }
  .rnw-sign { margin-top: 3.84rem; padding-top: 3.2rem; }
  .rnw-sign p { font-size: 1.52rem; }
  .rnw-intro--wm::after { display: none; }
  .rnw-intro--wm { padding-right: 2rem; }
}

/* =====================================================================
   S4 4뎁스 박스탭 + T6 잔여 컴포넌트 (2026-08-10)
   근거: DESIGN.md §2-3-1 · Docs/분석/시안분석_서브페이지_전수.md §3-1
        + 시안 원본 픽셀 실측(PC 1920 캔버스 / 컨테이너 1600 / MO 375)
          · PC/sub/6.기관소개/오시는길/..._오시는길_지역센터.jpg      (16칸 4x4 — 가장 명확)
          · PC/sub/2.사업안내/수출판로지원/..._공공판로컨설팅_공공입찰판로지원시스템.jpg (4칸)
          · PC/sub/2.사업안내/시설공간/..._발달장애인특화사업장_사업안내.jpg (8칸 + ⓘ)
          · PC/sub/6.기관소개/{경영전략체계,기관장인사말,임원소개,기관상징}.jpg
          · MO/sub/... 같은 화면들

   -- 실측 정정 (전수분석 문서의 "행 높이 약 62px" 은 틀렸다) -----------
     격자      : 컨테이너 1600 을 4열 균등 = 셀 400px. 셀 사이 보더를 공유한다.
     행 높이   : 91px(공공판로 4칸 · 발달장애인 8칸) / 80px(지역센터 16칸)
                 -> 90px 채택(3장 중 2장이 91. 16칸만 11px 낮다 — 디자이너 편차)
     보더      : 1px #A8A8A8(= --debc-line-strong). --debc-line(#DDE3EC)은 두 단계 밝아
                 격자가 보이지 않는다. 형제 메뉴 탭 하단선과 같은 값이다.
     활성      : #4A75E5 면 전체 채움 + 흰 Bold. 활성 칸은 위/왼쪽 격자선까지 덮는다
                 (실측: 활성 칸 좌상단 픽셀이 파랑, 같은 행 비활성 칸은 회색 #A8A8A8).
     글자      : 형제 메뉴 탭과 같은 크기(두 시안 모두 잉크 높이 20px 로 동일) -> 1rem.
     MO(375)   : 셀 폭 112 = 343/3 -> 지역센터 16칸은 3열.
                 발달장애인 8칸은 라벨이 길어 2열(같은 MO 시안 안에서 열 수가 다르다).
                 -> 기본 2열 + `--mo3` 모디파이어. 셀 높이 42px.

   -- 왜 형제 메뉴 탭(.rnw-tabs)과 섞으면 안 되나 -----------------------
   형제 메뉴 탭은 한 행 + 6px 하단 언더라인이고 박스탭은 여러 행 + 면 채움이다.
   같은 화면에 둘이 함께 온다(지역센터 = 형제 탭 3개 + 박스탭 16칸). 한 컴포넌트로 합치면
   활성 표시가 서로 덮어써 어느 것이 현재 위치인지 읽히지 않는다.

   -- 마크업 계약 (콘텐츠 작성자가 TB_CONTENTS.CNTNTS_CN 에 직접 쓴다) --
   ※ 이 주석이 계약의 원천이다. 문서가 아니라 여기를 보고 콘텐츠를 쓴다.
   ※ 정화기(JennyHtmlSanitizer rich) 제약을 먼저 알아야 한다 — 20태그 전수 실측(2026-08-10):
       허용 : div · ul · li · a[href] · class · id · role · aria-* · style(50여 속성)
       불가 : <nav> · <button> · data-* · hidden · tabindex  (전부 제거된다)
       주의 : **<i> 와 <b> 는 태그는 남지만 class 가 지워진다.**
              그래서 아이콘은 반드시 <span class="bi bi-*"> 로 쓴다(<i> 로 쓰면
              저장하는 순간 아이콘이 사라진다 — S3 의 남색 카드에서 실제로 걸렸다).
              class 가 유지되는 태그: span·em·p·a·ul·li·div·dl·dt·dd·h2·h3·strong·table·img·small
     그래서 탭은 <div> + <a href="#패널id"> 로 쓴다. 상태는 class 로만 표현한다.

     (1) 4뎁스 메뉴 전환 · (3) 게시판 카테고리 필터
         — href 가 실제 URL 이면 JS 는 개입하지 않는다(그냥 이동한다)
       <div class="rnw-boxtab">
         <a class="active" href="/cms/view.do?menuNo=252" aria-current="page">사업안내</a>
         <a href="/cms/view.do?menuNo=2521">경북 가치만드소</a>
       </div>

     (2) 한 메뉴 안 다중 시안 전환 (233 공공판로 4장 · 252 발달장애인 8장)
       <div class="rnw-boxtab">
         <a class="active" href="#bt-233-1">공공입찰 판로지원시스템</a>
         <a href="#bt-233-2">MAS·공공조달·이음장터 등록 컨설팅</a>
       </div>
       <div class="rnw-boxpanel" id="bt-233-1"> ...본문 1... </div>
       <div class="rnw-boxpanel" id="bt-233-2"> ...본문 2... </div>

     · 활성 칸에 (i) 아이콘을 붙이려면(발달장애인 시안) 링크 맨 앞에
       <span class="bi bi-info-circle-fill" aria-hidden="true"></span> 를 넣는다(<i> 아님 — 위 주의).
     · PC 열 수는 기본 4. `rnw-boxtab--c2/--c3/--c5` 로 바꾼다(기관소식 5칸 등).
     · MO 열 수는 기본 2. 라벨이 짧으면 `rnw-boxtab--mo3`.
     · <ul class="rnw-boxtab"><li><a> 형태도 같은 화면을 낸다(정의목록 안에서 쓸 때
       "- " 글머리가 붙지 않도록 함께 지워 둔다).

   -- JS 없이도 동작한다(점진적 향상) -----------------------------------
   패널은 CSS 로 숨기지 않는다. JS(fragments/subpage.html 안)가 살아 있을 때만
   `rnw-boxpanel--off` 를 붙여 감춘다. JS 가 죽으면 패널이 전부 펼쳐진 채 남아
   본문이 하나도 사라지지 않는다(스크립트 실패가 정보 손실이 되면 안 된다).
   ===================================================================== */

/* ---------- 12) 4뎁스 박스탭 (.rnw-boxtab) ----------
   격자선을 셀이 그린다(우/하) + 컨테이너가 상/좌를 그린다.
   `gap:1px` + 컨테이너 배경색 기법을 쓰지 않은 이유: 마지막 행이 덜 찼을 때
   빈 칸 자리에 회색 블록이 남는다(MO 지역센터는 마지막 행이 1칸뿐이다). */
.rnw-boxtab {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none; margin: 0 0 4.8rem; padding: 0;
  border-top: 1px solid var(--debc-line-strong);
  border-left: 1px solid var(--debc-line-strong);
}
.rnw-boxtab--c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rnw-boxtab--c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rnw-boxtab--c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* ul/li 형태도 받는다 — li 는 격자에 참여만 하고 모양은 a 가 만든다 */
ul.rnw-boxtab > li { display: contents; }
.rnw-dl-body > ul.rnw-boxtab > li::before { content: none; }
.rnw-dl-body > ul.rnw-boxtab > li { padding-left: 0; text-indent: 0; }

.rnw-boxtab > a,
.rnw-boxtab > li > a {
  display: flex; align-items: center; justify-content: center; gap: 0.88rem;
  min-height: 9rem;                          /* 90px (시안 91) */
  padding: 1.44rem 1.6rem; text-align: center;
  border-right: 1px solid var(--debc-line-strong);
  border-bottom: 1px solid var(--debc-line-strong);
  background: #fff; color: var(--debc-text);
  font-size: 1.6rem; line-height: 1.45; text-decoration: none;
  word-break: keep-all;
}
.rnw-boxtab > a:hover, .rnw-boxtab > li > a:hover,
.rnw-boxtab > a:focus, .rnw-boxtab > li > a:focus {
  color: var(--debc-primary); text-decoration: none; background: var(--debc-panel);
}
/* 활성 — 면 채움. box-shadow 로 위/왼쪽 격자선까지 덮는다(그 두 선은 이웃 칸이나 컨테이너가
   그리므로 border 만으로는 회색이 남는다. 시안 실측에서 활성 칸의 좌상단은 파랑이다). */
.rnw-boxtab > a.active,
.rnw-boxtab > li > a.active {
  background: var(--debc-primary); border-color: var(--debc-primary);
  color: #fff; font-weight: 700;
  box-shadow: -1px 0 0 var(--debc-primary), 0 -1px 0 var(--debc-primary);
}
.rnw-boxtab > a.active:hover, .rnw-boxtab > li > a.active:hover,
.rnw-boxtab > a.active:focus, .rnw-boxtab > li > a.active:focus {
  background: var(--debc-primary-deep); border-color: var(--debc-primary-deep); color: #fff;
}
.rnw-boxtab .bi { font-size: 2rem; line-height: 1; flex: 0 0 auto; }

/* 패널 — 기본은 그냥 블록이다. JS 가 살아 있을 때만 --off 가 붙어 감춰진다. */
.rnw-boxpanel--off { display: none; }
.rnw-boxpanel:focus { outline: none; }   /* 전환 시 프로그램 포커스 — 테두리는 그리지 않는다 */

/* ---------- 13) 임원 카드 (.rnw-exec) — 655 ----------
   마크업은 655 에 이미 적재된 것을 그대로 쓴다(콘텐츠 수정은 dl 에 클래스 한 줄뿐):
     <dl class="rnw-dl rnw-exec">
       <dt class="rnw-dl-label">이사회</dt>
       <dd class="rnw-dl-body">
         <p class="rnw-dl-tit">윤석원 이사</p><ul><li>경력</li>...</ul>
         <p class="rnw-dl-tit">김재형 이사</p><ul>...</ul>
       </dd>
     </dl>
   · 2열은 multicol(columns:2)로 만든다. 시안이 요구하는 것은 열 우선 흐름
     (좌열 3명 -> 우열 3명)인데, 항목이 p,ul,p,ul... 로 평평해서 grid 의
     `grid-auto-flow:column` 으로는 한 사람을 한 칸에 담을 수 없다(사람마다 요소가 2개다).
     multicol 은 개수를 몰라도 원본 순서를 열 우선으로 흘려 준다 — MO 1열로 되돌릴 때도
     소스 순서가 그대로라 뒤엉키지 않는다(대조표 §V-2 가 MO 시안으로 확정한 순서).
   · 이름 1명뿐인 dd(이사장·감사)도 columns:2 로 둔다 — 시안도 좌열 폭으로만 그린다(전폭이 아니다).
   · 이름/경력의 좌우 배치는 **float 로 하면 안 된다.** 1차에 float 로 만들었더니
     multicol 안에서 **6명이 전부 좌열에 쌓이고 우열이 비었다**(1400px 실측 h846 vs 정상 622).
     같은 화면에서 float 만 걷으면 3+3 으로 정상 분배된다 — 원인이 float 임을 실측으로 특정했다
     (`break-inside:avoid` 는 무관했다. float 없이는 그대로 두어도 잘 나뉜다).
     그래서 이름은 **고정 높이 블록**으로 두고 다음 ul 을 그 높이만큼 음수 마진으로 끌어올린다.
     이렇게 하면 남색 2px 선(이름의 border-top)과 회색 선(ul 의 border-bottom)이
     둘 다 **사람 블록 전체 폭**을 지나간다. */
.rnw-exec { grid-template-columns: 20.8rem minmax(0, 1fr); padding: 0 4.16rem; }
.rnw-exec .rnw-dl-body { columns: 2; column-gap: 6.4rem; }
.rnw-exec .rnw-dl-body > .rnw-dl-tit {
  height: 8.64rem; margin: 0; padding: 2.24rem 0 0;
  border-top: 2px solid var(--debc-navy);
  color: var(--debc-text); font-size: 1.92rem; font-weight: 700; line-height: 1.5;
  /* `break-inside: avoid` 가 **없으면 이름이 두 열에 걸쳐 쪼개진다**(1400px 실측:
     4번째 이름만 폭 1109 = 두 열에 걸침, 경력은 우열 상단). `break-after` 만으로는 안 된다 —
     Chrome 은 "이 블록 뒤에서 끊지 마라"보다 "이 블록 안에서 끊지 마라"를 먼저 지킨다. */
  break-inside: avoid; break-after: avoid;
}
.rnw-exec .rnw-dl-body > .rnw-dl-tit::after {   /* 이름 아래 짧은 파란 바 (시안 24x3) */
  content: ""; display: block; width: 2.4rem; height: 3px;
  background: var(--debc-primary); margin-top: 0.88rem;
}
.rnw-exec .rnw-dl-body > .rnw-dl-tit + ul {
  margin: -8.64rem 0 0;                          /* 이름 블록 높이와 같은 값 — 나란히 붙인다 */
  padding: 2.4rem 0 2.4rem 15.2rem; min-height: 8.64rem;
  border-bottom: 1px solid var(--debc-line);
  break-inside: avoid; break-before: avoid;
}
/* 경력 글머리는 시안이 "· " 다(하우스 표준 "- " 와 다르다).
   `.rnw-dl-body > ul > li::before`(0,1,3)를 이기려면 클래스가 하나 더 필요하다. */
.rnw-exec .rnw-dl-body > ul > li {
  padding-left: 1.28rem; text-indent: -1.28rem;
  font-size: 1.504rem; line-height: 1.9; color: var(--debc-text-sub);
}
.rnw-exec .rnw-dl-body > ul > li::before { content: "· "; }

/* ---------- 14) 경영목표 카드 (.rnw-goal) — 630 ----------
   `.rnw-stat`(알약 통계)의 모디파이어다. 630 은 한 화면에서 두 모양을 다 쓴다
   (핵심가치=알약 / 경영목표=카드) — 그래서 전역 변경이 아니라 모디파이어여야 한다.
     <ul class="rnw-stat rnw-goal">
       <li><span class="rnw-stat-label">고객소통 지수</span>
           <strong class="rnw-stat-value">88점</strong><span>달성</span></li>
     </ul>
   실측: 카드 242x165 · 1px #4A75E5 · 칩 220x55(카드 안쪽 11/12px) · 카드 간격 44 · 4장 가운데 정렬 */
.rnw-goal {
  display: grid; grid-template-columns: repeat(4, minmax(0, 24.4rem));
  justify-content: center; gap: 4.4rem; align-items: stretch;
}
.rnw-goal > li {
  display: block; min-height: 16.48rem; padding: 1.2rem 1.12rem 2.24rem; margin: 0;
  border: 1px solid var(--debc-primary); border-radius: 6px; background: #fff;
  text-align: center;
}
.rnw-goal > li + li { margin-left: 0; }
.rnw-goal > li + li::before { content: none; }        /* 알약의 이음점 파란 원을 지운다 */
.rnw-goal .rnw-stat-label {
  display: block; margin: 0 0 2.4rem; padding: 1.52rem 0.96rem;
  background: var(--debc-primary); border-radius: 4px;
  color: #fff; font-size: 1.52rem; font-weight: 500; line-height: 1.4;
}
.rnw-goal .rnw-stat-value { display: inline; font-size: 3.36rem; }
/* 단위("달성"·"제고")가 값과 같은 줄에 와야 한다(시안). 콘텐츠가 클래스 없는 <span> 을
   쓰고 있어 위치(값 바로 뒤)로도 받고, 클래스를 쓴 경우도 받는다. */
.rnw-stat-unit,
.rnw-goal .rnw-stat-value + span {
  display: inline; margin-left: 0.56rem;
  font-size: 1.6rem; font-weight: 500; color: var(--debc-text);
}

/* ---------- 15) 4대 전략목표 트리 (.rnw-strategy) — 630 ----------
   지금 콘텐츠는 4열 x 3행 표다(thead 4 + tbody 12). 행렬 관계가 이미 맞으므로
   표를 유지한 채 셀만 다이어그램으로 그린다 — 표 의미(헤더-데이터 연결)를 버리지 않는다.
     <table class="rnw-tbl rnw-tbl--data rnw-strategy">
   · 원은 th 의 radial-gradient 배경으로 그린다. th 안에 감쌀 요소가 없어
     border-radius 로는 셀 폭(약 360px)만큼 늘어난 타원이 된다.
   · 아래 화살표는 th::after.
   실측: 남색 원 d216 · halo 링 24 · 박스 254x92(연회색 #F7F8FD + 1px #4A75E5) · 세로 간격 16 */
.rnw-strategy {
  border-top: 0; border-collapse: separate; border-spacing: 2.24rem 1.6rem;
  table-layout: fixed; width: 100%;
}
/* `.rnw-tbl th + th`(0,1,2) 가 `.rnw-strategy th`(0,1,1)를 이겨 **원 사이에 세로 실선이 그어진다**
   — 1400px 실측에서 실제로 찍혔다. 인접 선택자로 특정도를 맞춰 지운다. */
.rnw-strategy th, .rnw-strategy td { border: 0; }
.rnw-strategy th + th, .rnw-strategy th + td,
.rnw-strategy td + td, .rnw-strategy td + th { border-left: 0; }
/* 원의 **세로 중심을 위에서 halo 반지름만큼** 내려 잡는다. `50%` 기준으로 잡으면
   칸 높이가 지름보다 작을 때 halo 위쪽이 잘려 원이 납작해진다(1차 구현에서 그렇게 찍혔다).
   높이 340 = halo 264 + 화살표·여백 76 (시안 실측: halo 아래 23px 에 ▼, 그 아래 박스). */
.rnw-strategy thead th {
  position: relative; height: 34rem;
  padding: 0 3.84rem 7.6rem; vertical-align: middle; background: transparent;
  color: #fff; font-size: 1.68rem; font-weight: 700; line-height: 1.45;
  background-image:
    radial-gradient(circle at 50% 13.2rem,
      var(--debc-navy) 0 10.8rem,
      var(--debc-halo) 10.8rem 13.2rem,
      transparent 13.2rem);
}
.rnw-strategy thead th::after {                  /* 원 아래 화살표 */
  content: ""; position: absolute; left: 50%; bottom: 4rem; transform: translateX(-50%);
  border-left: 1.36rem solid transparent; border-right: 1.36rem solid transparent;
  border-top: 1.28rem solid var(--debc-halo-2);
}
.rnw-strategy tbody td {
  height: 9.2rem; padding: 1.6rem 1.44rem; vertical-align: middle;
  background: var(--debc-panel); border: 1px solid var(--debc-primary); border-radius: 6px;
  font-size: 1.52rem; line-height: 1.5; color: var(--debc-text);
}
/* 다이어그램 위의 가운데 라벨(630 `전략과제`). `.rnw-dl-tit` 는 본문 소제목이라 좌측 정렬이 기본인데,
   전략 트리 위에 오는 이 한 줄만 시안이 가운데다. 전역으로 바꾸면 다른 화면 소제목이 전부 움직인다.
     <p class="rnw-dl-tit rnw-dl-tit--center">전략과제</p>
   ※ 시안은 이 라벨이 **화살표 줄과 같은 높이**에 놓이지만, 그 위치는 표 높이에 묶인 음수 마진이라
     폭마다 어긋난다. 여기서는 정렬만 맞춘다(대조표 #15 는 정렬 O · 세로 위치 △로 남긴다). */
.rnw-dl-tit--center { text-align: center; }

/* ---------- 16) 큰 원형 배지 정의목록 (.rnw-dl--badge) — 630 ----------
   `.rnw-dl--pledge`(헌장 70px 파랑)와 다른 변형이다. 여기는 진남색 150px + 연블루 halo 이고
   본문이 연블루 박스(1px 파란 보더, 가운데 정렬)다.
     <dl class="rnw-dl rnw-dl--badge">
       <dt class="rnw-dl-label">미션</dt>
       <dd class="rnw-dl-body"><p class="rnw-sub-box">...</p></dd>
   배지 색은 시안이 위에서 아래로 4단계(진남 -> 파랑)로 옅어진다 — dt 순서로 준다
   (콘텐츠에 색을 쓰지 않는다). 5개 이상이면 마지막 색이 반복된다. */
.rnw-dl--badge {
  grid-template-columns: 19.6rem minmax(0, 1fr);
  column-gap: 4.16rem; row-gap: 8rem; align-items: center;
}
.rnw-dl--badge .rnw-dl-label {
  width: 15rem; height: 15rem; margin: 0 auto; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 0 1.6rem; background: var(--debc-navy); color: #fff;
  font-size: 1.84rem; font-weight: 700; line-height: 1.35;
  box-shadow: 0 0 0 2.4rem var(--debc-halo);     /* 연블루 halo 링 24px */
}
.rnw-dl--badge .rnw-dl-label::before { content: none; }   /* 남색 사각 불릿 제거 */
/* 순서 색은 **두 마크업 모두**에서 같아야 한다. `.rnw-dl-item` 래퍼형에서는 dt 가
   래퍼 안의 유일한 dt 라 `nth-of-type` 이 전부 1 이 된다(전 배지가 같은 색이 된다) —
   래퍼를 세는 규칙을 함께 둔다. 같은 함정을 MO 항목 간격에서 이미 밟았다(§S1 MO 주석). */
.rnw-dl--badge > .rnw-dl-label:nth-of-type(2),
.rnw-dl--badge > .rnw-dl-item:nth-of-type(2) > .rnw-dl-label { background: var(--debc-primary-deep); }
.rnw-dl--badge > .rnw-dl-label:nth-of-type(3),
.rnw-dl--badge > .rnw-dl-item:nth-of-type(3) > .rnw-dl-label { background: var(--debc-navy-mid); }
.rnw-dl--badge > .rnw-dl-label:nth-of-type(n+4),
.rnw-dl--badge > .rnw-dl-item:nth-of-type(n+4) > .rnw-dl-label { background: var(--debc-primary); }
.rnw-dl--badge .rnw-dl-body > .rnw-sub-box {
  margin: 0; padding: 3.84rem 3.2rem; border-radius: 4px;
  background: var(--debc-halo); border: 1px solid var(--debc-primary);
  text-align: center; font-size: 1.6rem;
}

/* ---------- 17) 인사말 2열 (.rnw-greet) — 610 ----------
   `.rnw-sub-body` 에 클래스를 하나 얹으면 PC 만 2열이 된다 — 콘텐츠 순서는 그대로다
   (첫 자식이 사진 카드, 그 뒤가 리드+본문 = MO 시안 순서와 이미 같다. 대조표 §2).
     <div class="rnw-sub-body rnw-greet"> <div class="rnw-sub-box">사진...</div> <h2>...</h2> <p>...</p> </div>
   · 카드를 `grid-row: 1 / span 60` 으로 왼쪽 열에 세로로 눕힌다. 암시적 행이라
     `1 / -1` 이 먹지 않는다(그건 명시 그리드의 끝을 가리킨다).
     그래서 넉넉한 span 을 주고 row-gap 을 0 으로 둬 빈 행이 간격을 만들지 않게 한다.
   · 리드 둘째 줄 파랑(시안)은 **콘텐츠가 그 줄을 <strong> 으로 감싸야** 나온다.
     `<br>` 뒤의 텍스트 노드는 CSS 로 고를 수 없다 — 색만을 위해 인라인 style 을 쓰지 않는다.
       <h2>장애인기업의 혁신을 …,<br><strong>… 도전에 함께합니다</strong></h2>
   · 시안은 좌측 카드가 **화면 왼쪽 끝까지** 나가지만 여기서는 컨테이너 안에 둔다.
     100vw 계열 풀블리드는 세로 스크롤바 폭만큼 가로를 넘긴다(768·1024 에서 실제로 난다).
     필요하면 .rnw-band 와 같은 box-shadow 기법으로 별도 모디파이어를 만든다. */
.rnw-greet {
  display: grid; grid-template-columns: 48rem minmax(0, 1fr);
  column-gap: 6.4rem; row-gap: 0; align-items: start;
}
.rnw-greet > :first-child { grid-column: 1; grid-row: 1 / span 60; }
.rnw-greet > :not(:first-child) { grid-column: 2; }
.rnw-greet > .rnw-sub-box:first-child {
  margin: 0; padding: 4.8rem 4rem; border-radius: 12px; text-align: center; position: relative;
}
.rnw-greet > .rnw-sub-box:first-child::before {  /* DEBC 로고 워터마크(시안 배경 장식) */
  content: ""; position: absolute; left: 2.4rem; top: 4.8rem;
  width: 22.4rem; height: 8rem; pointer-events: none;
  background: url("/images/debc/logo.svg") no-repeat left center / contain;
  filter: grayscale(1); opacity: .12;
}
.rnw-greet > .rnw-sub-box:first-child img { border-radius: 10px; position: relative; }
.rnw-greet > .rnw-sub-box:first-child p { margin: 1.92rem 0 0; line-height: 1.7; }
.rnw-greet > h2 { font-size: 2.64rem; line-height: 1.5; margin: 0 0 3.2rem; word-break: keep-all; }
/* 리드 2행 파랑(시안) — 콘텐츠가 그 줄을 감싸야 한다. 둘 중 하나를 쓰면 된다.
     (권장) <h2>1행,<br><strong>2행</strong></h2>            굵기까지 시안과 같다
     (대안) <h2>1행,<br><span class="rnw-lead-pt">2행</span></h2>   1행과 같은 굵기로 두고 싶을 때
   `<br>` 뒤의 텍스트 노드는 CSS 로 고를 수 없어 콘텐츠 쪽 표시가 반드시 필요하다.
   색만을 위해 인라인 style 을 쓰지 않는다(레이아웃·서식은 클래스로 간다는 원칙). */
.rnw-greet > h2 strong,
.rnw-lead-pt { color: var(--debc-primary); }
.rnw-greet > p { margin: 0 0 2.88rem; line-height: 1.9; word-break: keep-all; }

/* ---------- 18) CI 색상 견본 (.rnw-ci-palette) — 640 ----------
   지금 콘텐츠는 인라인 background-color 를 쓴 표다(정화기 rich 통과 확인).
   클래스가 생기면 색만 인라인으로 남기고 레이아웃은 여기서 가져간다.
     <ul class="rnw-ci-palette">
       <li><span style="background-color:#1051A5"></span><p>C 098 M 078 Y 000 K 000</p></li>
     </ul> */
.rnw-ci-palette {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem;
  list-style: none; margin: 3.2rem 0 1.6rem; padding: 0;
}
.rnw-dl-body > ul.rnw-ci-palette > li::before { content: none; }
.rnw-dl-body > ul.rnw-ci-palette > li { padding-left: 0; text-indent: 0; }
.rnw-ci-palette > li { margin: 0; text-align: center; }
.rnw-ci-palette > li > span { display: block; height: 4.4rem; border-radius: 2px; }
.rnw-ci-palette > li > p { margin: 1.12rem 0 0; font-size: 1.408rem; color: var(--debc-text-sub); }

/* ---------- 19) 풀블리드 배경 띠 (.rnw-band) ----------
   630 "2028 경영목표" 는 화면 끝까지 이어지는 #F7F8FD 띠다. 콘텐츠는 컨테이너 안이라
   폭을 넘길 수 없다. 100vw 를 쓰면 세로 스크롤바 폭만큼 가로가 넘친다(768·1024 에서
   실제로 나는 결함이다) — 그래서 box-shadow 로 좌우를 칠하고 clip-path 로 위아래만 자른다.
   box-shadow 는 스크롤 가능한 오버플로를 만들지 않는다.
     <div class="rnw-band"><h2 class="rnw-h2c">2028 경영목표</h2><ul class="rnw-stat rnw-goal">...</ul></div> */
.rnw-band {
  background: var(--debc-panel); padding: 5.6rem 0 6.4rem; margin: 4.8rem 0;
  box-shadow: 0 0 0 100vmax var(--debc-panel);
  clip-path: inset(0 -100vmax);
}
.rnw-band > :first-child { margin-top: 0; }
.rnw-band > :last-child { margin-bottom: 0; }

/* ---------- 20) 본문 최상위 표/박스탭에도 좌우 여백 ----------
   `.rnw-sub-body > .rnw-stat` 등은 S3 §0 에서 4.5rem 을 받는데 표만 안 받아
   한 화면에서 표만 좌우 72px 씩 넓었다(630 실측). 같은 목록에 넣는다. */
.rnw-sub-body > .rnw-tbl-scroll,
.cms-content > .rnw-tbl-scroll { padding-left: 7.2rem; padding-right: 7.2rem; }
/* 래퍼 없이 표만 최상위에 온 경우 — **padding 이 아니라 margin** 이다.
   .rnw-tbl--data 는 상단 2px 남색 보더를 그리는데, padding 을 주면 그 선이
   셀보다 좌우로 72px 씩 더 길게 그어진다(박스탭에서 실제로 그렇게 찍혔다). */
.rnw-sub-body > .rnw-tbl,
.cms-content > .rnw-tbl { margin-left: 7.2rem; margin-right: 7.2rem; width: auto; }
/* 박스탭은 여백을 받지 않는다 — 시안 실측에서 **컨테이너 전폭**(x160~1759 = 1600)이다. */

/* ---------- 태블릿(<=1199px) ---------- */
@media (max-width: 1199.98px) {
  .rnw-sub-body > .rnw-tbl-scroll,
  .cms-content > .rnw-tbl-scroll { padding-left: 0; padding-right: 0; }
  .rnw-sub-body > .rnw-tbl,
  .cms-content > .rnw-tbl { margin-left: 0; margin-right: 0; }
  .rnw-exec { grid-template-columns: 17.6rem minmax(0, 1fr); padding: 0; }
  .rnw-greet { grid-template-columns: 35.2rem minmax(0, 1fr); column-gap: 3.84rem; }
  .rnw-dl--badge { grid-template-columns: 16rem minmax(0, 1fr); }
  .rnw-dl--badge .rnw-dl-label { width: 12rem; height: 12rem; font-size: 1.6rem; box-shadow: 0 0 0 1.76rem var(--debc-halo); }
  .rnw-goal { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.24rem; }
  .rnw-strategy thead th { height: 25.6rem; padding: 0 1.6rem 5.76rem; font-size: 1.52rem;
    background-image: radial-gradient(circle at 50% 9.92rem,
      var(--debc-navy) 0 8.32rem, var(--debc-halo) 8.32rem 9.92rem, transparent 9.92rem); }
  .rnw-strategy thead th::after { bottom: 2.88rem; }
}

/* ---------- 태블릿 세로(<=991px) — 박스탭 3열 ----------
   768px 은 iPad 세로다. MO 미디어쿼리에만 대응을 넣으면 이 구간이 무방비가 된다
   (DESIGN §5-2, 2026-08-10 QA 실측 지적). */
@media (max-width: 991.98px) {
  .rnw-boxtab { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rnw-boxtab--c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rnw-boxtab > a, .rnw-boxtab > li > a { min-height: 7.04rem; font-size: 1.52rem; padding: 1.12rem 0.96rem; }
  .rnw-greet { grid-template-columns: minmax(0, 1fr); }
  .rnw-greet > :first-child { grid-column: 1; grid-row: auto; margin-bottom: 3.84rem; }
  .rnw-greet > :not(:first-child) { grid-column: 1; }
  .rnw-goal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 모바일(<=767px) — MO 375 캔버스 실측 ---------- */
@media (max-width: 767.98px) {
  /* 박스탭 — 기본 2열(발달장애인 8칸 MO 시안), 짧은 라벨은 --mo3 로 3열(지역센터 16칸) */
  .rnw-boxtab { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 3.2rem; }
  .rnw-boxtab--mo3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rnw-boxtab > a, .rnw-boxtab > li > a {
    min-height: 4.4rem; padding: 0.96rem 0.64rem; font-size: 1.312rem; gap: 0.56rem;
  }
  .rnw-boxtab .bi { font-size: 1.6rem; }

  /* 오시는 길 지도 — 세로 화면에서 400px 은 한 화면을 다 먹는다 */
  .rnw-map { height: 280px; margin-bottom: 1.92rem; }

  /* 임원 — 1열, 이름이 위로(음수 마진을 되돌린다) */
  .rnw-exec .rnw-dl-body { columns: 1; }
  .rnw-exec .rnw-dl-body > .rnw-dl-tit { height: auto; padding-top: 1.92rem; font-size: 1.68rem; }
  .rnw-exec .rnw-dl-body > .rnw-dl-tit + ul { margin-top: 0; padding: 1.44rem 0 1.92rem; min-height: 0; }

  /* 목표 카드 2x2 · 배지 · 인사말 · 색상 견본 2x2 */
  .rnw-goal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.44rem; }
  .rnw-goal > li { min-height: 12.8rem; padding: 0.96rem 0.8rem 1.6rem; }
  .rnw-goal .rnw-stat-label { font-size: 1.312rem; padding: 0.96rem 0.64rem; margin-bottom: 1.6rem; }
  .rnw-goal .rnw-stat-value { font-size: 2.4rem; }
  .rnw-stat-unit, .rnw-goal .rnw-stat-value + span { font-size: 1.408rem; }

  .rnw-dl--badge { grid-template-columns: 7.2rem minmax(0, 1fr); column-gap: 1.92rem; row-gap: 2.56rem; }
  .rnw-dl--badge .rnw-dl-label {
    width: 5.44rem; height: 5.44rem; font-size: 1.28rem; box-shadow: 0 0 0 0.8rem var(--debc-halo);
  }
  .rnw-dl--badge .rnw-dl-body > .rnw-sub-box { padding: 1.76rem 1.6rem; font-size: 1.472rem; }

  .rnw-greet > .rnw-sub-box:first-child { padding: 2.56rem 2rem; }
  .rnw-greet > .rnw-sub-box:first-child::before { display: none; }
  .rnw-greet > h2 { font-size: 1.92rem; margin-bottom: 2.24rem; }
  .rnw-greet > p { margin-bottom: 2.08rem; }

  .rnw-ci-palette { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; }

  /* 전략목표 — 표를 grid 로 눕히지 않고 간격/크기만 줄인다 */
  .rnw-strategy { border-spacing: 0.96rem 0.8rem; }
  .rnw-strategy thead th {
    height: 16.64rem; padding: 0 0.64rem 4.16rem; font-size: 1.312rem;
    background-image: radial-gradient(circle at 50% 6.24rem,
      var(--debc-navy) 0 4.96rem, var(--debc-halo) 4.96rem 6.24rem, transparent 6.24rem);
  }
  .rnw-strategy thead th::after { bottom: 1.92rem; border-left-width: 0.88rem; border-right-width: 0.88rem; border-top-width: 0.8rem; }
  .rnw-strategy tbody td { height: auto; padding: 0.96rem 0.56rem; font-size: 1.28rem; }

  .rnw-band { padding: 3.2rem 0 3.84rem; margin: 3.2rem 0; }

  /* 알약 통계 가로 유지 모디파이어 — 630 핵심가치 전용(110 통계는 세로가 맞다) */
  .rnw-stat--row { flex-direction: row; align-items: stretch; }
  .rnw-stat--row > li { width: auto; min-height: 7.36rem; padding: 0.8rem 0.32rem; }
  .rnw-stat--row > li + li { margin-left: -2px; margin-top: 0; }
  .rnw-stat--row > li + li::before { left: -0.64rem; top: 50%; transform: translateY(-50%); width: 1.28rem; height: 1.28rem; }
  .rnw-stat--row .rnw-stat-label { font-size: 1.248rem; }
}

/* =====================================================================
   21) 자율공시 T9 「2열 섹션 카드」 (.rnw-disc) — REQ-042 (2026-08-19 WP-F)
   근거: Docs/260806_장기종 리뉴얼 최종 시안/PC/sub/5.정보공개/경영공시/…_경영공시_자율공시.jpg
        (시안분석_서브페이지_전수 §3-7 T9: 섹션 헤더 바 연블루 면 + 가운데 Bold 로마숫자,
         파란 원형 불릿 + Bold 항목, 하위 「- 항목」 + 새 창 아이콘, 첨부 [아이콘] 파일명 날짜 [다운로드], 항목 하단 1px 선)
   마크업: templates/cop/bbs/EgovPblntList.html (사용자) — 콘텐츠 정화기와 무관한 우리 템플릿이라 <i> 아이콘을 쓴다.
   격자: 컨테이너 1600 을 2열(시안 좌 470~628 · 우 666~1135 → 열 간격 약 38px), 좌열 Ⅰ·Ⅲ 우열 Ⅱ·Ⅳ 순(소스 순서 = 시안 순서).
   ===================================================================== */
.rnw-disc {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 3.84rem; row-gap: 4.8rem; margin: 0 0 6.4rem;
}
.rnw-disc-sec { min-width: 0; }
/* 구역 헤더 바 — 연블루 면(실측 #F3F6FD ≈ --debc-halo 와 --debc-panel 사이 → 토큰 --debc-halo) + 아래 2px 진한 선 */
.rnw-disc-head {
  margin: 0 0 0.64rem; padding: 1.68rem 1.6rem; text-align: center;
  background: var(--debc-halo); border-bottom: 2px solid var(--debc-text);
  font-size: 1.84rem; font-weight: 700; color: var(--debc-text); line-height: 1.3;
}
.rnw-disc-empty { padding: 2.24rem 0.8rem; color: var(--debc-text-sub); }
.rnw-disc-list { list-style: none; margin: 0; padding: 0; }
.rnw-disc-item { padding: 1.76rem 0 1.84rem; border-bottom: 1px solid var(--debc-line-strong); }
/* 상위 항목 — 파란 원형 불릿 + Bold */
.rnw-disc-tit {
  position: relative; margin: 0; padding-left: 2.16rem;
  font-size: 1.68rem; font-weight: 700; line-height: 1.5; color: var(--debc-text); word-break: keep-all;
}
.rnw-disc-tit::before {
  content: ""; position: absolute; left: 0.16rem; top: 0.88rem;
  width: 0.88rem; height: 0.88rem; border-radius: 50%; background: var(--debc-primary);
}
.rnw-disc-tit a, .rnw-disc-sub a { color: inherit; text-decoration: none; }
.rnw-disc-tit a:hover, .rnw-disc-tit a:focus,
.rnw-disc-sub a:hover, .rnw-disc-sub a:focus { color: var(--debc-primary); text-decoration: underline; }
/* 새 창 아이콘 — 시안의 작은 사각(외부) 아이콘 자리. 링크 텍스트 뒤에 붙는다 */
.rnw-disc-ext { margin-left: 0.56rem; font-size: .85em; vertical-align: -.05em; opacity: .8; }
/* 하위 항목 — 「- 항목」 */
.rnw-disc-sub { list-style: none; margin: 0.88rem 0 0; padding: 0 0 0 2.48rem; }
.rnw-disc-sub > li { position: relative; padding-left: 1.28rem; margin: 0.72rem 0; font-size: 1.6rem; line-height: 1.5; color: var(--debc-text); }
.rnw-disc-sub > li::before { content: "-"; position: absolute; left: 0; top: 0; color: var(--debc-text-sub); }
/* 첨부 — [아이콘] 파일명 날짜 [다운로드] */
.rnw-disc-files { list-style: none; margin: 1.12rem 0 0; padding: 0 0 0 2.48rem; }
.rnw-disc-files > li { display: flex; align-items: center; flex-wrap: wrap; gap: 0.8rem 1.2rem; margin: 0.64rem 0; font-size: 1.52rem; }
.rnw-disc-fico { font-size: 2.16rem; line-height: 1; color: var(--debc-primary); flex: 0 0 auto; }
.rnw-disc-fnm { color: var(--debc-text); word-break: break-all; }
a.rnw-disc-fnm { text-decoration: none; }
a.rnw-disc-fnm:hover, a.rnw-disc-fnm:focus { color: var(--debc-primary); text-decoration: underline; }
.rnw-disc-fdate { color: var(--debc-text-sub); font-size: 1.44rem; flex: 0 0 auto; }
.rnw-disc-down {
  display: inline-flex; align-items: center; gap: 0.48rem; flex: 0 0 auto;
  padding: 0.448rem 1.12rem; border: 1px solid var(--debc-line-strong); border-radius: 4px;
  background: #fff; color: var(--debc-text); font-size: 1.408rem; line-height: 1.3; text-decoration: none;
}
.rnw-disc-down:hover, .rnw-disc-down:focus { border-color: var(--debc-primary); color: var(--debc-primary); text-decoration: none; }

@media (max-width: 991.98px) {
  .rnw-disc { grid-template-columns: minmax(0, 1fr); row-gap: 3.52rem; }
}
@media (max-width: 767.98px) {
  .rnw-disc-head { font-size: 1.632rem; padding: 1.36rem 1.2rem; }
  .rnw-disc-tit { font-size: 1.568rem; }
  .rnw-disc-sub > li, .rnw-disc-files > li { font-size: 1.44rem; }
}

/* ── 첨부 사전 검사 안내 (2026-08-20) ─────────────────────────────────────
   첨부를 «고르는 순간» 확장자·크기를 알려 주는 한 줄. 색으로만 구분하지 않는다 —
   색을 구분하지 못하는 이용자에게는 아무 뜻이 없어, 앞에 기호를 함께 붙인다. */
.file-precheck-msg { margin: .4rem 0 0; font-size: 1.4rem; line-height: 1.5; }
.file-precheck-msg:empty { display: none; }
.file-precheck-msg.is-ok { color: #1a7f37; }
.file-precheck-msg.is-ok::before { content: "\2713 "; }        /* ✓ */
.file-precheck-msg.is-bad { color: #b42318; font-weight: 600; }
.file-precheck-msg.is-bad::before { content: "\26A0 "; }       /* ⚠ */

/* 첨부 추가 단추 줄 — 단추와 「1 / 2」 표시를 한 줄에 둔다. */
.frm-file-add { display: flex; align-items: center; gap: 1rem; margin-top: .8rem; }
.frm-file-add[hidden] { display: none; }
.frm-file-add .frm-help { margin: 0; }

/* ─────────────────────────────────────────────────────────────────────────
   목록 검색 + 총건수 (참여마당 시안 2026-08-31 — FAQ·Q&A)

   시안은 목록 위에 «분류 + 검색어 + 검색 단추» 한 줄과 「Total N건」을 둔다.
   좁은 화면에서는 검색어 칸이 한 줄을 통째로 쓰게 접는다 —
   셋을 억지로 한 줄에 두면 검색어 칸이 글자 몇 개 폭으로 줄어 쓸 수 없다.
   ───────────────────────────────────────────────────────────────────────── */
.rnw-search { display: flex; gap: 0.8rem; flex-wrap: wrap; margin: 0 0 2.4rem; }
.rnw-search-sel, .rnw-search-inp {
  height: 48px; padding: 0 1.2rem; border: 1px solid var(--debc-line, #d8dce3);
  border-radius: 6px; background: #fff; font-size: 1.6rem; font-family: inherit; color: inherit;
}
.rnw-search-sel { flex: 0 0 auto; min-width: 120px; }
.rnw-search-inp { flex: 1 1 240px; min-width: 0; }
.rnw-search-btn {
  flex: 0 0 auto; height: 48px; padding: 0 2.4rem; border: 0; border-radius: 6px;
  background: var(--debc-primary, #1b5aa8); color: #fff;
  font-size: 1.6rem; font-weight: 600; font-family: inherit; cursor: pointer;
}
.rnw-search-btn:hover { filter: brightness(1.08); }
.rnw-search-sel:focus-visible, .rnw-search-inp:focus-visible, .rnw-search-btn:focus-visible {
  outline: 2px solid var(--debc-primary, #1b5aa8); outline-offset: 2px;
}
.rnw-total { margin: 0 0 1.2rem; font-size: 1.6rem; color: var(--debc-text-sub, #5c6472); }
.rnw-total b { color: var(--debc-primary, #1b5aa8); }
.rnw-empty { margin: 4rem 0; text-align: center; color: var(--debc-text-sub, #5c6472); font-size: 1.6rem; }
@media (max-width: 560px) { .rnw-search-inp { flex: 1 1 100%; } }