@charset "UTF-8";
/* =============================================================================
   접수형(FORM) 화면 전용 스타일 — R7-2 (REQ-037 · REQ-053)

   왜 별도 파일인가
    · `css/portal/renewal.css` 는 시안 컴포넌트 담당(fe-developer)이 작업 중이라 건드리지 않는다.
    · 선례가 있다 — 관리자 스타일도 `css/admin/admin.css` 로 분리했다(R5-2).
    · 이 파일은 접수 화면 2개(EgovFormApply·EgovFormComplete)에서만 링크된다(head-css).

   문항 자체의 모양은 jenny-form.css(core jar 동봉)가 그린다. 여기는 그 **바깥**만 다룬다 —
   단계 표시 · 동의 박스 · 첨부 · 버튼.

   색·간격은 renewal.css 가 정의한 CSS 변수를 그대로 쓴다(값을 복제하면 시안이 바뀔 때 어긋난다).
   ============================================================================= */

/* ---------- legend 원복 (이 화면에 한정) ----------
   `css/portal/base.css:319` 이 Bootstrap reboot 잔재로 `legend { float:left; width:100% }` 을 건다.
   그 상태에서 legend 다음에 오는 **BFC 요소**(jenny-form 의 `.jf-choice` 는 display:flex)는
   플로트를 피해 옆으로 밀리며 폭이 0 에 가깝게 줄어든다 —
   375px 실측에서 라디오 첫 선택지 "부패·비리" 가 오른쪽 끝에서 한 글자씩 세로로 쪼개졌다.
   같은 이유로 우리 `<fieldset>` 의 legend 옆에도 다음 문단이 따라붙었다.

   base.css 를 고치면 포털 전 화면에 영향이 가고 지금 시안 작업(fe-developer)과 충돌한다.
   그래서 **접수 화면 안에서만** 되돌린다. */
.frm-agree-box > legend,
.frm-files > legend,
.frm-host .jf-field > legend {
  float: none; width: auto; display: block; margin-bottom: 0.8rem;
}

/* 폼 제목은 서브페이지 타이틀(subhead)과 중복이라 감춘다. 설명(jf-desc)은 남긴다. */
.frm-host .jf-header .jf-title { display: none; }

/* ---------- 진행 단계 (STEP 01·02·03) ---------- */
.frm-steps {
  display: flex; gap: 0; flex-wrap: wrap;
  list-style: none; margin: 2.24rem 0 3.2rem; padding: 0;
}
.frm-step {
  flex: 1 1 140px; min-width: 120px; position: relative;
  border: 1px solid var(--debc-line, #DDE3EC); border-radius: var(--debc-radius, 8px);
  background: #fff; padding: 1.6rem 1.28rem; text-align: center; margin-right: 22px;
  color: var(--debc-text-sub, #5A6472);
}
.frm-step:last-child { margin-right: 0; }
.frm-step::after {
  content: ""; position: absolute; right: -17px; top: 50%;
  width: 9px; height: 9px;
  border-top: 2px solid var(--debc-line, #DDE3EC); border-right: 2px solid var(--debc-line, #DDE3EC);
  transform: translateY(-50%) rotate(45deg);
}
.frm-step:last-child::after { display: none; }
.frm-step .no { display: block; font-size: 1.248rem; font-weight: 700; letter-spacing: .04em; }
.frm-step .tit { display: block; margin-top: 0.4rem; font-size: 1.52rem; font-weight: 700; }

/* 현재 단계 — 색만이 아니라 테두리 두께로도 구분한다(색각 이상 대비). */
.frm-step.is-current {
  border: 2px solid var(--debc-primary, #16337E);
  background: #F3F6FD; color: var(--debc-primary, #16337E);
}

/* ---------- 안내/오류 ---------- */
.frm-alert {
  border: 1px solid #E3B7B7; border-left: 4px solid #C9302C; border-radius: 8px;
  background: #FDF6F6; color: #A02622;
  padding: 1.44rem 1.76rem; margin: 0 0 1.92rem; font-size: 1.472rem; line-height: 1.7;
}
.frm-help { font-size: 1.376rem; color: var(--debc-text-sub, #5A6472); margin: 0 0 1.28rem; }

/* ---------- 동의 박스 ---------- */
.frm-agree-box {
  border: 1px solid var(--debc-line, #DDE3EC); border-radius: var(--debc-radius, 8px);
  padding: 1.92rem 2.24rem; margin: 0 0 1.92rem;
}
.frm-agree-box > legend {
  font-size: 1.632rem; font-weight: 700; color: var(--debc-navy, #0F2557);
  padding: 0 0.64rem; width: auto;
}
.frm-req {
  display: inline-block; margin-left: 0.64rem; padding: 0.16rem 0.72rem; border-radius: 3px;
  background: var(--debc-orange, #E4641E); color: #fff; font-size: 1.184rem; font-weight: 700;
  vertical-align: middle;
}
/* 약관 본문은 길어질 수 있어 스크롤 상자로 둔다(화면이 통째로 밀리지 않게). */
.frm-agree-cn {
  max-height: 190px; overflow-y: auto;
  background: #F7F9FD; border: 1px solid var(--debc-line, #DDE3EC); border-radius: 6px;
  padding: 1.44rem 1.76rem; margin-bottom: 1.44rem;
  font-size: 1.424rem; line-height: 1.75; color: var(--debc-text-sub, #5A6472);
}
.frm-agree-cn p { margin: 0 0 0.56rem; }
.frm-agree-cn p:last-child { margin-bottom: 0; }
.frm-radio { display: inline-flex; align-items: center; gap: 0.56rem; margin-right: 1.92rem; font-size: 1.52rem; }
.frm-radio input { width: 18px; height: 18px; }

/* ---------- 문항 영역 ----------
   렌더러가 만드는 제출 버튼은 감춘다 — 첨부 입력이 그 아래에 와야 해서
   화면 순서상 "제출 → 첨부" 가 되어 버린다. 제출은 첨부 아래 우리 버튼이 renderer.submit() 로 부른다. */
.frm-host { margin: 0 0 2.24rem; }
.frm-host .jf-actions { display: none; }

/* ---------- 첨부 ---------- */
.frm-files {
  border: 1px solid var(--debc-line, #DDE3EC); border-radius: var(--debc-radius, 8px);
  padding: 1.92rem 2.24rem; margin: 0 0 2.24rem;
}
.frm-files > legend {
  font-size: 1.632rem; font-weight: 700; color: var(--debc-navy, #0F2557); padding: 0 0.64rem; width: auto;
}
.frm-file-row { display: flex; align-items: center; gap: 1.28rem; margin-bottom: 0.96rem; flex-wrap: wrap; }
.frm-file-row label { min-width: 92px; font-size: 1.44rem; font-weight: 600; }
.frm-file-row input[type="file"] { flex: 1 1 240px; font-size: 1.44rem; }

/* ---------- 버튼 ---------- */
.frm-actions {
  display: flex; justify-content: center; gap: 1.28rem; flex-wrap: wrap;
  margin: 2.88rem 0 0.96rem;
}
.frm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 160px; height: 56px; padding: 0 2.24rem; border-radius: 3px;
  border: 1px solid var(--debc-primary, #16337E); background: #fff; color: var(--debc-primary, #16337E);
  font-size: 1.6rem; font-weight: 700; text-decoration: none; cursor: pointer;
}
.frm-btn:hover { background: #F3F6FD; }
.frm-btn-primary { background: var(--debc-primary, #16337E); color: #fff; }
.frm-btn-primary:hover { background: var(--debc-navy, #0F2557); color: #fff; }
.frm-btn:disabled { opacity: .55; cursor: default; }

/* ---------- 접수 완료 ---------- */
.frm-done {
  border: 1px solid var(--debc-line, #DDE3EC); border-radius: var(--debc-radius, 8px);
  background: #F3F6FD; padding: 4.16rem 2.24rem; text-align: center;
}
.frm-done-tit { font-size: 2.24rem; font-weight: 800; color: var(--debc-navy, #0F2557); margin: 0 0 1.28rem; }
.frm-done-desc { font-size: 1.52rem; line-height: 1.8; color: var(--debc-text-sub, #5A6472); margin: 0 0 0.8rem; }
.frm-done-no {
  display: inline-block; margin: 1.28rem 0; padding: 1.12rem 2.24rem;
  background: #fff; border: 1px solid var(--debc-primary, #16337E); border-radius: 6px;
  font-size: 1.6rem; color: var(--debc-text, #1A1A1A);
}
.frm-done-no b { color: var(--debc-primary, #16337E); letter-spacing: .02em; }

/* ---------- 나의 신고 확인 (R7-4, REQ-038) ----------
   목록·상세 표. 관리자 표(admin.css)는 관리자 화면 전용이라 여기서 최소로 그린다. */
.frm-my-table {
  width: 100%; border-collapse: collapse; margin: 0 0 0.96rem;
  border-top: 2px solid var(--debc-primary, #16337E); font-size: 1.52rem;
}
.frm-my-table th, .frm-my-table td {
  padding: 1.28rem 1.12rem; border-bottom: 1px solid var(--debc-line, #DDE3EC); text-align: center; vertical-align: top;
}
.frm-my-table thead th { background: #F3F6FD; color: var(--debc-navy, #0F2557); font-weight: 700; }
.frm-my-table td.left { text-align: left; }
.frm-my-table td.empty { padding: 3.2rem 0; color: var(--debc-text-sub, #5A6472); }
.frm-my-table a { color: var(--debc-primary, #16337E); font-weight: 600; }
/* 상세: 항목명 | 값 — 섹션 행은 소제목 */
.frm-my-detail th { width: 17.6rem; text-align: left; background: #F7F9FD; color: var(--debc-navy, #0F2557); }
.frm-my-detail td { text-align: left; }
.frm-my-detail tr.section th { background: var(--debc-primary, #16337E); color: #fff; }
/* ---------- 구독 신청·해지 (2026-08-19 WP-G — 뉴스레터 REQ-032 · 알림문자 REQ-033) ----------
   접수 화면과 같은 틀(단계·동의 박스·버튼)을 쓰고, 여기엔 **입력 한 줄**과 체크박스만 더한다.
   입력칸 자체는 base.css 의 .form-control 이다(새 입력 스타일을 만들지 않는다). */
.frm-agree-plain { white-space: pre-line; }              /* 설정값 문구의 줄바꿈을 그대로 */
.frm-check { display: inline-flex; align-items: center; gap: 0.72rem; font-size: 1.568rem; font-weight: 600; }
.frm-check input { width: 18px; height: 18px; }
.frm-field { margin: 0 0 1.76rem; }
.frm-field > label { display: block; margin-bottom: 0.64rem; font-size: 1.52rem; font-weight: 600; }
.frm-field .form-control { max-width: 480px; }
.frm-inline { display: flex; gap: 0.96rem; align-items: center; flex-wrap: wrap; }
.frm-inline .form-control { flex: 1 1 260px; }
.frm-btn-sm { min-width: 110px; height: 44px; padding: 0 1.6rem; font-size: 1.472rem; }
.frm-field .form-select { max-width: 320px; }

/* ---------- 모바일(375px 기준) ----------
   단계 표시는 가로 3칸이면 375px 에서 글자가 두 줄로 접힌다 → 세로로 쌓고 화살표를 아래로 돌린다.
   버튼은 폭 100% 로 두어 엄지 조작 영역을 확보한다. */
@media (max-width: 575.98px) {
  .frm-steps { flex-direction: column; margin-bottom: 2.24rem; }
  /* 세로 배치에서는 flex-basis 가 **높이**가 된다 — 140px 를 그대로 두면 단계 상자 하나가
     140px 짜리 빈 블록이 되어 화면 첫 화면이 단계 표시로 다 찬다(375px 실측). */
  .frm-step { flex: 0 0 auto; margin: 0 0 20px; padding: 1.28rem; }
  .frm-step::after { right: 50%; top: auto; bottom: -15px; transform: translateX(50%) rotate(135deg); }
  .frm-step .no { display: inline; margin-right: 0.8rem; }
  .frm-step .tit { display: inline; }
  .frm-agree-box, .frm-files { padding: 1.6rem; }
  .frm-file-row label { min-width: 100%; }
  .frm-actions { flex-direction: column; }
  .frm-btn { width: 100%; min-width: 0; height: 52px; }
  .frm-done { padding: 3.2rem 1.6rem; }
  .frm-done-tit { font-size: 1.92rem; }
  .frm-my-table { font-size: 1.408rem; }
  .frm-my-table th, .frm-my-table td { padding: 0.96rem 0.64rem; }
  .frm-my-detail th { width: 11.2rem; }
}

/* ---------- 안내 상자·보조 표시 (2026-08-20 추가) ----------
   화면에서 쓰던 클래스인데 정의가 없어 **글자만 덩그러니** 나왔다.
   클래스를 쓰는 쪽과 정의하는 쪽이 갈리면 이런 일이 난다 — 쓸 때 함께 정의한다. */
.frm-guide {
  margin: 1.6rem 0;
  padding: 1.6rem 1.92rem;
  border: 1px solid #DBE1EA;
  border-left: 4px solid var(--debc-primary, #16337E);
  border-radius: 3px;
  background: #F7F9FC;
  font-size: 1.6rem;
  line-height: 1.6;
}
.frm-guide > p { margin: 0 0 .64rem; }
.frm-guide > p:last-child { margin-bottom: 0; }
.frm-guide .frm-help { margin-top: .64rem; }
/* 안내 상자 안의 단추는 위쪽 여백만 두고 왼쪽 정렬한다 —
   가운데 정렬(.frm-actions 기본)은 문단 안에서 어색하다. */
.frm-guide .frm-actions { justify-content: flex-start; margin: 1.28rem 0 0; }

/* 「선택」 딱지 — 필수(.frm-req)의 짝. 필수만 표시하면 나머지가 필수인지 아닌지 알 수 없다. */
.frm-opt {
  display: inline-block; margin-left: .48rem; padding: .16rem .64rem;
  border-radius: 1.6rem; background: #EEF1F5;
  font-size: 1.28rem; font-weight: 500; color: #5A6472; vertical-align: middle;
}

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

/* 연동 전·중단 안내 — 본문 흐름을 끊지 않는 낮은 강조. */
.rnw-notice-box {
  margin: 1.6rem 0; padding: 1.6rem 1.92rem;
  border: 1px solid #E2E5E9; border-radius: 3px; background: #fff;
  font-size: 1.6rem; line-height: 1.6;
}
.rnw-notice-box > p { margin: .64rem 0 0; }

/* ---------- Q&A 상세 (2026-08-20) ----------
   ★ 작성 당시의 줄바꿈을 살린다.
     HTML 은 개행을 공백 하나로 접는다 — 그래서 문단을 나눠 쓴 문의가 한 덩어리로 붙어 나왔다.
     `pre-wrap` 은 줄바꿈·연속 공백을 그대로 두면서 긴 줄은 화면 폭에 맞춰 접는다(`pre` 는 안 접혀
     가로 스크롤이 생긴다). 값을 HTML 로 해석하지 않으므로 주입 통로가 되지 않는다. */
.qna-cn {
  white-space: pre-wrap;
  word-break: break-word;      /* 띄어쓰기 없는 긴 문자열(주소 등)이 표를 밀어내지 않게 */
  line-height: 1.7;
  font-size: 1.6rem;
}
/* 답변은 관리자가 에디터로 쓴 것이라 서식(HTML)이 살아 있다 — pre-wrap 을 걸면 태그 사이 개행까지 보인다. */
.qna-answer { line-height: 1.7; font-size: 1.6rem; }
.qna-answer p { margin: 0 0 .8rem; }
/* FAQ 상세도 같은 규약으로 짓는다(2026-09-11) — 정본에 FAQ 상세가 없어 Q&A 상세를 본으로 삼았다.
   셀렉터를 함께 두는 이유: 같은 모양을 두 벌로 관리하면 한쪽만 고쳐져 서서히 달라진다. */
.qna-view .title,
.faq-view .title { margin: 0; font-weight: 700; }

/* ─────────────────────────────────────────────────────────────────────────
   신고 창구 상단 탭 — 「신고하기 | 나의 신고 확인」 (참여마당 시안 2026-08-31)

   시안은 둘을 «나란한 탭» 으로 둔다. 종전에는 화면 오른쪽 위에 작은 링크
   (「이미 접수하셨나요? 나의 신고 확인」)로 두었는데, 접수를 마친 사람이
   돌아왔을 때 그 링크를 찾기 어려웠다 — 탭이면 화면을 열자마자 보인다.

   두 칸을 같은 너비로 나눈다(시안). 좁은 화면에서도 그대로 둘로 나뉜다 —
   세로로 쌓으면 «탭» 이 아니라 «메뉴» 로 보인다.
   ───────────────────────────────────────────────────────────────────────── */
.frm-tabs { margin: 0 0 3.2rem; border-bottom: 1px solid var(--k-g30, #d8dce3); }
.frm-tabs-list { display: flex; margin: 0; padding: 0; list-style: none; }
.frm-tabs-list > li { flex: 1 1 0; min-width: 0; }
.frm-tab {
  display: block; padding: 1.6rem 0.8rem; text-align: center;
  font-size: 1.76rem; font-weight: 600; color: var(--k-g60, #6d7582);
  text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.frm-tab:hover, .frm-tab:focus-visible { color: var(--k-primary, #1b5aa8); }
/* 지금 보고 있는 탭 — 색만으로 알리지 않는다(밑줄을 함께 준다, KWCAG 1.4.1) */
.frm-tab.is-on { color: var(--k-primary, #1b5aa8); border-bottom-color: var(--k-primary, #1b5aa8); }
@media (max-width: 560px) { .frm-tab { font-size: 1.6rem; padding: 1.3rem 0.4rem; } }

/* 「우편번호 검색」 단추 (참여마당 시안 2026-08-31) — 화면에서 꽂는다(js/form-zip.js) */
.frm-zip-btn {
  display: inline-block; margin: 0 0 0.8rem; padding: 0.9rem 2rem;
  border: 1px solid var(--k-primary, #1b5aa8); border-radius: 6px;
  background: #fff; color: var(--k-primary, #1b5aa8);
  font-size: 1.6rem; font-weight: 600; font-family: inherit; cursor: pointer;
}
.frm-zip-btn:hover { background: var(--k-primary, #1b5aa8); color: #fff; }
.frm-zip-btn:focus-visible { outline: 2px solid var(--k-primary, #1b5aa8); outline-offset: 2px; }