/* WEBZLE kit v2 — wz-fit 게시판(원본 모드 디자인의 고객센터 게시판)
   모양(버튼·입력칸·상자·탭·태그·카드)은 디자인이 design.config.php 'ui'로 알려 준 템플릿 자신의 class가 그립니다.
   이 파일은 배치·간격만(색·글꼴·크기는 --wz-* 토큰 = 디자인 tokens.css가 템플릿 변수에 연결). 고정 색 금지. */

.wz-fit { display: grid; gap: var(--wz-space-6); }
.wz-fit-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 분류 탭·도구 줄(전체 수·검색·글쓰기) */
.wz-fit-tabs { display: flex; flex-wrap: wrap; gap: var(--wz-space-2); }
.wz-fit-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--wz-space-4); }
.wz-fit-bar__total { color: var(--wz-color-muted); font-size: var(--wz-text-sm); }
.wz-fit-bar__total strong { color: var(--wz-color-text); }
.wz-fit-bar__act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wz-space-2); }
.wz-fit-search { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wz-space-2); }
.wz-fit-search select { width: auto; min-width: 9em; }
.wz-fit-search input[type="text"] { width: auto; min-width: 14em; flex: 1 1 14em; }
/* 검색 대상·검색어 칸 글자 가운데(2026-10-20 운영자) */
.wz-fit-search select, .wz-fit-search input[type="text"] { text-align: center; text-align-last: center; }

/* 목록(공지·자유·자료실): 한 줄 = 번호 | 분류·제목·정보 */
.wz-fit-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--wz-color-text); }
.wz-fit-list__item { display: flex; align-items: center; gap: var(--wz-space-3); border-bottom: 1px solid var(--wz-color-border); }
.wz-fit-list__chk { flex: none; padding-left: var(--wz-space-3); }
.wz-fit-list__link { display: flex; align-items: center; gap: var(--wz-space-5); flex: 1; min-width: 0; padding: var(--wz-space-5) var(--wz-space-3); color: inherit; text-decoration: none; transition: background-color 0.2s ease; }
.wz-fit-list__link:hover { background: var(--wz-color-bg-soft); }
.wz-fit-list__link:hover .wz-fit-list__title { text-decoration: underline; text-underline-offset: 4px; }
.wz-fit-list__num { flex: none; min-width: 4.5em; text-align: center; color: var(--wz-color-muted); font-size: var(--wz-text-sm); }
.wz-fit-list__body { display: grid; gap: var(--wz-space-1); min-width: 0; }
.wz-fit-list__title { font-size: var(--wz-text-lg); font-weight: 700; color: var(--wz-color-text); overflow-wrap: anywhere; }
.wz-fit-list__meta { display: block; overflow: hidden; color: var(--wz-color-muted); font-size: var(--wz-text-sm); }
/* 글 정보 줄(작성자·날짜·조회·댓글·첨부): 항목 안에서는 끊지 않고(숫자 앞 줄바꿈 금지) 항목 사이에서만 줄바꿈.
   구분점은 항목 앞에 붙이고 줄 전체를 그 폭만큼 왼쪽으로 당겨, 줄 첫 항목의 구분점은 보이지 않게 */
.wz-fit-list__meta-in { display: flex; flex-wrap: wrap; margin-left: -1.4em; }
.wz-fit-list__mi { white-space: nowrap; }
.wz-fit-list__mi::before { content: "·"; display: inline-block; width: 1.4em; text-align: center; }
/* 표시 묶음(분류·답변 상태·비밀글, 2026-10-22): 제목 앞 같은 줄에 한 묶음, 제목은 이어서 자연스럽게 줄바꿈(좁은 화면은 아래 576px 절 — 제목 위 작은 줄).
   템플릿 'tag' 모양은 그대로, 목록 안에서는 작게(글자 --wz-text-xs·여백 em) */
.wz-fit-list__title .wz-fit-list__badges { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-right: 0.4em; vertical-align: middle; position: relative; top: -0.1em; font-weight: 600; line-height: 1; }
.wz-fit-list .wz-fit-list__badges > * { margin: 0; padding: 0.3em 0.7em; font-size: var(--wz-text-xs); line-height: 1.3; white-space: nowrap; letter-spacing: 0; }
/* 답변글: 작게 들여쓰고(단계마다 1.1em, 최대 3단계) 앞에 작은 ↳ */
.wz-fit-list__body.is-reply { position: relative; padding-left: calc(var(--wz-reply-depth, 1) * 1.1em); }
.wz-fit-list__body.is-reply::before { content: "↳"; position: absolute; top: 0.15em; left: calc((var(--wz-reply-depth, 1) - 1) * 1.1em); color: var(--wz-color-muted); font-size: var(--wz-text-sm); line-height: 1.6; }
.wz-fit-list__item.is-notice .wz-fit-list__link { background: var(--wz-color-bg-soft); }
.wz-fit-new { display: inline-block; margin-left: var(--wz-space-1); font-size: var(--wz-text-xs); font-weight: 800; color: var(--wz-color-danger); vertical-align: super; }
.wz-fit-empty { padding: var(--wz-space-8) 0; text-align: center; color: var(--wz-color-muted); }

/* 사진 카드 목록(갤러리·웹진): 카드 모양은 템플릿 class, 칸 나누기만 여기서 */
.wz-fit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 28rem), 1fr)); gap: var(--wz-space-6); }
.wz-fit-cards--webzine.wz-fit-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 32rem), 1fr)); }
.wz-fit-card-chk { display: block; margin-bottom: var(--wz-space-2); }
.wz-fit-post__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* 글 보기 — 가운데 한 단(2026-10-20 운영자: 글·사진 가운데 정렬, 사진 크기 통일). 단 폭은 디자인이 --wz-view-max로 바꿀 수 있음 */
.wz-fit-view { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wz-space-6); width: 100%; max-width: var(--wz-view-max, 960px); margin-inline: auto; }
/* 한 단 칸이 안 내용(이전·다음 글 긴 제목 등)에 밀려 넓어지지 않게(2026-10-22 — 1fr은 최소 폭이 내용 폭이라 375에서 칸이 화면 밖으로 넘쳤음) */
.wz-fit-view > * { min-width: 0; }
.wz-fit-view__head { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--wz-space-3); padding-bottom: var(--wz-space-5); border-bottom: 1px solid var(--wz-color-border); text-align: center; }
.wz-fit-view__meta { color: var(--wz-color-muted); font-size: var(--wz-text-sm); }
.wz-fit-view__meta strong { color: var(--wz-color-text); }
.wz-fit-view__img { display: grid; gap: var(--wz-space-4); }
/* 첨부 사진은 원본 크기와 상관없이 모두 한 단 폭(작은 사진도 같은 폭으로) */
.wz-fit-view__img a, .wz-fit-view__img img { display: block; width: 100%; }
.wz-fit-view__img img { height: auto; border-radius: var(--wz-radius-lg); }
.wz-fit-view__body { font-size: var(--wz-text-md); line-height: 1.85; overflow-wrap: anywhere; }
.wz-fit-view__body img { max-width: 100%; height: auto; margin-inline: auto; }
.wz-fit-view--photo .wz-fit-view__body { text-align: center; } /* 사진 게시판(갤러리) 설명 글은 사진 아래 가운데 */
.wz-fit-view > .wz-fit-btns { justify-content: center; }
.wz-fit-files { display: grid; gap: var(--wz-space-2); margin: 0; padding: 0; list-style: none; }
.wz-fit-files a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.wz-fit-files small { display: block; color: var(--wz-color-muted); }
.wz-fit-btns { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wz-space-2); }
.wz-fit-btns--end { justify-content: flex-end; }
.wz-fit-btns--center { justify-content: center; }
.wz-fit-nb { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--wz-color-border); }
.wz-fit-nb li { display: flex; gap: var(--wz-space-4); align-items: baseline; padding: var(--wz-space-4) var(--wz-space-2); border-bottom: 1px solid var(--wz-color-border); }
.wz-fit-nb span { flex: none; min-width: 4.5em; color: var(--wz-color-muted); font-size: var(--wz-text-sm); }
.wz-fit-nb a { display: block; flex: 1 1 0; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wz-fit-good { display: flex; justify-content: center; gap: var(--wz-space-3); }

/* 댓글 */
.wz-fit-cmt { display: grid; gap: var(--wz-space-4); }
.wz-fit-cmt__title { font-size: var(--wz-text-xl); font-weight: 800; }
.wz-fit-cmt__item { display: grid; gap: var(--wz-space-2); }
.wz-fit-cmt__head { display: flex; justify-content: space-between; gap: var(--wz-space-3); }
.wz-fit-cmt__head span { color: var(--wz-color-muted); font-size: var(--wz-text-sm); }
.wz-fit-cmt__act { display: flex; gap: var(--wz-space-3); font-size: var(--wz-text-sm); }
.wz-fit-cmt__act a { color: var(--wz-color-muted); text-decoration: underline; }

/* 입력 폼(글쓰기·댓글·회원) — 칸 모양은 템플릿 class, 줄 배치만 */
.wz-fit-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wz-space-5); }
.wz-fit-field { display: grid; gap: var(--wz-space-2); min-width: 0; }
.wz-fit-field--full { grid-column: 1 / -1; }
@media (max-width: 768px) { .wz-fit-fields { grid-template-columns: minmax(0, 1fr); } }
.wz-fit-form { display: grid; gap: var(--wz-space-5); }
.wz-fit-form .wz-fit-req { color: var(--wz-color-danger); }
.wz-fit-opts { display: flex; flex-wrap: wrap; gap: var(--wz-space-4); margin: 0; padding: 0; list-style: none; }
.wz-fit-check { display: inline-flex; align-items: center; gap: var(--wz-space-2); }
.wz-fit-check input { appearance: auto; width: 1.1em; height: 1.1em; accent-color: var(--wz-color-accent); }
.wz-fit-help { color: var(--wz-color-muted); font-size: var(--wz-text-sm); }
.wz-fit-field > .wz-fit-help { margin: 0; }
.wz-fit-check input.wz-fit-locked { cursor: not-allowed; } /* 1:1 문의(무조건 비밀글)의 체크된 비밀글 칸 — 바꿀 수 없음 */
.wz-fit-consent { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wz-space-2) var(--wz-space-4); }
.wz-fit-consent .wz-fit-check { align-items: flex-start; }
.wz-fit-consent .wz-fit-check input { flex: none; margin-top: .2em; }
.wz-fit-consent a.wz-fit-help { text-decoration: underline; text-underline-offset: 3px; }
.wz-fit-answer { white-space: nowrap; }
.wz-fit-answer.is-wait { opacity: .7; }
.wz-fit-file { display: grid; gap: var(--wz-space-2); }
.wz-fit-file input[type="file"] { max-width: 100%; }
.wz-fit-editor textarea { min-height: 24rem; }
#autosave_wrapper { position: relative; display: flex; gap: var(--wz-space-2); align-items: stretch; }
#autosave_wrapper > input { flex: 1; }
#autosave_pop { display: none; position: absolute; top: 100%; right: 0; z-index: var(--wz-z-raised); width: min(36rem, 100%); padding: var(--wz-space-4); background: var(--wz-color-surface); border: 1px solid var(--wz-color-border); border-radius: var(--wz-radius-md); box-shadow: var(--wz-shadow-2); }
#autosave_pop ul { list-style: none; margin: var(--wz-space-2) 0; padding: 0; }

/* 키트 기본(디자인 'ui'가 없을 때만 보이는 모양) */
.wz-fit-input { width: 100%; padding: var(--wz-space-3) var(--wz-space-4); border: 1px solid var(--wz-color-border); border-radius: var(--wz-radius-sm); background: var(--wz-color-surface); color: var(--wz-color-text); }
.wz-fit-textarea { min-height: 16rem; }
.wz-fit-label { font-weight: 700; font-size: var(--wz-text-sm); }
.wz-fit-card { padding: var(--wz-space-5); border: 1px solid var(--wz-color-border); border-radius: var(--wz-radius-lg); background: var(--wz-color-surface); }
.wz-fit-tag { display: inline-block; padding: 0 var(--wz-space-2); border: 1px solid var(--wz-color-border); border-radius: var(--wz-radius-pill); font-size: var(--wz-text-xs); }
.wz-fit-tab { padding: var(--wz-space-2) var(--wz-space-4); border: 1px solid var(--wz-color-border); border-radius: var(--wz-radius-pill); }
.wz-fit-tab.is-on, .wz-fit-page.is-on { background: var(--wz-color-accent); color: var(--wz-color-accent-ink); }
.wz-fit-pages { display: flex; justify-content: center; gap: var(--wz-space-2); }
.wz-fit-page { min-width: 2.6em; padding: var(--wz-space-2); text-align: center; border: 1px solid var(--wz-color-border); border-radius: var(--wz-radius-sm); }
.wz-fit-post { display: grid; gap: var(--wz-space-2); }
.wz-fit-post__title { font-weight: 700; }
.wz-fit-post__meta, .wz-fit-post__text { color: var(--wz-color-muted); font-size: var(--wz-text-sm); }

/* 회원 화면(로그인·약관·가입 완료·비밀번호 확인·정보 입력) */
.wz-fit-box { width: min(100%, 52rem); margin-inline: auto; display: grid; gap: var(--wz-space-5); }
.wz-fit-pw__subject { margin: 0; font-weight: 700; overflow-wrap: anywhere; } /* 비밀번호 확인 화면의 글 제목 */
.wz-fit-box__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--wz-space-3); }
.wz-fit-fields--one { grid-template-columns: minmax(0, 1fr); }
.wz-fit-btns--between { justify-content: space-between; }
.wz-fit-btn--block { width: 100%; justify-content: center; }
.wz-fit-link { color: var(--wz-color-muted); text-decoration: underline; text-underline-offset: 3px; font-size: var(--wz-text-sm); }
.wz-fit-terms { width: 100%; min-height: 16rem; resize: vertical; font-size: var(--wz-text-sm); line-height: 1.7; }
.wz-fit-table-wrap { overflow-x: auto; }
.wz-fit-table { width: 100%; border-collapse: collapse; font-size: var(--wz-text-sm); }
.wz-fit-table th, .wz-fit-table td { padding: var(--wz-space-3); border: 1px solid var(--wz-color-border); text-align: left; vertical-align: top; word-break: keep-all; overflow-wrap: break-word; }
.wz-fit-table th { background: var(--wz-color-bg-soft); font-weight: 700; }
.wz-fit-dl { display: grid; gap: var(--wz-space-2); margin: 0; }
.wz-fit-dl div { display: flex; gap: var(--wz-space-3); }
.wz-fit-dl dt { min-width: 7em; color: var(--wz-color-muted); }
.wz-fit-dl dd { margin: 0; font-weight: 700; }
.wz-fit-member section.wz-fit-card, .wz-fit-member > form > section { display: grid; gap: var(--wz-space-3); }
/* 그누보드 기본 입력칸(frm_input) 높이 고정을 풀어 템플릿 입력칸 class의 여백이 그대로 보이게 */
.wz-fit-member .frm_input, .wz-fit .frm_input { height: auto; line-height: normal; }
.register .btn_frmline { height: auto; }
/* 템플릿 상자(card) class의 바깥 여백은 이 스킨의 간격(gap)으로 대신함 */
.wz-fit .wz-fit-cmt__item, .wz-fit-view > section, .wz-fit-member > form > section { margin: 0; }
.wz-fit .wz-fit-box { margin: 0 auto; } /* 로그인·가입 완료 상자는 가운데 */
/* 버튼 글자는 가운데(템플릿 버튼이 inline-flex여도) */
.wz-fit-btn { justify-content: center; text-align: center; }
/* 댓글 상자 안 답글·수정 폼 자리(비어 있으면 간격을 만들지 않게) */
.wz-fit-cmt__item > span:empty { display: none; }
/* 자동등록방지(캡차, wz/ui.php wz_ui_captcha — fieldset.wz-fit-cap): 숫자 그림·듣기·새로고침 한 줄, 입력칸은 다음 줄 전체 폭.
   단추·입력칸 모양은 템플릿 class('ui' btn·input, 없으면 키트 기본 wz-btn--ghost·wz-fit-input) — 여기서는 크기·배치만(2026-10-22 반응형 보수).
   단추 높이 = 숫자 그림 높이(--wz-cap-h, 디자인이 바꿀 수 있음). 템플릿 단추의 여백·최소 폭은 정사각 아이콘 단추로 풂 */
fieldset#captcha.wz-fit-cap { --wz-cap-h: var(--wz-captcha-h, 48px); display: flex; flex-wrap: wrap; align-items: center; gap: var(--wz-space-2); min-inline-size: 0; width: 100%; margin: 0; padding: 0; border: 0; }
.wz-fit-cap #captcha_img { order: 1; display: block; flex: none; width: auto; height: var(--wz-cap-h); max-width: calc(100% - 2 * var(--wz-cap-h) - 2 * var(--wz-space-2)); margin: 0; padding: 0; object-fit: contain; border: 1px solid var(--wz-color-border); border-radius: var(--wz-radius-sm); vertical-align: middle; }
.wz-fit-cap .wz-fit-cap__btn.wz-fit-cap__btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--wz-cap-h); height: var(--wz-cap-h); min-width: 0; min-height: 0; margin: 0; padding: 0; gap: 0; line-height: 1; text-indent: 0; cursor: pointer; }
.wz-fit-cap .wz-fit-cap__btn svg { display: block; flex: none; width: 20px; height: 20px; }
.wz-fit-cap #captcha_mp3 { order: 2; }
.wz-fit-cap #captcha_reload { order: 3; }
.wz-fit-cap .wz-fit-cap__key.wz-fit-cap__key { order: 4; flex: 1 1 100%; width: 100%; min-width: 0; margin: 0; text-align: center; font-weight: 700; letter-spacing: 0.3em; }
.wz-fit-cap #captcha_info { order: 5; flex: 1 1 100%; display: block; margin: 0; color: var(--wz-color-muted); font-size: var(--wz-text-sm); letter-spacing: 0; }
.wz-fit-cap #captcha_audio { order: 6; flex: 1 1 100%; display: block; width: 100%; max-width: 100%; margin: 0; } /* 휴대폰 접속(그누보드 is_mobile)은 듣기 단추 대신 재생 막대 */
/* 묶음 메뉴(wz_ui_subnav) 아래 간격 — 디자인 CSS가 덮어쓸 수 있음 */
.wz-fit-subnav { margin-bottom: var(--wz-space-6); justify-content: center; }
/* 사진 게시판(갤러리) 카드: 제목·날짜 가운데 */
.wz-fit-cards--gallery > * { text-align: center; }

/* 휴대폰(576px 이하, 2026-10-22 반응형 검수): 번호 칸·간격을 줄여 제목이 3~4줄로 깨지지 않게, 비밀글·답변 표시는 작게 */
@media (max-width: 576px) {
  .wz-fit-list__link { gap: var(--wz-space-3); padding: var(--wz-space-4) var(--wz-space-2); }
  .wz-fit-list__num { min-width: 2.2em; font-size: var(--wz-text-xs); }
  .wz-fit-list__title { font-size: var(--wz-text-md); line-height: 1.5; }
  .wz-fit-list__title .wz-fit-list__badges { display: flex; width: fit-content; max-width: 100%; margin: 0 0 6px; top: 0; }
  .wz-fit-list__meta { font-size: var(--wz-text-xs); }
  /* 표(회원가입 개인정보 수집 표): 글자·여백을 줄이고, 약관 표는 칸 폭을 정해(목적 44 · 항목 30 · 보유 기간 26%) 긴 칸이 3줄 넘게 꺾이지 않게 */
  .wz-fit-table { font-size: var(--wz-text-xs); line-height: 1.6; }
  .wz-fit-table th, .wz-fit-table td { padding: var(--wz-space-2); }
  .wz-fit-table--terms { table-layout: fixed; }
  .wz-fit-table--terms th:nth-child(1) { width: 44%; }
  .wz-fit-table--terms th:nth-child(2) { width: 30%; }
  .wz-fit-table--terms th:nth-child(3) { width: 26%; }
}

/* WEBZLE kit v2 — 휴대폰 회원가입 동의 줄: 본문 글자가 큰 디자인(17px 등)에서 체크 글자가 두 줄로 갈라짐 → 작은 글자, 체크 칸은 첫 줄에 붙임(2026-10-23 CORP-002 검수 K1) */
@media (max-width: 576px) {
  #fregister .wz-fit-check, #fregisterform .wz-fit-check { display: flex; align-items: flex-start; font-size: var(--wz-text-sm); line-height: 1.5; }
  #fregister .wz-fit-check input, #fregisterform .wz-fit-check input { flex: none; margin-top: .2em; }
}

/* WEBZLE kit v2 — 태블릿에서 카드 칸 최소 폭(28·32rem)이 커 1칸으로 늘어지던 것: 1199 이하에서만 작게(1200 이상 화면은 그대로 — 2026-10-23 CHURCH 검수 #7) */
@media (max-width: 1199px) {
  .wz-fit-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
  .wz-fit-cards--webzine.wz-fit-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); }
}

/* WEBZLE kit v2 — 휴대폰(576 이하) 목록 검색 줄·고객센터 묶음 탭(2026-10-23 AUTO 검수 #7·#8)
   검색: [분류][입력칸][검색] 한 줄(입력칸이 남은 폭) — 전에는 "검색" 단추만 아래 줄로
   탭: 칸 수에 따라 마지막 하나가 혼자 전체 폭으로 남던 것 → 같은 폭 격자 */
@media (max-width: 576px) {
  .wz-fit-search { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
  .wz-fit-search select { min-width: 0; max-width: 8.5em; }
  .wz-fit-search input[type="text"] { min-width: 0; width: 100%; }
  .wz-fit-search > button, .wz-fit-search > a { min-width: 0 !important; padding-inline: 1.1em !important; white-space: nowrap; }
  .wz-fit-subnav:not(.wz-fit-subnav--inline) { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(6.4em, 1fr)); gap: var(--wz-space-2); }
  .wz-fit-subnav:not(.wz-fit-subnav--inline) > * { margin: 0 !important; min-width: 0; text-align: center; justify-content: center; white-space: nowrap; padding-inline: .4em !important; font-size: var(--wz-text-sm); }
}