/* 기업애로119 신청 모달 — KTDI 커스텀.
   대상: db/ktdi_help_page.sql 이 page 55 본문에 붙이는 #helpApplyModal.
   제어: js/overrides/page-content.js initHelpApply(). */

/* 🔴 z-index 10001 — 화면 전체를 덮는 모달이라 **사이트에서 가장 위**여야 한다.
   1000 이었을 때 고정 헤더(.header, 9999)가 모달 상단 86px 을 덮어 제목·닫기 버튼이 가렸다.
   기준: .header 9999 < 검색·사이트맵 레이어 10000(main.css) < 이 모달 10001.
   ⚠ 헤더의 9999 를 낮춰 해결하지 말 것 — 다른 화면에서 헤더가 콘텐츠에 묻힌다.
   ⚠ .help_apply_dim 은 이 요소 안의 position:absolute 라 같은 쌓임 맥락이다 — 따로 올리지 않아도 함께 올라간다.
   (body 스크롤 잠금은 page-content.js initHelpApply 의 open/close 가 이미 처리한다) */
.help_apply_modal { position: fixed; inset: 0; z-index: 10001; }
.help_apply_modal[hidden] { display: none; }

.help_apply_dim {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .5);
}

.help_apply_box {
  position: relative;
  width: min(680px, 92vw);
  max-height: 90vh;
  margin: 5vh auto 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.help_apply_head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid #eee;
}
.help_apply_head h3 { margin: 0; font-size: 20px; font-weight: 700; }
.help_apply_x {
  border: 0; background: none; font-size: 28px; line-height: 1;
  cursor: pointer; color: #888;
}
.help_apply_x:hover { color: #333; }

.help_apply_form { padding: 20px 24px; overflow-y: auto; }
.help_apply_form .row { margin-bottom: 14px; }
.help_apply_form .row.two {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.help_apply_form label {
  display: block; font-size: 14px; font-weight: 600; color: #333; margin-bottom: 6px;
}
.help_apply_form label.chk {
  display: flex; align-items: center; gap: 6px; font-weight: 400; cursor: pointer;
}
.help_apply_form .req { color: #e03131; }
.help_apply_form input[type="text"],
.help_apply_form select,
.help_apply_form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  font-size: 15px;
  font-family: inherit;
  box-sizing: border-box;
}
.help_apply_form textarea { resize: vertical; }
.help_apply_form input:focus,
.help_apply_form select:focus,
.help_apply_form textarea:focus {
  outline: none; border-color: #1f4e9c;
}

.help_apply_msg {
  margin: 4px 0 10px; font-size: 14px; font-weight: 600;
}

.help_apply_foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding-top: 8px;
}
.help_apply_foot .btn { min-width: 96px; cursor: pointer; }

@media (max-width: 600px) {
  .help_apply_form .row.two { grid-template-columns: 1fr; }
}

/* 🔴 비로그인 안내 배지 — [신청하기] 버튼 안에 붙는다(page-content.js markLoginRequired).
   누르기 전에 로그인이 필요하다는 것을 알리려는 표시다.
   예전에는 모달을 다 열어 준 뒤 안내했는데, 사용자가 폼을 다 채우고 나서야 거부당했다. */
.login_hint {
	display: inline-block;
	margin-left: .5em;
	padding: .15em .5em;
	border-radius: 999px;
	background: rgba(0, 0, 0, .18);
	font-size: .8em;
	font-weight: 400;
	line-height: 1.6;
	vertical-align: middle;
}

/* ─────────────────────────────────────────────────────────────
   기업애로119 신청 **전용 페이지**(2026-09-16) — /common/ktdi/help/apply
   🔴 신청 폼이 모달에서 전용 페이지로 옮겨졌다. 위쪽 .help_apply_* 규칙은
      page 55 본문에 있던 옛 모달용이라 지금은 쓰이지 않는다(마크업을 걷어냈다).
      되살릴 일이 없으면 다음 정리 때 함께 지워도 된다.
   ───────────────────────────────────────────────────────────── */

/* 주소 입력 줄 — [주소][주소 검색] 가로 배치, 그 아래 상세주소 */
.apply_tbl .addr_row { display: flex; gap: .5rem; align-items: center; margin-bottom: .4rem; }
.apply_tbl .addr_row input { flex: 1 1 auto; min-width: 0; }
.apply_tbl .addr_row .btn { flex: 0 0 auto; white-space: nowrap; }

.apply_form .file_hint { margin-top: .35rem; font-size: .9rem; color: #6b7280; }
.apply_form .file_list { margin-top: .35rem; font-size: .92rem; }
.apply_form .file_list li { color: #374151; }
.apply_form .help_apply_msg { margin-top: 1rem; color: #d92d20; font-weight: 500; }

/* 완료 화면 */
.help_complete { padding: 2rem 0 3rem; text-align: center; }
.help_complete .done_msg { font-size: 1.25rem; font-weight: 600; margin-bottom: 1.2rem; }
.help_complete .done_guide { display: inline-block; text-align: left; margin-bottom: 2rem; }
.help_complete .done_guide li { position: relative; padding-left: .9em; margin: .4em 0; color: #374151; }
.help_complete .done_guide li::before { content: "·"; position: absolute; left: 0; }

/* ── 주소 검색 팝업 ──────────────────────────────────────────
   🔴 우리 자체 마크업이다 — juso 결과를 우리 서버(프록시)에서 받아 그린다.
      외부 스크립트·iframe 이 없으므로 CSP(script-src 'self')를 건드리지 않는다. */
.addr_modal { position: fixed; inset: 0; z-index: 10001; }   /* 헤더 9999 · 통합검색 10000 위 */
.addr_modal[hidden] { display: none !important; }
.addr_dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.addr_box {
	position: relative; z-index: 1; width: min(560px, calc(100% - 2rem));
	max-height: 80vh; margin: 8vh auto 0; display: flex; flex-direction: column;
	background: #fff; border-radius: 10px; box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}
.addr_head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem; border-bottom: 1px solid #e5e7eb; }
.addr_head h3 { font-size: 1.1rem; font-weight: 600; }
.addr_x { font-size: 1.5rem; line-height: 1; background: none; border: 0; cursor: pointer; color: #6b7280; }
.addr_search { display: flex; gap: .5rem; padding: 1rem 1.2rem .6rem; }
.addr_search input { flex: 1 1 auto; min-width: 0; }
.addr_msg { padding: 0 1.2rem .4rem; color: #6b7280; font-size: .95rem; }
.addr_list { flex: 1 1 auto; overflow-y: auto; padding: 0 1.2rem; }
.addr_item {
	display: block; width: 100%; text-align: left; padding: .7rem .2rem;
	background: none; border: 0; border-bottom: 1px solid #f1f3f5; cursor: pointer;
}
.addr_item:hover, .addr_item:focus { background: #f8fafc; }
.addr_road { display: block; font-weight: 500; color: #111827; }
.addr_sub { display: block; margin-top: .15rem; font-size: .9rem; color: #6b7280; }
.addr_pager { display: flex; flex-wrap: wrap; gap: .25rem; justify-content: center; padding: .8rem 1.2rem 1.2rem; }
.addr_page { min-width: 2rem; padding: .25rem .5rem; border: 1px solid #d1d5db; border-radius: 4px; background: #fff; cursor: pointer; }
.addr_page.on { background: var(--main-color, #1b4f9c); border-color: var(--main-color, #1b4f9c); color: #fff; }

@media (max-width: 600px) {
	.apply_tbl .addr_row { flex-wrap: wrap; }
	.addr_box { margin-top: 4vh; max-height: 88vh; }
}

/* 라디오 그룹(신청분야) — 🔴 게시판 발행옵션(publish_mode)이 쓰는 것과 **같은 모양**이다.
   정의가 css/overrides/bbs.css(1164~1173)에 있는데, 이 화면은 게시판 레이아웃을 타지 않아
   그 파일을 싣지 않는다. 1,100줄짜리 게시판 CSS 를 통째로 끌어오면 예상 못 한 스타일이
   함께 딸려오므로, **필요한 세 규칙만** 같은 값으로 둔다.
   ⚠ 모양을 바꾸려면 bbs.css 쪽도 함께 고쳐야 한다(두 화면이 달라 보이면 안 된다). */
.apply_form .form_check_label {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.95rem;
	color: #333;
	cursor: pointer;
}
.apply_form .form_check_label input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--main-color, #344dcf); }
.apply_form .form_radio_group { display: flex; flex-wrap: wrap; gap: 1rem 1.2rem; }


/* ── 첨부 드롭존 (Dropzone) ─────────────────────────────────
   🔴 게시판 글쓰기와 **같은 외형**이어야 한다(지시 12). 규칙 원본은 css/overrides/bbs.css
      1182~1282 행이고, 이 화면은 게시판 레이아웃을 타지 않아 그 파일을 싣지 않는다.
      1,800줄짜리 게시판 CSS 를 통째로 끌어오면 다른 규칙이 이 화면에 새어 들어오므로
      **드롭존 규칙만** 같은 값으로 복사한다(위 .form_check_label 과 같은 방침).
   🔴 특이도 — `.form_dropzone.dropzone` 은 두 클래스(0,2,0)라 vendor `dropzone.min.css`(0,1,0)를
      **로드 순서와 무관하게** 이긴다. 그래서 이 파일이 vendor 보다 먼저 실려도 적용된다.
   🔴 구름 아이콘은 `Material Symbols Outlined` 폰트다 — 테마 css/font.css 가 @font-face 로
      자체 정의하고 _head.html 이 항상 싣는다(CDN 아님).
   ⚠ 모양을 바꾸려면 bbs.css 쪽도 함께 고쳐야 한다(두 화면이 달라 보이면 안 된다). */
.form_dropzone.dropzone {
	min-height: 150px;
	padding: 1.5rem;
	border: 2px dashed var(--line-color-dark, #c8cfdd);
	border-radius: 0.6rem;
	background: var(--grayLightest, #f5f6f9);
	cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s;
}
.form_dropzone.dropzone:hover,
.form_dropzone.dropzone.dz-drag-hover {
	border-color: var(--main-color, #344dcf);
	background: #f4f6ff;
}
.form_dropzone.dropzone .dz-message {
	margin: 1rem 0;
	text-align: center;
	color: #8a93a6;
	font-size: 0.92rem;
}
.form_dropzone.dropzone .dz-message::before {
	content: "upload_file";
	font-family: "Material Symbols Outlined";
	display: block;
	font-size: 2.6rem;
	line-height: 1;
	color: var(--line-color-dark, #c8cfdd);
	margin-bottom: 0.5rem;
}
/* 첨부 미리보기 — 기본 정사각 박스 대신 가로 파일 칩 */
.form_dropzone.dropzone .dz-preview {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	min-height: 0;
	margin: 0.4rem 0 0;
	padding: 0.35rem 0.8rem;
	background: #fff;
	border: 1px solid var(--line-color, #dde2ea);
	border-radius: 0.4rem;
	box-sizing: border-box;
}
.form_dropzone.dropzone .dz-preview .dz-image { display: none; }
.form_dropzone.dropzone .dz-preview .dz-details {
	position: static;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex: 1;
	min-width: 0;
	padding: 0;
	opacity: 1;
	background: transparent;
}
.form_dropzone.dropzone .dz-preview .dz-filename,
.form_dropzone.dropzone .dz-preview .dz-filename:hover {
	order: 1;
	flex: 1;
	min-width: 0;
	max-width: none;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-align: left;
	font-size: 0.88rem;
	color: #333;
}
.form_dropzone.dropzone .dz-preview .dz-details .dz-filename span { border: 0; background: transparent; padding: 0; }
.form_dropzone.dropzone .dz-preview .dz-details .dz-size {
	order: 2;
	flex: none;
	margin: 0;
	white-space: nowrap;
	font-size: 0.78rem;
	color: #99a0ac;
}
.form_dropzone.dropzone .dz-preview .dz-size span { background: transparent; padding: 0; }
.form_dropzone.dropzone .dz-preview .dz-progress,
.form_dropzone.dropzone .dz-preview .dz-success-mark,
.form_dropzone.dropzone .dz-preview .dz-error-mark { display: none; }
.form_dropzone.dropzone .dz-preview .dz-remove {
	position: static;
	margin: 0 0 0 auto;
	flex: none;
	display: inline-flex;
	align-items: center;
	padding: 0.25rem;
	border: 0;
	border-radius: 0.25rem;
	background: transparent;
	color: #888;
	text-decoration: none;
	cursor: pointer;
}
.form_dropzone.dropzone .dz-preview .dz-remove:hover {
	background: var(--bg-sub-light, #eceef6);
	color: #333;
	text-decoration: none;
}