@charset "utf-8";
/* ============================================================
 * 수원 주차포탈 고도화 - 공영페이지 공통 서브레이아웃
 * 2026 고도화 : 중간 히어로밴드 + 좌측 LNB 카드 (SIR-04 UI 개편)
 *
 * - common/leftMenu.jsp 가 그리는 서브레이아웃 전용 스타일.
 * - 기존 .sidebar / .content / .lnb 를 재활용하되 반드시
 *   `.psub-body` 하위로만 스코프하여 다른 화면·본문에 영향이 없게 한다.
 * - 마이페이지(mypage.css) 와 동일한 디자인 언어를 psub- 프리픽스로 독립 구현.
 *   (mypage.css 는 신규 화면에서만 로드되므로 공영페이지에서 재사용할 수 없다)
 * ============================================================ */

:root {
  --psub-primary: #1c7ad3;
  --psub-primary-dark: #145ea3;
  --psub-navy: #06377a;
  --psub-navy-light: #0a4d9e;
  --psub-text: #23272f;
  --psub-text-sub: #5b6472;
  --psub-muted: #8a93a0;
  --psub-line: #e4e9f0;
  --psub-white: #fff;
}

/* ------------------------------------------------------------
 * 1. 상단 히어로 밴드 (대분류명 + 경로)
 *    .main 폭에 관계없이 화면 전체폭으로 펼친다.
 * ---------------------------------------------------------- */
.psub-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  display: flex;
  align-items: center;
  justify-content: center;
  /* 상·하 패딩을 같게 두어 타이틀+경로가 밴드 정중앙에 오게 한다.
     좌측 카드의 오버랩은 .psub-body > .sidebar 의 음수 마진으로 처리한다. */
  padding: 54px 40px;
  background: linear-gradient(120deg, var(--psub-navy) 0%, var(--psub-navy-light) 100%);
  overflow: hidden;
  box-sizing: border-box;
}
/* 배경 워터마크 : 수원도시공사 심볼 (흰색 버전) */
.psub-hero::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 6%;
  width: 320px;
  height: 320px;
  margin-top: -160px;
  background: url("/resources/images/common/symbol-suwondc-white.svg") no-repeat center / contain;
  opacity: 0.09;
  pointer-events: none;
}
/* 은은한 광원 */
.psub-hero::after {
  content: "";
  position: absolute;
  top: -160px;
  right: -60px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 68%);
  pointer-events: none;
}
.psub-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  text-align: center;
}
.psub-hero-title {
  margin: 0;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.4px;
  color: #fff;
}
/* 경로(breadcrumb) */
.psub-crumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 0;
  margin: 15px 0 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.82);
}
.psub-crumb > li {
  display: inline-flex;
  align-items: center;
}
.psub-crumb > li + li::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 12px;
  border-top: 1.6px solid rgba(255, 255, 255, 0.6);
  border-right: 1.6px solid rgba(255, 255, 255, 0.6);
  transform: rotate(45deg);
}
.psub-crumb > li:last-child {
  color: #fff;
  font-weight: 500;
}
.psub-crumb .is-home a {
  display: block;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linejoin='round' d='M2.5 7.6 9 2.5l6.5 5.1V15a.5.5 0 0 1-.5.5h-3.6v-4.4H7.6v4.4H4a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------
 * 2. 본문 레이아웃 (좌측 LNB 카드 + 컨텐츠)
 *    기존 .inner.clearfix 에 .psub-body 를 부여한다.
 *    ※ flex 가 아니라 float 로 구성한다.
 *      일부 페이지(saebit 등)는 .content 뒤에 폼/모달/푸터를 .inner 안에
 *      추가로 넣는 비표준 구조라, flex 로 만들면 그것들이 나란한 컬럼이 되어
 *      깨진다. float 는 종전 레이아웃과 동일한 흐름이라 어떤 구성이든 안전하다.
 * ---------------------------------------------------------- */
.main .inner.psub-body {
  display: block;
  width: auto;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 30px 110px;
  box-sizing: border-box;
}
.main .inner.psub-body::after {
  content: "";
  display: block;
  clear: both;
}

/* 좌측 영역 : 기존 .sidebar 를 카드로 승격 (float 유지 + 히어로 오버랩) */
.psub-body > .sidebar {
  display: block;
  float: left;
  width: 262px;
  margin: -70px 0 0;
  padding: 0;
  background: transparent;
  border: 0;
}
/* 본문 영역 : 좌측 카드 폭(262) + 간격(44) 만큼 들여 컨텐츠를 배치.
   .content 뒤에 오는 다른 형제(폼/모달/푸터)는 float 흐름대로 아래에 쌓인다. */
.psub-body .content {
  display: block;
  float: none;
  width: auto;
  min-width: 0;
  margin: 0 0 0 328px; /* 좌측 카드 262 + 간격 66 (더 넓힌 여백) */
  padding-top: 54px;
}

/* ------------------------------------------------------------
 * 3. 좌측 LNB 카드 (.sidebar > .lnb)
 * ---------------------------------------------------------- */
/*
 * ※ 기존 style.css `.sidebar .lnb ...` 규칙(회색칩 background:#f4f5f9,
 *   li margin-bottom:5px 간격, active background:#62a9ec 파란채움)과 특이도가
 *   겹치므로, 셀렉터에 .sidebar 를 포함해 특이도를 한 단계 올리고 잔여 값을
 *   명시적으로 리셋한다. (mypage.css 고도화 LNB 와 동일한 흰카드+헤어라인 룩)
 */
.psub-body .sidebar .lnb {
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: 14px;
  background: var(--psub-white);
  box-shadow: 0 8px 26px rgba(10, 40, 90, 0.14);
  overflow: hidden;
}
.psub-body .sidebar .lnb > li {
  display: block;
  width: 100%;
  margin: 0; /* 기존 margin-bottom:5px (흰색 간격) 제거 */
}
/* 카드 헤더 (대분류명) */
.psub-body .sidebar .lnb > li.title {
  position: relative;
  display: flex;
  align-items: center;
  height: 112px;
  padding: 0 26px;
  background: linear-gradient(125deg, var(--psub-primary) 0%, #17a2e0 100%);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1.25;
  text-align: left;
  overflow: hidden;
}
.psub-body .sidebar .lnb > li.title::before {
  content: "";
  position: absolute;
  top: -54px;
  right: -46px;
  width: 156px;
  height: 156px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}
.psub-body .sidebar .lnb > li.title::after {
  content: "";
  position: absolute;
  right: 22px;
  bottom: -34px;
  width: 78px;
  height: 78px;
  border-radius: 50% 50% 50% 8px;
  background: linear-gradient(160deg, #56d1a4 0%, #23b48a 100%);
  opacity: 0.9;
}
/* 메뉴 항목 : 흰 배경 + 항목 사이 헤어라인 구분선 */
.psub-body .sidebar .lnb > li:not(.title) {
  height: auto;
}
.psub-body .sidebar .lnb > li:not(.title) + li:not(.title) {
  border-top: 1px solid var(--psub-line);
}
.psub-body .sidebar .lnb > li:not(.title) > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  height: auto;
  min-height: 60px;
  padding: 14px 22px;
  background: var(--psub-white); /* 기존 회색칩 #f4f5f9 제거 */
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  color: var(--psub-text);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.psub-body .sidebar .lnb > li:not(.title) > a::after {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-top: 1.8px solid var(--psub-muted);
  border-right: 1.8px solid var(--psub-muted);
  transform: rotate(45deg);
  transition: border-color 0.15s;
}
.psub-body .sidebar .lnb > li:not(.title) > a:hover,
.psub-body .sidebar .lnb > li:not(.title) > a:focus {
  background: #f4f8fd;
  color: var(--psub-primary);
}
.psub-body .sidebar .lnb > li:not(.title) > a:hover::after,
.psub-body .sidebar .lnb > li:not(.title) > a:focus::after {
  border-color: var(--psub-primary);
}
/* 활성 : 파란 채움 아님, 흰 배경 + 파란 글씨 (기존 #62a9ec 채움 제거) */
.psub-body .sidebar .lnb > li:not(.title).active > a {
  background: var(--psub-white);
  color: var(--psub-primary);
  font-weight: 600;
}
.psub-body .sidebar .lnb > li:not(.title).active > a::after {
  border-color: var(--psub-primary);
  border-width: 2.2px;
}

/* ------------------------------------------------------------
 * 4. 컨텐츠 상단 서브헤더 톤 정리
 *    (각 페이지의 .subheader 는 그대로 두되 히어로와 톤을 맞춘다)
 * ---------------------------------------------------------- */
/* 본문 최상단의 검정 페이지 제목(.subheader)은 히어로밴드 타이틀+경로와
   완전히 중복되므로 숨긴다. (모든 공영페이지 공통)
   ※ 직계(> )가 아니라 후손( )으로 둔다: .content 를 <form> 으로 감싸
     .content > form > .subheader 구조인 게시판 목록 등에서도 숨겨야 하기 때문. */
.psub-body .content .subheader {
  display: none;
}

/* ------------------------------------------------------------
 * 4-0. 본문 가독성/여백 (히어로와 톤을 맞춰 넉넉한 리듬)
 *   ※ 반드시 .psub-body .content 스코프로만 적용 — 폼/버튼/테이블 등
 *     레이아웃 요소는 건드리지 않고 텍스트 리듬만 개선한다.
 *     기존 style.css 값(dt 16px/회색, dd 14px/1.6, 소제목 여백 0)이 너무
 *     빽빽해 "허접해" 보이던 문제를 해소한다.
 * ---------------------------------------------------------- */
.psub-body .content {
  font-size: 16px;
  line-height: 1.7;
  color: #3a4150;
}
.psub-body .content .subheader.has-bdb {
  border-bottom-color: #e4e9f0;
}

/* 소제목 : 위아래로 충분히 띄워 문단을 분리한다 */
.psub-body .content .article-title {
  margin: 46px 0 20px;
  font-size: 23px;
  font-weight: 600;
  line-height: 1.35;
}
.psub-body .content .conlist > .article-title:first-child,
.psub-body .content .article-title.pdt20 {
  margin-top: 6px;
}

/* dl 그룹 사이 간격 확대 */
.psub-body .content .common-dllist {
  margin-top: 30px;
}
.psub-body .content .common-dllist.mt15 {
  margin-top: 36px;
}
.psub-body .content .common-dllist.mt5 {
  margin-top: 24px;
}

/* 항목 제목 dt : 진하게·크게 하여 위계를 준다 */
.psub-body .content .common-dllist dt {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.6;
  color: #2b3140;
  margin-bottom: 12px;
}
.psub-body .content .common-dllist dt.has-circle {
  padding-left: 18px;
}
.psub-body .content .common-dllist dt.has-circle:before {
  top: 9px;
  width: 8px;
  height: 8px;
  background: var(--psub-primary);
}

/* 설명 dd : 글자·행간·항목 간격을 넉넉히 */
.psub-body .content .common-dllist dd {
  font-size: 16px;
  line-height: 1.8;
  color: #4a5160;
  padding-left: 18px;
  margin-bottom: 9px;
}
.psub-body .content .common-dllist dd:last-child {
  margin-bottom: 0;
}

/* 2026 수정요청 : 정기권 신청 동의 질문 문구 가독성 향상(폰트 확대) */
.psub-body .content .checkboxTxt {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
}
.psub-body .content .checkboxTxtYn {
  font-size: 18px;
}
/* 2026 수정요청 : 신청서 하단 개인정보 동의 문구 — 모바일에서 10px로 너무 작음 → 확대 */
@media screen and (max-width: 768px) {
  .psub-body .content .form-check label > span { font-size: 15px; }
}

/* 본문 목록/안내문 행간·간격 (마커·들여쓰기는 건드리지 않음) */
.psub-body .content .notice {
  margin: 20px 0;
}
.psub-body .content .notice ul > li,
.psub-body .content dd ul > li,
.psub-body .content ul.ul > li {
  line-height: 1.8;
  margin-bottom: 7px;
}
.psub-body .content .notice ul > li:last-child,
.psub-body .content dd ul > li:last-child,
.psub-body .content ul.ul > li:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------
 * 4-0b. 안내 박스(.infoArea dl) : 점선 테두리 → 깔끔한 카드
 *   기존 add.css: border:1px dotted #777, dt 는 상단 중앙 pill.
 *   → 연한 배경 + 둥근 모서리 + 왼쪽 포인트바 카드로 교체, dt pill 은 정돈.
 * ---------------------------------------------------------- */
.psub-body .content .infoArea dl {
  border: 1px solid #e4e9f0;
  border-left: 4px solid var(--psub-primary);
  border-radius: 12px;
  background: #fff;
  padding: 42px 30px 28px;
  box-shadow: 0 2px 12px rgba(23, 43, 77, 0.05);
}
@media screen and (max-width: 768px) {
  /* 2026 수정요청 8 : 좁은 화면에서 상단 pill 제목이 2줄이 되면 본문(캡션)과 겹치던 문제
     → 모바일에선 pill을 카드 테두리에 걸치지 않고 흐름 안(정적)에 중앙 배치해 겹침을 원천 차단 */
  .psub-body .content .infoArea dl {
    padding-top: 22px;
  }
  .psub-body .content .infoArea dl dt {
    position: static;
    top: 0;
    left: auto;
    transform: none;
    display: table;
    margin: 0 auto 16px;
    max-width: calc(100% - 20px);
  }
}
.psub-body .content .infoArea dl + dl {
  margin-top: 38px;
}
.psub-body .content .infoArea dl dt {
  border: 1px solid #cfe0f3;
  border-radius: 999px;
  background: #fff;
  color: var(--psub-text);
  min-width: 0;
  padding: 8px 26px;
  font-size: 16px;
  font-weight: 700;
  top: -19px;
  box-shadow: 0 4px 14px rgba(10, 40, 90, 0.1);
}
/* 카드 내부 표는 점선 대신 옅은 실선으로 */
.psub-body .content .infoArea table thead tr th,
.psub-body .content .infoArea table tbody tr td {
  border-color: #dbe3ee;
}

/* ------------------------------------------------------------
 * 4-0d. 유의사항 콜아웃 (.notice) : 밋밋한 빨간 텍스트 → 정돈된 안내 박스
 *   좌측 포인트바 + ! 아이콘 + 연한 배경. (본문 최상단 시작을 깔끔하게)
 * ---------------------------------------------------------- */
.psub-body .content section.notice,
.psub-body .content .conlist > .notice,
.psub-body .content .infoArea > .notice {
  position: relative;
  margin: 0 0 28px;
  padding: 17px 24px 17px 54px;
  background: #fbf7ef;
  border: 1px solid #f0e6d2;
  border-left: 3px solid #e6a23a;
  border-radius: 10px;
  color: #6b5a3c;
  font-size: 17px;
}
.psub-body .content section.notice::before,
.psub-body .content .conlist > .notice::before,
.psub-body .content .infoArea > .notice::before {
  content: "!";
  position: absolute;
  left: 18px;
  top: 17px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e6a23a;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}
.psub-body .content section.notice ul,
.psub-body .content .conlist > .notice ul,
.psub-body .content .infoArea > .notice ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.psub-body .content section.notice li,
.psub-body .content .conlist > .notice li,
.psub-body .content .infoArea > .notice li {
  line-height: 1.7;
  color: #6b5a3c;
  /* 2026 수정요청 1: 유의사항 가시성 확대 (폰트↑ + 볼드) */
  font-size: 17px;
  font-weight: 600;
}
.psub-body .content section.notice li + li,
.psub-body .content .conlist > .notice li + li,
.psub-body .content .infoArea > .notice li + li {
  margin-top: 10px;
}

/* 2026 수정요청 2: 조회화면 상단 안내문(.common-article-info) 폰트 확대
 *   기존 14px/#666 → 잘 안 보인다는 요청. 사전결제/정기권/대기자/미납 조회 공통 일괄. */
.psub-body .content .common-article-info {
  font-size: 16px;
  line-height: 1.6;
  color: #555;
}

/* ------------------------------------------------------------
 * 4-0e. 조회 페이지 : 검색 폼(.form-view) + 결과 표(.board-view) 정돈
 *   기존 파란 라벨셀 표/밋밋한 표 → 깔끔한 검색 카드 + 정돈된 결과 표.
 * ---------------------------------------------------------- */
/* 검색 입력 / 합계 표 → 흰 카드 */
.psub-body .content .contable.form-view {
  border: 1px solid #e4e9f0;
  border-radius: 12px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 10px rgba(23, 43, 77, 0.04);
}
.psub-body .content .contable.form-view > tbody > tr > th {
  height: 62px;
  background: #f4f7fb;
  color: #2b3140;
  font-weight: 600;
  font-size: 16px;
  border: 0;
  border-right: 1px solid #e9edf3;
}
.psub-body .content .contable.form-view > tbody > tr > td {
  background: #fff;
  border: 0;
  padding: 15px 20px;
}
.psub-body .content .contable.form-view > tbody > tr + tr > th,
.psub-body .content .contable.form-view > tbody > tr + tr > td {
  border-top: 1px solid #eef1f5;
}

/* 입력창 */
.psub-body .content .form-text {
  height: 46px;
  border: 1px solid #cfd8e3;
  border-radius: 8px;
  padding: 0 14px;
  font-size: 16px;
  color: #23272f;
  background: #fff;
  box-sizing: border-box;
}
.psub-body .content .form-btn-box .form-text {
  max-width: 360px;
}
.psub-body .content .form-text:focus {
  border-color: var(--psub-primary);
  box-shadow: 0 0 0 3px rgba(28, 122, 211, 0.12);
  outline: 0;
}
/* 조회 버튼 (검색창 옆) */
.psub-body .content .form-btn-box .btn {
  height: 46px;
  border-radius: 8px;
  padding: 0 26px;
  font-size: 16px;
  font-weight: 600;
  line-height: 44px;
}

/* 결과/데이터 표 (모든 .contable, 검색카드 form-view 제외) */
.psub-body .content .contable > thead > tr > th {
  height: 52px;
  background: linear-gradient(180deg, #2f86d8 0%, #1c7ad3 100%);
  font-size: 16px;
  font-weight: 500;
  border-right: 1px solid rgba(255, 255, 255, 0.28);
  border-bottom: 0;
}
.psub-body .content .contable > thead > tr.has-bdt > th {
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}
.psub-body .content .contable:not(.form-view) > tbody > tr > td {
  height: auto;
  padding: 13px 15px;
  border-top: 0;
  border-bottom: 1px solid #eef1f5;
  border-right: 1px solid #eef1f5;
  color: #3a4150;
}
.psub-body .content .contable:not(.form-view) > tbody > tr:last-child > td {
  border-bottom: 0;
}
.psub-body .content .contable:not(.form-view) > tbody.hover > tr:hover > td {
  background: #f4f8fd;
}
/* 데이터 없음 : 과한 여백 축소 + 톤다운 */
.psub-body .content .contable > tbody > tr.nodata > td {
  padding: 60px 10px;
  color: #9aa3b0;
  font-size: 15px;
}

/* ------------------------------------------------------------
 * 4-0i. 게시판 목록(.psub-board) : 딱딱한 표 → 심플 모던 리스트
 *   제목을 크게, 작성자·작성일자·조회수는 하단 메타로. 데이터는 그대로 유지.
 * ---------------------------------------------------------- */
.psub-body .content .psub-board {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--psub-primary);
}
.psub-body .content .psub-board-item {
  border-bottom: 1px solid #eef1f5;
}
.psub-body .content .psub-board-item > a {
  display: block;
  padding: 20px 10px;
  cursor: pointer;
  transition: background 0.15s;
}
.psub-body .content .psub-board-item > a:hover,
.psub-body .content .psub-board-item > a:focus {
  background: #f7fafd;
}
.psub-body .content .psub-board-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.psub-body .content .psub-board-no {
  flex: 0 0 auto;
  min-width: 30px;
  font-size: 14px;
  font-weight: 600;
  color: #a7afbb;
  text-align: center;
}
.psub-body .content .psub-board-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--psub-text);
  word-break: keep-all;
}
.psub-body .content .psub-board-title .fa {
  margin-left: 6px;
  font-size: 13px;
  color: var(--psub-primary);
}
.psub-body .content .psub-board-item > a:hover .psub-board-title {
  color: var(--psub-primary);
}
.psub-body .content .psub-board-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
  padding-left: 44px;
  font-size: 14px;
  color: #8a93a0;
}
.psub-body .content .psub-board-meta .sep {
  color: #d4d9e0;
}
.psub-body .content .psub-board-meta .views {
  color: #6b7482;
}
/* 데이터 없음 */
.psub-body .content .psub-board-empty {
  padding: 70px 10px;
  text-align: center;
  color: #9aa3b0;
  font-size: 15px;
  border-bottom: 1px solid #eef1f5;
}
@media screen and (max-width: 768px) {
  .psub-body .content .psub-board-item > a {
    padding: 16px 6px;
  }
  .psub-body .content .psub-board-title {
    font-size: 16px;
  }
  .psub-body .content .psub-board-meta {
    padding-left: 44px;
    font-size: 13px;
  }
  /* 2026 수정요청 8 : 게시판 검색 유틸(우상단 고정폭 absolute)이 모바일에서 가로로 넘치는 문제
     → 제목 아래 전체폭으로 흐르게 하고, 입력창이 남는 폭을 채우도록 */
  .psub-body .content .conheader.has-util .conheader-search-util {
    position: static;
    width: 100%;
    margin-top: 12px;
    gap: 8px;
  }
  .psub-body .content .conheader.has-util .selectbox {
    flex: 0 0 auto;
  }
  .psub-body .content .conheader.has-util .form-group.has-btn {
    position: relative;
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 0;
  }
}

/* ------------------------------------------------------------
 * 4-0j. 게시판 상세(.psub-article) : 데이터 표 → 깔끔한 아티클 뷰
 *   제목 + 메타(작성자·작성일자) + 첨부 칩 + 본문. 데이터 그대로.
 * ---------------------------------------------------------- */
.psub-body .content .psub-article {
  border: 0;
}
/* 제목 영역 : 가로 헤더 밴드 (제목 왼쪽 + 메타 오른쪽), 수원 블루 상단 라인 */
.psub-body .content .psub-article-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 28px;
  padding: 18px 22px;
  background: #f2f7fd;
  border-top: 2px solid var(--psub-primary);
  border-bottom: 1px solid #dbe4ee;
}
.psub-body .content .psub-article-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: #163a63;
  word-break: keep-all;
  overflow-wrap: anywhere; /* 긴 제목(공백 없는 토큰 포함)도 밴드 밖으로 넘치지 않게 */
}
.psub-body .content .psub-article-meta {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 22px;
  font-size: 14px;
  color: #5b6472;
}
.psub-body .content .psub-article-meta .lbl {
  font-style: normal;
  color: #9aa3b0;
  margin-right: 6px;
}
.psub-body .content .psub-article-files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 22px 0;
}
.psub-body .content .psub-file {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid #d7e6fa;
  border-radius: 8px;
  font-size: 14px;
}
.psub-body .content .psub-file .fa {
  color: var(--psub-primary);
}
.psub-body .content .psub-file a {
  color: var(--psub-primary-dark);
  text-decoration: none;
}
.psub-body .content .psub-file a:hover {
  text-decoration: underline;
}
.psub-body .content .psub-article-body {
  padding: 32px 22px 42px;
  font-size: 16px;
  line-height: 1.8;
  color: #3a4150;
  min-height: 180px;
  word-break: break-word;
  border-bottom: 1px solid #e4e9f0; /* 본문 끝 구분선 */
}
.psub-body .content .psub-article-body img {
  max-width: 100%;
  height: auto;
}
/* 2026 수정요청 : 이미지에는 max-width 가 걸려 있는데 표에는 없어,
   에디터로 작성한 공지 본문의 표가 밴드 밖으로 넘치던 문제.
   본문에는 래퍼를 끼울 수 없으므로(관리자 입력 HTML) 본문 자체가
   넘침을 흡수하게 하고, 표에도 최대 폭을 준다.
   스마트에디터 붙여넣기 표(.se-table-container)도 같이 처리한다. */
.psub-body .content .psub-article-body table {
  max-width: 100%;
}
.psub-body .content .psub-article-body {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.psub-body .content .se-table-container {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* 2026 수정요청 : 붙여넣기 본문의 문단에 line-height 가 1 미만으로 박혀 있다
   (정기권대기 신청 36곳, 0.0875 같은 값). PC 에서는 한 줄에 들어가 티가 안 나지만
   모바일에서 줄바꿈이 생기는 순간 글자가 위아래로 겹친다.
   인라인 36곳을 고치는 대신 모바일에서만 최소 줄간격을 보장한다. */
@media screen and (max-width: 768px) {
  .psub-body .content .se-module-text p {
    line-height: 1.6 !important;
  }
}
@media screen and (max-width: 768px) {
  /* 제목 밴드를 세로로 쌓고 메타(작성자·작성일·조회수)를 전체 폭으로 → 우측 넘침 방지 */
  .psub-body .content .psub-article-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 14px;
  }
  .psub-body .content .psub-article-title {
    font-size: 20px;
    width: 100%;
  }
  .psub-body .content .psub-article-meta {
    width: 100%;
    gap: 4px 18px;
  }
  .psub-body .content .psub-article-body {
    padding: 24px 2px 32px;
  }
}

/* ------------------------------------------------------------
 * 4-0f. 절차 스텝 체인(.psub-steps) : "A → B → C" 텍스트 절차 도형화
 *   번호 배지 + 화살표로 이어지는 박스. 데스크톱 가로 / 모바일 세로.
 * ---------------------------------------------------------- */
.psub-body .content .psub-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px 6px;
  margin: 12px 0 8px;
}
.psub-body .content .psub-step {
  flex: 1 1 0;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-align: center;
  padding: 16px 14px;
  background: #f4f8fd;
  border: 1px solid #dbe9fb;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: #1f3a5f;
  word-break: keep-all;
}
.psub-body .content .psub-step-no {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--psub-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
}
.psub-body .content .psub-step-arrow {
  flex: 0 0 auto;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
}
.psub-body .content .psub-step-arrow::before {
  content: "";
  width: 9px;
  height: 9px;
  border-top: 2px solid #9cb8dc;
  border-right: 2px solid #9cb8dc;
  transform: rotate(45deg);
}
/* 스텝 담당자 배지 (예: 신청자 / 도시공사) */
.psub-body .content .psub-step-by {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 11px;
  font-size: 12px;
  font-weight: 600;
  font-style: normal;
  line-height: 1.6;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #cfe0f3;
  color: var(--psub-primary);
}
/* 2026 수정요청 : 5단계 체인이 두 줄로 접히면서 화살표가 줄 끝에 고아로 남던 문제.
   가로 체인에는 약 870px(단계 150px × 5 + 화살표·간격)의 내용폭이 필요하다.
   내용폭은 사이드바 유무로 갈린다.
     - 1024px 이하 : 사이드바 숨김 → 내용폭 ≈ 화면폭  → 910px 미만이면 부족
     - 1025px 이상 : 사이드바 복귀 → 내용폭 = 화면폭 − 약 328px → 1199px 미만이면 부족
   두 구간 모두 세로로 쌓아 고아 화살표를 없앤다. (가로가 실제로 들어가는
   910~1024px 구간은 기존대로 가로 체인 유지) */
@media screen and (max-width: 909px),
       screen and (min-width: 1025px) and (max-width: 1198px) {
  .psub-body .content .psub-steps {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .psub-body .content .psub-step {
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    text-align: left;
  }
  .psub-body .content .psub-step-arrow {
    align-self: center;
    height: 18px;
    margin: 2px 0;
    transform: rotate(90deg);
  }
}

/* ------------------------------------------------------------
 * 4-0g. 반응형 컬럼 카드(.psub-cols) : 3열 표(월별 운영 등) 대체
 *   PC 다열 / 모바일 1열로 자동 스택. (좁은 화면에서 표가 깨지는 문제 해소)
 * ---------------------------------------------------------- */
.psub-body .content .psub-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 8px 0;
}
.psub-body .content .psub-cols.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
.psub-body .content .psub-col {
  border: 1px solid #dbe9fb;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.psub-body .content .psub-col-head {
  padding: 15px 16px;
  background: #eef5fd;
  border-bottom: 1px solid #dbe9fb;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  color: #163a63;
}
.psub-body .content .psub-col-head span {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  font-weight: 500;
  color: #5b6472;
}
.psub-body .content .psub-col-body {
  padding: 18px 16px;
  text-align: center;
  font-size: 15px;
  line-height: 1.7;
  color: #3a4150;
  word-break: keep-all;
}
@media screen and (max-width: 768px) {
  .psub-body .content .psub-cols,
  .psub-body .content .psub-cols.cols-2 {
    grid-template-columns: 1fr;
  }
}

/* 카드 상단 중앙 캡션 (pill 제목 아래 보조 문구) */
.psub-body .content .psub-cap {
  margin: 2px 0 16px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: #163a63;
  word-break: keep-all;
}

/* ------------------------------------------------------------
 * 4-0h. 절차 표(.psub-proc) : 다단계 절차를 한 줄 표로 (기존형, 깔끔)
 *   좁은 화면에서는 가로 스크롤(.psub-scroll)로 한 줄 유지.
 * ---------------------------------------------------------- */
.psub-body .content .psub-scroll {
  overflow-x: visible;
  margin: 10px 0;
}
@media screen and (max-width: 768px) {
  .psub-body .content .psub-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
.psub-body .content .psub-proc {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}
.psub-body .content .psub-proc td {
  border: 1px solid #dbe9fb;
  padding: 14px 6px;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.45;
  color: #3a4150;
  word-break: keep-all;
}
.psub-body .content .psub-proc tr:first-child td {
  background: #eef5fd;
  font-weight: 600;
  color: #163a63;
}
.psub-body .content .psub-proc tr + tr td {
  font-size: 13px;
  color: #5b6472;
}
@media screen and (max-width: 768px) {
  .psub-body .content .psub-proc {
    min-width: 620px;
  }
}

/* ------------------------------------------------------------
 * 4-0c. 정의 카드(.psub-define) : "OOO이란?" 소개 블록 전용
 *   따뜻한 베이지 배경 + 좌측 아이콘 + 제목/설명 + 하단 빗금 장식.
 * ---------------------------------------------------------- */
.psub-body .content .psub-define {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 26px;
  margin: 6px 0 32px;
  padding: 30px 36px 34px;
  /* 수원 포탈 블루 컨셉에 맞춘 연한 블루 카드 */
  background: linear-gradient(180deg, #f2f8fe 0%, #eaf3fd 100%);
  border: 1px solid #dbe9fb;
  border-radius: 14px;
  overflow: hidden;
}
/* 하단 빗금 장식 (블루) */
.psub-body .content .psub-define::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  background: repeating-linear-gradient(-45deg, #bcd7f5 0, #bcd7f5 1.5px, transparent 1.5px, transparent 7px);
  opacity: 0.9;
}
.psub-body .content .psub-define-ico {
  flex: 0 0 auto;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.psub-body .content .psub-define-ico svg {
  width: 60px;
  height: 60px;
  fill: none;
  stroke: var(--psub-primary);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.psub-body .content .psub-define-body {
  min-width: 0;
  padding-top: 2px;
}
.psub-body .content .psub-define-tit {
  display: block;
  font-size: 21px;
  font-weight: 700;
  color: #163a63;
  margin-bottom: 12px;
  word-break: keep-all;
}
.psub-body .content .psub-define-desc {
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 1.75;
  color: #4a5566;
  word-break: keep-all;
}
.psub-body .content .psub-define-desc + .psub-define-desc {
  margin-top: 8px;
}
@media screen and (max-width: 768px) {
  .psub-body .content .psub-define {
    flex-direction: column;
    gap: 14px;
    padding: 22px 20px 26px;
  }
  .psub-body .content .psub-define-ico {
    width: 54px;
    height: 54px;
  }
  .psub-body .content .psub-define-ico svg {
    width: 48px;
    height: 48px;
  }
  .psub-body .content .psub-define-tit {
    font-size: 19px;
  }
}

/* ------------------------------------------------------------
 * 4-1. 단계 플로우 (아이콘 원형 + 화살표) — 안내 절차 도형화
 *   데스크톱: 가로 스텝 + 화살표 / 모바일: 세로 스택 + 아래 화살표
 * ---------------------------------------------------------- */
.psub-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 4px 2px;
  margin: 10px 0 6px;
}
.psub-flow-step {
  flex: 1 1 0;
  min-width: 128px;
  max-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px 4px;
}
.psub-flow-ico {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: #e9f1fb;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.psub-flow-ico svg {
  width: 46px;
  height: 46px;
  fill: none;
  stroke: #2b3038;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.psub-flow-tit {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--psub-text);
  margin-bottom: 8px;
  word-break: keep-all;
}
.psub-flow-tit span {
  font-weight: 600;
}
.psub-flow-desc {
  display: block;
  font-size: 15px;
  line-height: 1.5;
  color: var(--psub-text-sub);
  word-break: keep-all;
}
.psub-flow-arrow {
  flex: 0 0 auto;
  align-self: flex-start;
  width: 20px;
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.psub-flow-arrow::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-top: 2.4px solid #b9c2cf;
  border-right: 2.4px solid #b9c2cf;
  transform: rotate(45deg);
}

/* 2026 수정요청 : 고지절차 5단계 아이콘 플로우도 같은 이유로 두 줄로 접히며
   화살표가 줄 끝에 남던 문제. 가로 배치에 약 736px 의 내용폭이 필요하다.
   1024px 이하는 기존 900px 기준으로 충분하고, 사이드바가 돌아오는
   1025~1103px 구간(내용폭 약 657~735px)이 사각지대였다. */
@media screen and (max-width: 900px),
       screen and (min-width: 1025px) and (max-width: 1103px) {
  .psub-flow {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-width: 440px;
    margin: 10px auto 6px;
  }
  .psub-flow-step {
    /* 아이콘(좌) | 제목(위)·설명(아래) 을 그리드로 고정해 행마다 열이 어긋나지 않게 함
       (제목 길이가 달라도 아이콘·제목·설명이 각각 같은 열에서 정렬) */
    flex: none;
    max-width: none;
    display: grid;
    grid-template-columns: 74px 1fr;
    grid-template-areas:
      "ico tit"
      "ico desc";
    align-items: center;
    column-gap: 18px;
    row-gap: 2px;
    text-align: left;
    padding: 12px 6px;
  }
  .psub-flow-ico {
    grid-area: ico;
    align-self: center;
    width: 74px;
    height: 74px;
    margin-bottom: 0;
    flex: 0 0 auto;
  }
  .psub-flow-ico svg {
    width: 34px;
    height: 34px;
  }
  .psub-flow-tit {
    grid-area: tit;
    align-self: end;
    margin-bottom: 0;
  }
  .psub-flow-desc {
    grid-area: desc;
    align-self: start;
  }
  .psub-flow-arrow {
    align-self: flex-start;
    width: 74px;
    height: 20px;
  }
  .psub-flow-arrow::before {
    transform: rotate(135deg); /* 아래 방향 */
  }
}

/* ------------------------------------------------------------
 * 5. 반응형 : 좌측메뉴 → 가로 스크롤 탭 (숨기지 않는다)
 * ---------------------------------------------------------- */
@media screen and (max-width: 1024px) {
  .psub-hero {
    padding: 32px 20px;
  }
  .psub-hero-title {
    font-size: 27px;
  }
  .main .inner.psub-body {
    padding: 0 24px 60px;
  }
  /* 모바일에서는 좌측 LNB 를 노출하지 않는다.
     - 기존 사이트도 .sidebar 를 ≤1024 에서 display:none 했고(상단 GNB로 이동),
       가로 탭은 메뉴가 많을수록 지저분하며 히어로 아래 빈 공백을 유발했다.
     - 사이드바를 흐름에서 완전히 제거하고 컨텐츠를 히어로 바로 아래 전체폭으로 둔다. */
  .psub-body > .sidebar {
    display: none;
  }
  .psub-body .content {
    float: none;
    width: 100%;
    margin-left: 0;
    padding-top: 24px;
  }
}

@media screen and (max-width: 768px) {
  .psub-hero {
    padding: 26px 16px;
  }
  .psub-hero::before {
    width: 190px;
    height: 190px;
    margin-top: -95px;
    right: -30px;
  }
  .psub-hero-title {
    font-size: 23px;
  }
  .psub-crumb {
    margin-top: 12px;
    font-size: 13px;
  }
  .psub-crumb > li + li::before {
    margin: 0 8px;
  }
  .main .inner.psub-body {
    padding: 0 16px 46px;
  }
}

/* ------------------------------------------------------------
 * 4-0k. 절차 플로우(.psub-procflow) : 절차 표 → 반응형 도형 플로우
 *   PC = 가로 카드체인 + 화살표 / 모바일 = 세로 스택 + 아래 화살표 (이미지 없이 CSS만)
 *   각 카드 = 담당(신청자/도시공사) 배지 + 단계명. (2026 수정요청 4.1 / 5.1)
 * ---------------------------------------------------------- */
.psub-body .content .psub-procflow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 8px 2px;
  margin: 14px 0 8px;
}
.psub-body .content .psub-procflow-step {
  flex: 1 1 0;
  min-width: 104px;
  display: flex;
}
.psub-body .content .psub-procflow-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 88px;
  padding: 13px 10px;
  border: 1px solid #cfe0f3;
  border-radius: 12px;
  background: #f4f9ff;
  text-align: center;
}
.psub-body .content .psub-procflow-actor {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.psub-body .content .psub-procflow-actor.is-user {
  background: #e5f0fd;
  color: #1c6fd0;
}
.psub-body .content .psub-procflow-actor.is-corp {
  background: #eef0f4;
  color: #566274;
}
.psub-body .content .psub-procflow-actor.is-none {
  visibility: hidden;
}
.psub-body .content .psub-procflow-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: #163a63;
  word-break: keep-all;
}
.psub-body .content .psub-procflow-arrow {
  flex: 0 0 auto;
  align-self: center;
  width: 18px;
  text-align: center;
  color: #9cbce4;
}
.psub-body .content .psub-procflow-arrow::before {
  content: "\203A"; /* › */
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .psub-body .content .psub-procflow {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .psub-body .content .psub-procflow-step {
    min-width: 0;
    width: 100%;
  }
  .psub-body .content .psub-procflow-box {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    min-height: 0;
    padding: 12px 14px;
    text-align: left;
  }
  .psub-body .content .psub-procflow-actor {
    /* 담당 배지 폭을 고정해 단계명이 모두 같은 열에서 시작하도록 정렬
       (신청자·도시공사 글자수 차이로 어긋나던 것 방지) */
    flex: 0 0 auto;
    width: 72px;
    min-width: 72px;
    padding-left: 4px;
    padding-right: 4px;
    text-align: center;
  }
  .psub-body .content .psub-procflow-actor.is-none {
    /* 담당 배지가 없는 단계(예: 정기권 사용개시)도 배지 폭만큼 자리를 유지해
       다른 단계의 단계명과 좌측 정렬을 맞춘다 (숨기되 공간은 차지) */
    display: inline-block;
    visibility: hidden;
  }
  .psub-body .content .psub-procflow-name {
    text-align: left;
  }
  .psub-body .content .psub-procflow-arrow {
    width: 100%;
    align-self: auto;
    margin: 3px 0;
    /* 글자 기준 높이가 사라지므로 화살표가 차지할 높이를 직접 잡아준다 */
    height: 14px;
    color: #7ba6dd;
  }
  /* 2026 수정요청 : 기존에는 아래방향 화살표를 ⌄(U+2304) 글자로 그렸는데,
     이 문자는 한글 기본 폰트(맑은 고딕·애플 산돌고딕 등)에 없어서
     기기·브라우저에 따라 아무것도 안 보이거나 네모(두부)로 나온다.
     실제로 단계 6개 중 뒤쪽 화살표들이 보이지 않았다.
     글자 대신 테두리로 직접 그려 어디서나 동일하게 보이게 한다.
     (이 파일 설계 주석의 "이미지 없이 CSS만" 방침과도 맞는다) */
  .psub-body .content .psub-procflow-arrow::before {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    margin: 0 auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
  }
}

/* ------------------------------------------------------------
 * 4-0l. 조회/신청 세그먼트 탭(.psub-seg) : 크게 눈에 띄는 상단 탭
 * ---------------------------------------------------------- */
.psub-body .content .psub-seg {
  display: flex;
  gap: 8px;
  margin: 6px 0 28px;
  padding: 6px;
  background: #eef2f7;
  border: 1px solid #e1e7ef;
  border-radius: 14px;
}
.psub-body .content .psub-seg-btn {
  flex: 1 1 0;
  padding: 17px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: #6b7482;
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.psub-body .content .psub-seg-btn:hover {
  color: var(--psub-primary);
}
.psub-body .content .psub-seg-btn.is-active {
  background: linear-gradient(180deg, #2f86d8 0%, #1c7ad3 100%);
  color: #fff;
  box-shadow: 0 6px 16px rgba(28, 122, 211, 0.35);
}
@media screen and (max-width: 768px) {
  .psub-body .content .psub-seg-btn { font-size: 16px; padding: 14px 8px; }
}

/* 4-0m. 신청 스텝(.apply-step / .apply-steps) : 한 단계씩 진행 */
.psub-body .content .apply-steps {
  display: flex;
  gap: 8px;
  margin: 6px 0 26px;
  padding: 0;
  list-style: none;
}
.psub-body .content .apply-steps > li {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 8px;
  border-radius: 10px;
  background: #f1f4f8;
  color: #9aa3b0;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  word-break: keep-all;
}
.psub-body .content .apply-steps > li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #c8d0da;
  color: #fff;
  font-size: 13px;
}
.psub-body .content .apply-steps > li.is-active {
  background: #eaf3fd;
  color: var(--psub-primary);
}
.psub-body .content .apply-steps > li.is-active > span { background: var(--psub-primary); }
.psub-body .content .apply-steps > li.is-done { background: #e7f7f1; color: #17a673; }
.psub-body .content .apply-steps > li.is-done > span { background: #17a673; }
.psub-body .content .apply-step-nav {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 26px;
}
.psub-body .content .apply-step-nav .btn { min-width: 170px; }
.psub-body .content .apply-step .divBorder {
  max-height: 360px;
  overflow-y: auto;
}
@media screen and (max-width: 768px) {
  .psub-body .content .apply-steps > li { flex-direction: column; gap: 4px; font-size: 12px; }
  .psub-body .content .apply-step-nav .btn { min-width: 0; flex: 1; }
}

/* 신청 스텝: 단계별로 개별 동의를 받는 구조라 '전체동의'는 숨긴다
   (전체동의를 누르면 뒤 단계 동의까지 한 번에 체크돼 단계별 동의 취지가 무너지므로) */
.psub-body .content .apply-step .allCheck { display: none; }

/* 2026 수정요청 : 공영페이지(.psub-body .content) 데이터 표의 모바일 대응이
   "열 폭 해제 + 글자 축소" 뿐이라, 열이 4개만 넘어가도 머리글이 글자 단위로
   쪼개지고(예: 신청 / 공영주 / 차장) 표 오른쪽이 잘린다.
   style.css:2183 의 .m-colgroup > col{width:auto} 는 열 폭 고정을 풀어주지만,
   표가 화면 안에 억지로 들어가는 것 자체는 막지 못하기 때문이다.

   머리글이 있는 표(데이터 표)에 한해 가로로 밀어 볼 수 있게 한다.
   줄바꿈 금지는 머리글에만 건다. 머리글은 전부 8자 이하라 이것만으로
   각 열의 최소 폭이 잡히고, 본문 셀의 긴 문장은 그대로 줄바꿈된다.
   (정기권 조회/결제·대기자 명단·추첨결과, 미납 조회, 쿠폰·질문 목록,
    주차장 검색, 새빛 목록, 개인정보 동의표 등 16곳 공통)
   ※ 라벨/값 입력 폼은 thead 가 없어 대상에서 자동으로 빠진다.
   ※ :has 를 모르는 구형 브라우저는 기존 동작 그대로라 기능 저하가 없다. */
@media screen and (max-width: 768px) {
  /* 2026-09 : 데이터 표는 JSP 에서 .psub-table-wrap 으로 감싸 둔다.
     표 자체에 display:block 을 주면 표 안의 줄이 '내용 만큼'만 넓어져
     좌우로 밀릴 수는 있어도 머리줄이 표 폭을 못 채운다.
     겉상자에 스크롤을 두면 표는 표로 남아 둘 다 해결된다.
       - 머리글이 칸에 들어가면 : 표가 100% 로 칸을 채운다
       - 머리글이 넣으면 : 줄바꿈 없이 표가 넓어져 겉상자가 좌우로 밀린다 */
  .psub-body .content .psub-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .psub-body .content .psub-table-wrap > .contable {
    display: table;
    width: 100%;
    /* style.css:2081 의 table-layout:fixed 을 푸어야 머리글이 길 때
       표가 그만큼 넓어져 겉상자가 스크롤된다.
       fixed 인 채로는 colgroup 비율에 묶여 칸만 넘친다. */
    table-layout: auto;
  }
  .psub-body .content .psub-table-wrap > .contable > thead > tr > th {
    white-space: nowrap;
  }
  /* 목록이 비었을 때의 안내문은 줄바꿈을 허용한다 */
  .psub-body .content .psub-table-wrap > .contable > tbody > tr > td[colspan] {
    white-space: normal;
  }
  /* 감싸지 않은 표는 예전대로 칸에 맞춘다 */
  .psub-body .content .contable:has(thead):not(.psub-table-wrap > .contable) {
    display: table;
    width: 100%;
  }
}

/* 2026 수정요청 : 조회 폼의 입력창과 버튼이 두 줄로 갈라지던 문제.
   (정기권 조회/결제, 미납 조회, 쿠폰·사전결제·새빛 목록 등 공영페이지 13곳)

   원래 설계는 style.css:1694 의 float + calc(100% - 110px) 로 한 줄에 놓는 것인데,
   폭을 정하는 규칙이 세 파일에 흩어져 서로를 덮어쓰면서 두 구간이 깨져 있었다.
     - 768~1023px : add.css 의 @media(min-width:768) 가 입력창을 width:100% 로 만든다
     - 768px 이하 : kp.css:236 의 input[type=text].form-text{width:100%} 가
                    .form-btn-box .form-text(0,2,0) 보다 특이도가 높아(0,2,1) 이긴다
                    (해당 주석에는 개별 폭 지정이 더 높아 유지된다고 적혀 있으나 실제로는 반대)
   입력창이 100% 가 되면 버튼이 들어갈 자리가 없어 다음 줄로 밀린다.

   폭 값을 또 하나 얹어 경쟁시키는 대신, 한 줄 배치 자체를 flex 로 고정한다.
   입력창은 남는 폭을 갖고 버튼은 제 크기를 지키므로 어느 폭 규칙이 이기든 결과가 같다.
   (1024px 이상은 기존 float 배치가 정상 동작하므로 건드리지 않는다) */
@media screen and (max-width: 1023px) {
  .psub-body .content .form-btn-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
  }
  .psub-body .content .form-btn-box::before,
  .psub-body .content .form-btn-box::after {
    display: none;
  }
  .psub-body .content .form-btn-box .form-text,
  .psub-body .content .form-btn-box .box-parking,
  .psub-body .content .form-btn-box .selectbox {
    float: none;
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
  }
  /* .box-parking 은 style.css:3985 에서 width:calc(100% - 110px) 에 !important 가
     걸려 있어 위의 width:auto 로는 이길 수 없다. 그 값이 그대로 남으면
     (100% - 110px) + 버튼 폭 이 100% 를 넘겨 지도선택 버튼이 다음 줄로 밀린다.
     (정기권 대기 신청서 / 순환추첨제 신청서 / 새빛 신청서 공통)
     같은 방식으로 되돌려 남는 폭을 차지하게 한다. */
  .psub-body .content .form-btn-box .box-parking {
    width: auto !important;
    float: none !important;
  }
  /* 선택 박스 안의 select(및 select2 대체 요소)가 박스를 꽉 채우게 한다 */
  .psub-body .content .form-btn-box .selectbox > select,
  .psub-body .content .form-btn-box .selectbox > .form-select,
  .psub-body .content .form-btn-box .selectbox > .select2 {
    width: 100% !important;
  }
  .psub-body .content .form-btn-box .btn,
  .psub-body .content .form-btn-box button,
  .psub-body .content .form-btn-box a.btn {
    float: none;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0 16px;
    white-space: nowrap;
  }
  /* 검증 안내 문구는 항상 다음 줄 전체 폭을 쓴다 */
  .psub-body .content .form-btn-box .hidden-messages {
    float: none;
    flex: 1 0 100%;
    margin: 0;
  }
}

/* ============================================================
 * 2026 모바일 점검 후속 (2차)
 * ============================================================ */

/* 신청 폼의 라벨칸 : 모바일에서 폭만 90px 로 줄고(style.css 의 m-colgroup-two)
   글자는 16px · 높이 62px 그대로 남아 6~7자 라벨이 두세 줄로 쌓였다.
   (정기권 신청 / 순환추첨제 신청서) 폭에 맞춰 글자와 높이도 함께 줄인다. */
@media screen and (max-width: 768px) {
  .psub-body .content .contable.form-view > tbody > tr > th {
    height: auto;
    min-height: 44px;
    padding: 10px 8px;
    font-size: 13px;
    line-height: 1.35;
    word-break: keep-all;
  }
  .psub-body .content .contable.form-view > tbody > tr > td {
    height: auto;
    min-height: 44px;
  }
}

/* 미납·사전결제 상세는 라벨/값 표인데 board-view 로 선언돼 있어
   2026 라벨셀 서식이 걸리지 않고 구형 값으로 떨어졌다.
   (thead 가 없으므로 가로 스크롤 규칙과는 무관) */
.psub-body .content .contable.board-view:not(:has(thead)) > tbody > tr > th {
  background: #f4f7fb;
  font-size: 16px;
  font-weight: 500;
  color: var(--psub-text);
}
@media screen and (max-width: 768px) {
  .psub-body .content .contable.board-view:not(:has(thead)) > tbody > tr > th {
    font-size: 13px;
    padding: 10px 8px;
    word-break: keep-all;
  }
}

/* ============================================================
 * 2026-09 수정요청 (화면 확인 후)
 * ============================================================ */

/* 공지사항 검색줄 : 선택칸이 90px 로 묶여 있어 '제목+내용' 이 칸을 넘어
   옆 입력창 위로 올라탔다. 글자에 맞게 넓히고 입력창은 남는 폭을 쓰게 한다. */
@media screen and (max-width: 768px) {
  /* ※ .selectbox 안의 select 는 absolute 라 껍데기에 폭이 없으면 2px 로 접힌다.
     auto 로 두면 안 되고 글자가 들어갈 만큼 숫자로 줘야 한다. */
  .psub-body .content .conheader.has-util .selectbox {
    float: none;
    width: 104px;
    min-width: 0;
    flex: 0 0 auto;
  }
  .psub-body .content .conheader.has-util .form-group.has-btn {
    float: none;
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    margin-left: 0;
  }
  .psub-body .content .conheader.has-util .form-group.has-btn .form-text {
    width: 100%;
  }
}

/* 자주묻는질문 검색줄 : 이 화면만 클래스 이름이 달라(conheader_search_util_admin)
   모바일 규칙 밖이었다. left:200px 로 절대배치돼 있어 '총 N건' 과 겹쳤다.
   ※ add.css 의 #searchForm 규칙이 아이디 특이도라 같은 자리에서 이겨야 한다. */
@media screen and (max-width: 768px) {
  .psub-body #searchForm .conheader_search_util_admin,
  .psub-body .content .conheader_search_util_admin {
    position: static;
    top: auto;
    left: auto;
    display: flex;
    width: 100%;
    gap: 8px;
    margin-top: 10px;
    justify-content: flex-start;
  }
  .psub-body #searchForm .conheader_search_util_admin .selectbox,
  .psub-body .content .conheader_search_util_admin .selectbox {
    float: none;
    width: 104px;
    min-width: 0;
    flex: 0 0 auto;
  }
  .psub-body #searchForm .conheader_search_util_admin .form-group.has-btn,
  .psub-body .content .conheader_search_util_admin .form-group.has-btn {
    float: none;
    width: auto;
    height: auto;
    flex: 1 1 0;
    min-width: 0;
  }
  .psub-body .content .conheader.has-util .conheader-total-util {
    position: static;
    justify-content: flex-end;
    margin-top: 6px;
  }
  /* ※ add.css:1338 의 #searchForm .conheader.has-util{height:10px} 은
     이 안의 검색줄이 absolute 일 때를 전제로 한 값이다.
     모바일에서 흐름으로 돌려놓았으니 높이도 풀어주어야
     머리글이 10px 로 접혀 목록 위로 겹치지 않는다. */
  .psub-body #searchForm .conheader.has-util,
  .psub-body .content .conheader.has-util {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  /* 돋보기 단추 : 입력칸 높이가 흐름으로 바뀌었으니
     고정 top 대신 가운데 정렬로 두고 오른쪽 여백을 준다.
     ※ add.css:1366 (320~767px) 은 이 단추를 width:0; height:0 으로 눕혀
        돋보기 그림만 보이고 실제로는 눌리지 않는다. 크기를 되살린다.
        아이디 특이도라 .psub-body 를 앞에 붙여 같은 자리에서 이긴다. */
  .psub-body .content .conheader.has-util .form-group.has-btn .list-search-btn,
  .psub-body #searchForm .conheader_search_util_admin .form-group.has-btn button.list-search-btn {
    top: 50%;
    right: 4px;
    width: 30px;
    height: 30px;
    transform: translateY(-50%);
  }
}

/* 신청 폼 라벨칸의 별표 : 라벨칸이 90px 로 줄면서 글자 뒤 16px 짜리 별표가
   자리를 못 잡고 혼자 아랫줄로 내려갔다. 칸을 조금 넓히고 별표를 줄인다.
   (선불권 신청, 정기권 신청 등 form-view 폼 공통) */
@media screen and (max-width: 768px) {
  /* 별표는 16px 짜리 스프라이트 조각이라 크기를 건드리면
     옆 칸의 다른 그림이 나온다. 그림은 그대로 두고 칸을 넓힌다.
     13px 라벨 6글자(78px) + 별표 16px = 94px 까지 한 줄에 들어간다. */
  .psub-body .content .contable.form-view > colgroup.m-colgroup-two > col:nth-child(1) {
    width: 112px !important;
  }
  .psub-body .content .contable.form-view > tbody > tr > th .asterisk {
    margin-left: 1px;
  }
}

/* PC 검색창 줄맞춤 (공지사항 등)
   1440px 실측으로 나온 어긋난 곳 세 가지 :
     - 입력창이 250px 인데 담는 칸은 200px 이라 50px 빠져나간다.
       돋보기는 담는 칸 기준 right:0 이라 입력창 끝에서 50px 안쪽에 맺힌다.
     - 입력창은 고도화 서식으로 46px 인데 선택칸은 구형 40px 이다.
     - 돋보기가 top:6px 고정이라 세로 가운데에서 2px 벗어난다.
   담는 칸을 입력창에 맞추고, 선택칸도 같은 높이·모서리로 맞춘다. */
@media screen and (min-width: 769px) {
  .psub-body .content .conheader.has-util .form-group.has-btn {
    width: auto;
    flex: 0 0 auto;
  }
  .psub-body .content .conheader.has-util .form-group.has-btn .form-text {
    width: 250px;
  }
  /* 자주묻는질문·문의사항 옆의 담는 칸은 add.css:790 에서 20px 로
     고정돼 있어, 그대로 50% 를 잡으면 단추가 입력창 위로 튀어나간다.
     아이디 특이도라 .psub-body 를 앞에 붙여 같은 자리에서 이긴다. */
  .psub-body #searchForm .conheader_search_util_admin .form-group.has-btn,
  .psub-body .content .conheader_search_util_admin .form-group.has-btn {
    height: auto;
  }
  /* add.css:813 이 button.list-search-btn 을 아이디로 잡아 top:0 을 주고 있어
     같은 무게(.psub-body 를 앞에 붙임)로 눌러야 가운데로 온다. */
  .psub-body .content .conheader.has-util .form-group.has-btn .list-search-btn,
  .psub-body #searchForm .conheader_search_util_admin .form-group.has-btn button.list-search-btn {
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
  }
  .psub-body .content .conheader.has-util .selectbox {
    height: 46px;
    border-radius: 8px;
    border-color: #cfd8e3;
  }
  .psub-body .content .conheader.has-util .selectbox .form-select {
    height: 100%;
    font-size: 15px;
  }
}

/* ============================================================
 * 2026-09 요청 : 모바일 가로 스크롤 막대를 항상 보이게
 * ============================================================
 * 표를 옆으로 밀 수 있다는 것을 손가락을 대기 전에는 알 길이 없었다.
 * 기본 막대는 움직일 때만 잠긐 떠다 사라지는 겹침형이라,
 * ::-webkit-scrollbar 를 직접 꾸머 고정형 막대로 바꾼다.
 * overflow-x 는 auto 로 두어 넓지 않은 표에는 막대가 안 붙게 한다.
 */
@media screen and (max-width: 768px) {
  .psub-body .content .psub-table-wrap,
  .psub-body .content .contable.form-view.search,
  .psub-body .content .psub-article-body,
  .psub-body .content .se-table-container,
  .content .infoArea table,
  .content .tt_article_useless_p_margin table,
  .mp-table-wrap {
    scrollbar-width: thin;                 /* 파이어폭스 */
    scrollbar-color: #9bb3cc #eef2f7;
    /* touch 를 쓰면 iOS 에서 막대가 숨는다.
       관성 스크롤은 요즘 기본이라 넘긴다. */
    -webkit-overflow-scrolling: auto;
  }
  .psub-body .content .psub-table-wrap::-webkit-scrollbar,
  .psub-body .content .contable.form-view.search::-webkit-scrollbar,
  .psub-body .content .psub-article-body::-webkit-scrollbar,
  .psub-body .content .se-table-container::-webkit-scrollbar,
  .content .infoArea table::-webkit-scrollbar,
  .content .tt_article_useless_p_margin table::-webkit-scrollbar,
  .mp-table-wrap::-webkit-scrollbar {
    height: 8px;
    -webkit-appearance: none;
  }
  .psub-body .content .psub-table-wrap::-webkit-scrollbar-track,
  .psub-body .content .contable.form-view.search::-webkit-scrollbar-track,
  .psub-body .content .psub-article-body::-webkit-scrollbar-track,
  .psub-body .content .se-table-container::-webkit-scrollbar-track,
  .content .infoArea table::-webkit-scrollbar-track,
  .content .tt_article_useless_p_margin table::-webkit-scrollbar-track,
  .mp-table-wrap::-webkit-scrollbar-track {
    background: #eef2f7;
    border-radius: 999px;
  }
  .psub-body .content .psub-table-wrap::-webkit-scrollbar-thumb,
  .psub-body .content .contable.form-view.search::-webkit-scrollbar-thumb,
  .psub-body .content .psub-article-body::-webkit-scrollbar-thumb,
  .psub-body .content .se-table-container::-webkit-scrollbar-thumb,
  .content .infoArea table::-webkit-scrollbar-thumb,
  .content .tt_article_useless_p_margin table::-webkit-scrollbar-thumb,
  .mp-table-wrap::-webkit-scrollbar-thumb {
    background: #9bb3cc;
    border-radius: 999px;
  }
  .psub-body .content .psub-table-wrap::-webkit-scrollbar-thumb:active,
  .psub-body .content .contable.form-view.search::-webkit-scrollbar-thumb:active,
  .psub-body .content .psub-article-body::-webkit-scrollbar-thumb:active,
  .psub-body .content .se-table-container::-webkit-scrollbar-thumb:active,
  .content .infoArea table::-webkit-scrollbar-thumb:active,
  .content .tt_article_useless_p_margin table::-webkit-scrollbar-thumb:active,
  .mp-table-wrap::-webkit-scrollbar-thumb:active {
    background: #1c7ad3;
  }
}