@charset "utf-8";
/* ==========================================================================
   form.css — 고객 문의 폼
   ========================================================================== */

.form-wrap { max-width: 840px; margin-inline: auto; }

.form-guide {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 20px 24px; margin-bottom: 40px;
  background: var(--c-primary-tint);
  border-radius: var(--radius-card);
  font-size: 15px; line-height: 1.7;
}
.form-guide svg { width: 20px; height: 20px; flex: none; margin-top: 4px; color: var(--c-primary); }
.form-guide b { font-weight: 700; color: var(--c-primary-deep); }

.field { margin-bottom: 26px; }
.field > label,
.field > .field-label {
  display: block; margin-bottom: 10px;
  font-size: 15px; font-weight: 700; color: var(--c-gray-900);
}
.req { color: #D64545; margin-left: 3px; }
.opt { margin-left: 6px; font-size: 13px; font-weight: 400; color: #9AA3AF; }

.input, .textarea, .select {
  width: 100%; min-height: 52px; padding: 13px 16px;
  font-size: 16px; line-height: 1.6; color: var(--c-gray-900);
  background: var(--c-white);
  border: 1px solid var(--c-gray-300);
  border-radius: var(--radius-btn);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: #B6BDC7; }
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(40,112,184,.14);
  outline: none;
}
/* display:block — 인라인 요소로 두면 글꼴 하단 여백이 10px 정도 따라붙어
   아래 안내문과의 간격이 margin 값보다 넓어진다 */
.textarea { display: block; min-height: 200px; resize: vertical; }

.select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px;
  padding-right: 46px;
  cursor: pointer;
}

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 767px) { .field-row { grid-template-columns: 1fr; gap: 0; } }

.field-help { margin-top: 7px; font-size: 13px; color: #9AA3AF; }
.char-count { float: right; font-variant-numeric: tabular-nums; }
.char-count.is-over { color: #D64545; font-weight: 700; }

/* --- 오류 상태 --- */
.field-error {
  display: none; align-items: center; gap: 6px;
  margin-top: 8px; font-size: 14px; color: #D64545;
}
.field-error::before { content: '!'; display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; background: #D64545; color: #fff;
  font-size: 11px; font-weight: 700; flex: none; }
.field.is-error .field-error { display: flex; }
.field.is-error .input,
.field.is-error .textarea,
.field.is-error .select,
.field.is-error .sel-btn { border-color: #D64545; }
.field.is-error .input:focus,
.field.is-error .textarea:focus,
.field.is-error .select:focus { box-shadow: 0 0 0 3px rgba(214,69,69,.14); }

/* --- 개인정보 동의 --- */
.agree-box {
  padding: 24px; margin-top: 36px;
  border: 1px solid var(--c-gray-300);
  border-radius: var(--radius-card);
  background: var(--c-gray-50);
}
.agree-box h3 { font-size: 16px; font-weight: 700; color: var(--c-gray-900); margin-bottom: 14px; }
.agree-table { width: 100%; font-size: 14px; border-top: 1px solid var(--c-gray-300); }
.agree-table th, .agree-table td {
  padding: 10px 12px; border-bottom: 1px solid var(--c-gray-300);
  text-align: left; vertical-align: top; line-height: 1.6;
}
.agree-table th { width: 116px; font-weight: 700; color: var(--c-gray-900); background: var(--c-white); }
.agree-note { margin-top: 14px; font-size: 13px; line-height: 1.7; color: var(--c-gray-600); }
.agree-note a { color: var(--c-primary); text-decoration: underline; }

/* margin-top 은 위쪽 안내문과 띄우기 위한 값이다.
   체크박스만 든 박스(안전보건 신문고)에서는 위아래 여백이 어긋나므로 없앤다. */
.checkbox { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; cursor: pointer; }
.agree-box > .checkbox:first-child { margin-top: 0; }
.checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }
.checkbox .box {
  flex: none; width: 22px; height: 22px; margin-top: 1px;
  border: 1px solid var(--c-gray-300); border-radius: 3px; background: var(--c-white);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.checkbox .box::after {
  content: ''; width: 11px; height: 6px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px,-1px) scale(0);
  transition: transform .2s var(--ease);
}
.checkbox input:checked + .box { background: var(--c-primary); border-color: var(--c-primary); }
.checkbox input:checked + .box::after { transform: rotate(-45deg) translate(1px,-1px) scale(1); }
.checkbox input:focus-visible + .box { box-shadow: 0 0 0 3px rgba(40,112,184,.25); }
.checkbox .txt { font-size: 15px; line-height: 1.5; color: var(--c-gray-900); }

/* --- 허니팟 (봇 탐지용, 사람에게 보이면 안 됨) --- */
.hp-field {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* --- 제출 --- */
.form-submit { margin-top: 40px; text-align: center; }
.form-submit .btn { min-width: 220px; }
.btn[aria-busy="true"] { opacity: .6; pointer-events: none; }
/* 필수 항목을 채우기 전에는 눌리지 않는다 */
.btn:disabled {
  background: var(--c-gray-300); border-color: var(--c-gray-300);
  color: #fff; cursor: not-allowed;
}
.btn:disabled:hover { background: var(--c-gray-300); }
.form-alert {
  display: none; margin-bottom: 20px; padding: 14px 18px;
  border-radius: var(--radius-btn); font-size: 15px;
  background: #FDECEC; color: #A72E2E; border: 1px solid #F3C6C6;
}
.form-alert.is-show { display: block; }

/* --- 접수 완료 --- */
.done-panel { display: none; text-align: center; padding: 40px 20px 20px; }
.done-panel.is-show { display: block; }
.done-icon {
  width: 76px; height: 76px; margin: 0 auto 28px;
  border-radius: 50%; background: var(--c-primary-tint);
  display: flex; align-items: center; justify-content: center; color: var(--c-primary);
}
.done-icon svg { width: 36px; height: 36px; }
.done-panel h2 { font-size: 28px; font-weight: 700; letter-spacing: -.03em; color: var(--c-gray-900); }
.done-panel > p { margin-top: 14px; }
.done-no {
  display: inline-block; margin-top: 26px; padding: 12px 26px;
  background: var(--c-gray-50); border: 1px solid var(--c-gray-300);
  border-radius: var(--radius-btn); font-size: 16px;
}
.done-no b { font-weight: 700; color: var(--c-primary-deep); letter-spacing: .02em; margin-left: 8px; }
.done-panel .btn { margin-top: 36px; }

@media (max-width: 767px) {
  .form-guide { padding: 16px 18px; margin-bottom: 28px; font-size: 14px; }
  .field { margin-bottom: 20px; }
  .agree-box { padding: 18px; }
  .agree-table th { width: 88px; }
  .done-panel h2 { font-size: 22px; }
}


/* ==========================================================================
   안전보건 신문고 — 접수 / 제목 공개 목록 (2026-09-08)

   목록에는 제목·접수일·답변 여부만 나가고, 내용은 비밀번호를 넣어야 열린다.
   아코디언 생김새·동작은 고객지원 > 공지사항(.notice-*)과 «같게» 맞춘다 —
   같은 사이트에서 같은 모양이면 사용자가 다시 배우지 않아도 된다.
   ========================================================================== */

/* --- 탭 --- */
.rep-tabs {
  display: flex; gap: 6px; margin-bottom: 28px;
  border-bottom: 1px solid var(--c-gray-300);
}
.rep-tab {
  appearance: none; border: 0; background: none; cursor: pointer;
  padding: 14px 26px; font-size: 16px; font-weight: 600;
  color: var(--c-gray-600); letter-spacing: -.02em;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .18s, border-color .18s;
}
.rep-tab:hover { color: var(--c-primary); }
.rep-tab.is-on { color: var(--c-primary-deep); border-bottom-color: var(--c-primary); }
.rep-tab:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -4px; }

/* --- 접수 폼 --- */

/* 제목이 «공개된다» 는 사실은 그냥 도움말이 아니라 경고다. 색으로 구분한다 */
.field-help.is-caution { color: #8A5A12; }
.field-help.is-caution b { font-weight: 700; color: #6E460B; }

.pw-set {
  margin-bottom: 26px; padding: 22px 24px 6px;
  background: var(--c-gray-50); border: 1px solid var(--c-gray-300);
  border-radius: var(--radius-btn);
}
.pw-set-lead { font-size: 15px; line-height: 1.7; color: var(--c-gray-600); margin-bottom: 18px; }
.pw-set-lead b { display: block; font-weight: 700; color: var(--c-gray-900); margin-bottom: 4px; }
.pw-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }

/* --- 접수 완료 --- */
.btn-copy {
  appearance: none; cursor: pointer; margin-left: 12px;
  padding: 5px 12px; font-size: 13px; font-weight: 600;
  color: var(--c-primary-dark); background: var(--c-white);
  border: 1px solid var(--c-primary-light); border-radius: 6px;
  transition: background .18s;
}
.btn-copy:hover { background: var(--c-primary-tint); }

/* 비밀번호를 잃으면 답변을 영영 볼 수 없다. 그래서 경고 톤을 쓴다 */
.keep-warn {
  max-width: 560px; margin: 26px auto 0; padding: 18px 22px;
  text-align: left; font-size: 15px; line-height: 1.75;
  color: #8A5A12; background: #FFF7E8; border: 1px solid #F0DCB4;
  border-radius: var(--radius-btn);
}
.keep-warn b { font-weight: 700; color: #6E460B; }

.done-btns { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.done-panel .done-btns .btn { margin-top: 32px; }

/* --- 제보 목록 (아코디언) --- */
.rep-list-lead {
  margin-bottom: 24px; font-size: 16px; line-height: 1.75; color: var(--c-gray-600);
}
.rep-list-lead b { font-weight: 700; color: var(--c-gray-900); }

.rep-list { border-top: 2px solid var(--c-primary-deep); }
.rep-item { border-bottom: 1px solid var(--c-gray-300); }

.rep-q {
  display: flex; align-items: center; gap: 18px; width: 100%;
  padding: 22px 6px; background: none; border: 0; cursor: pointer; text-align: left;
  transition: background .18s;
}
.rep-q:hover { background: var(--c-gray-50); }
.rep-q:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -3px; }

.rep-meta { flex: none; width: 110px; }
.rep-meta time { font-size: 15px; color: #9AA3AF; font-variant-numeric: tabular-nums; }

.rep-title {
  flex: 1; font-size: 17px; font-weight: 500; color: var(--c-gray-900);
  letter-spacing: -.02em; line-height: 1.5; word-break: break-word;
}
.rep-q[aria-expanded="true"] .rep-title { color: var(--c-primary); font-weight: 700; }

.rep-flags { flex: none; display: flex; align-items: center; gap: 10px; }
.rep-done {
  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: var(--c-primary-tint); color: var(--c-primary-dark); white-space: nowrap;
}
.rep-lock { display: flex; color: #9AA3AF; }
.rep-lock svg { width: 17px; height: 17px; }

/* 공지사항의 화살표와 같은 모양 */
.rep-arrow {
  flex: none; width: 11px; height: 11px; margin-right: 8px;
  border-right: 2px solid #9AA3AF; border-bottom: 2px solid #9AA3AF;
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .22s, border-color .22s;
}
.rep-q[aria-expanded="true"] .rep-arrow {
  border-color: var(--c-primary);
  transform: rotate(225deg) translate(-3px, -3px);
}

.rep-a { background: var(--c-primary-tint); }
.rep-empty { padding: 60px 0; text-align: center; color: #9AA3AF; }

/* 잠긴 상태 */
.rep-lockbox { padding: 28px 30px; }
.rep-lock-lead { font-size: 15px; line-height: 1.7; color: var(--c-gray-600); margin-bottom: 14px; }
.rep-lock-lead b { font-weight: 700; color: var(--c-gray-900); }

.rep-unlock { display: flex; gap: 8px; max-width: 420px; }
.rep-unlock .rep-pw { flex: 1; }
.rep-unlock .btn { flex: none; padding-left: 26px; padding-right: 26px; }

.rep-lock-msg {
  display: none; margin-top: 10px; font-size: 14px; font-weight: 600; color: #A72E2E;
}
.rep-lock-msg.is-show { display: block; }
.rep-lock-help { margin-top: 12px; font-size: 13px; color: #8A94A3; }

/* 잠금 해제 후 */
.rep-detail { padding: 28px 30px; }
.rep-detail-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.rep-badge-type {
  padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--c-white); color: var(--c-primary-dark);
  border: 1px solid var(--c-primary-light);
}
.rep-detail-no {
  font-size: 13px; color: var(--c-gray-600); letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

.rep-detail-body {
  padding: 20px 22px; border-radius: var(--radius-btn); background: var(--c-white);
  font-size: 16px; line-height: 1.8; color: var(--c-gray-900); word-break: break-word;
}

.rep-answer {
  margin-top: 18px; padding: 20px 22px; border-radius: var(--radius-btn);
  background: var(--c-white); border-left: 3px solid var(--c-primary);
}
.rep-answer-head {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px;
  font-size: 14px; font-weight: 700; color: var(--c-primary-dark);
}
.rep-answer-head span { font-size: 12px; font-weight: 400; color: #8A94A3; }
.rep-answer-body { font-size: 16px; line-height: 1.8; color: var(--c-gray-900); word-break: break-word; }

.rep-wait {
  margin-top: 18px; padding: 20px 22px; border-radius: var(--radius-btn);
  background: var(--c-white); border: 1px dashed var(--c-gray-300);
  font-size: 15px; line-height: 1.7; color: var(--c-gray-600);
}

@media (max-width: 767px) {
  .rep-tabs { gap: 0; }
  .rep-tab { flex: 1; padding: 13px 8px; font-size: 15px; }
  .pw-set { padding: 18px 18px 2px; }
  .pw-row { grid-template-columns: 1fr; gap: 0; }
  .keep-warn { padding: 16px 18px; font-size: 14px; }
  .done-btns { margin-top: 28px; }
  .done-btns .btn { width: 100%; }
  .done-panel .done-btns .btn { margin-top: 0; }

  /* 공지사항 모바일과 같은 재배치 — 날짜·배지가 윗줄, 제목이 아랫줄 */
  .rep-q { flex-wrap: wrap; gap: 8px 12px; padding: 20px 4px; }
  .rep-meta { width: auto; order: 1; }
  .rep-flags { order: 2; }
  .rep-arrow { order: 3; margin: 0 0 0 auto; }
  .rep-title { order: 4; flex: 0 0 100%; font-size: 16px; }
  .rep-lockbox, .rep-detail { padding: 20px; }
  .rep-unlock { flex-direction: column; max-width: none; }
  .rep-unlock .btn { width: 100%; }
  .rep-detail-body, .rep-answer, .rep-wait { padding: 18px; font-size: 15px; }
}


/* ==========================================================================
   드롭다운 (네이티브 select 대체) — 신문고 «제보 유형» (2026-09-08)

   헤더(GNB) 메가메뉴와 «같은 감각» 으로 동작한다 —
   마우스는 올리면 열리고, 터치·키보드는 눌러서 연다.
   생김새는 .select 와 맞춰 폼 안에서 이질감이 없게 한다.
   값은 hidden input 이 들고 있고 여는 버튼은 «보이는 값» 만 그린다.
   ========================================================================== */

/* 라벨은 기존 `.field > .field-label` 을 그대로 쓴다 (새 클래스를 만들지 않는다).
   네이티브 select 가 아니라 <label for> 가 붙지 않으므로 span 으로 두고,
   버튼의 aria-labelledby 로 이름을 잇는다. */

.sel { position: relative; }

.sel-btn {
  display: flex; align-items: center; width: 100%; min-height: 52px;
  padding: 13px 46px 13px 16px;
  font-size: 16px; line-height: 1.6; text-align: left;
  color: var(--c-gray-900); background: var(--c-white);
  border: 1px solid var(--c-gray-300); border-radius: var(--radius-btn);
  cursor: pointer;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.sel-btn:hover { border-color: var(--c-primary-light); }
.sel-btn:focus-visible {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(40,112,184,.14);
  outline: none;
}
/* 열려 있는 동안에는 «지금 이 칸» 임이 보이게 — GNB 가 열릴 때와 같은 강조 */
.sel.is-open .sel-btn {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(40,112,184,.14);
}

/* 아직 안 고른 상태는 placeholder 색 (.input::placeholder 와 같은 값) */
.sel-val.is-ph { color: #B6BDC7; }

/* 화살표 — .gnb-item.has-sub 의 «꺾쇠» 와 같은 방식으로 돌린다 */
.sel-btn::after {
  content: ''; position: absolute; right: 18px; top: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid var(--c-gray-600);
  border-bottom: 2px solid var(--c-gray-600);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.sel.is-open .sel-btn::after {
  border-color: var(--c-primary);
  transform: translateY(-30%) rotate(-135deg);
}

/* 목록 — GNB 드롭다운과 같은 전환(opacity + visibility)을 쓴다.
   display:none 을 쓰지 않는 이유는 열릴 때 부드럽게 나타나야 하기 때문이다. */
.sel-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
  /* 버튼과 목록 사이 6px 틈을 «목록의 일부» 로 만든다.
     안 그러면 마우스가 그 틈을 지날 때 .sel 밖으로 나가 목록이 닫힌다.
     GNB 가 .gnb-mega 에 padding-top 을 준 것과 같은 처리다. */
  padding: 6px; margin: 0;
  background: var(--c-white);
  border: 1px solid var(--c-gray-300); border-radius: var(--radius-btn);
  box-shadow: 0 14px 26px rgba(17, 24, 39, .12);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .22s var(--ease), visibility .22s, transform .22s var(--ease);
  max-height: 288px; overflow-y: auto;
}
.sel-list::before {
  content: ''; position: absolute; left: 0; right: 0; top: -7px; height: 7px;
}
.sel.is-open .sel-list { opacity: 1; visibility: visible; transform: none; }

.sel-opt {
  display: flex; align-items: center; min-height: 46px; padding: 10px 14px;
  font-size: 16px; letter-spacing: -.02em; color: var(--c-gray-600);
  border-radius: 6px; cursor: pointer;
  transition: color .18s var(--ease), background-color .18s var(--ease);
}
/* 키보드 커서와 마우스 위치를 «같은 표시» 로 통일한다 —
   둘이 다르면 어디가 선택될지 헷갈린다 (.gnb-mega a:hover 와 같은 색) */
.sel-opt.is-cursor { color: var(--c-primary); background: var(--c-primary-tint); font-weight: 500; }
.sel-opt.is-sel { color: var(--c-primary-deep); font-weight: 700; }

/* 고른 항목에 체크 — 다시 열었을 때 무엇이 골라져 있는지 바로 보인다 */
.sel-opt.is-sel::after {
  content: ''; margin-left: auto; width: 15px; height: 9px;
  border-left: 2px solid var(--c-primary);
  border-bottom: 2px solid var(--c-primary);
  transform: rotate(-45deg) translate(1px, -2px);
}

@media (max-width: 767px) {
  .sel-btn { min-height: 50px; font-size: 15px; }
  .sel-opt { min-height: 48px; font-size: 15px; }   /* 손가락으로 누를 크기 */
}