/* ==========================================================================
   WZ-GYM-001 그누보드 보정 — 원본 fitmas-kr.css 뒤에 붙습니다. 원본 규칙은 고치지 않고, 원본에 없는 것만 더합니다.
   1) 원본 화면을 키트 공통 기본값에서 지킴(폼 요소 글꼴·긴 낱말 줄바꿈·키트 .btn 높이)
   2) 그누보드 때문에 바뀐 태그의 원본 모양(상세 머리 글자 · 상세 본문 제목 h1 · 둘째 슬라이드 제목 · 법정 고지 링크 · 사진 칸 비율)
   3) 그누보드가 더하는 것(캡차·개인정보 동의·댓글 줄·관리자 버튼·고객센터 화면 틀·입력칸·탭·쪽 번호·사진 카드)을 원본 모양으로
   ========================================================================== */

/* 1) 키트 wz-base.css(레이어)의 폼 요소 font: inherit가 원본이 정하지 않은 단추·입력칸 줄 높이·굵기를 바꾸지 않게(우선순위 0 — 원본 CSS가 정한 값은 그대로 이김).
   원본에 없는 그누보드 화면 틀(.gym-g5)은 키트 기본값 유지 */
:where(.wz-original) :where(.nav-header, .popup-search-box, .sidemenu-wrapper, .mobile-menu-wrapper, .member-bar, .hero-wrapper, .footer-wrapper, main > :not(.gym-g5)) :where(button, input, select, textarea) { font: revert; }
/* 키트 body { overflow-wrap: break-word }는 원본에 없음 — 원본 화면은 원본대로, 그누보드 화면 틀만 키트 값 */
body.wz-original { overflow-wrap: normal; }
.gym-g5 { overflow-wrap: break-word; }
/* 키트 g5-compat(그누보드 default.css)의 .btn(높이 35px)이 원본 .btn(위아래 여백으로 높이를 정함)을 납작하게 하지 않게 — 우선순위 0, 원본 크기 class가 이김 */
:where(.wz-original) :where(.btn) { height: auto; }

/* 2) 그누보드 때문에 바뀐 태그의 원본 모양
   상세 화면(칼럼·바디챌린지·상품) 머리: 원본 h1 "… 상세"는 그대로 보이되 h1이 아닌 글자(이 화면의 h1 = 본문 제목). 원본 h1 태그 규칙(글꼴·대소문자)을 같은 값으로 */
.breadcumb-title.gym-h1 { font-family: var(--title-font); text-transform: none; }
/* 상세 본문 제목: 원본 h3.page-subtitle·h2.product-title 자리를 h1로(모양 class는 원본 그대로) — 원본 태그 규칙의 줄 높이만 원래 태그 값으로 */
.project-details-single-page h1.page-subtitle { line-height: 1.278; }
.product-about h1.product-title { line-height: 1.227; }
@media (max-width: 1199px) { .product-about h1.product-title { line-height: 1.25; } }
@media (max-width: 767px) { .product-about h1.product-title { line-height: 1.3; } }
/* 바닥 저작권 줄의 개인정보처리방침·이용약관(원본 저작권 줄 링크 모양) */
.gym-legal a { margin-left: 14px; }
.gym-legal a + a::before { content: "|"; margin-right: 14px; color: rgba(255, 255, 255, 0.3); }
/* 게시판 사진 칸: 관리자가 올린 사진 비율이 원본 칸과 달라도 원본 칸 비율로 채움(원본 견본 사진은 칸과 같은 비율) */
.blog-card .blog-img img { aspect-ratio: 391 / 258; object-fit: cover; }
.blog-card.style2 .blog-img img { aspect-ratio: 300 / 220; }
.blog-area-2 .blog-card.style2 .blog-img img { aspect-ratio: 350 / 240; }
.blog-card.style4 .blog-img img { aspect-ratio: 805 / 500; }
.blog-single .blog-thumb img { aspect-ratio: 773 / 500; object-fit: cover; }
.recent-post .media-img img { aspect-ratio: 1 / 1; object-fit: cover; }
.project-card .project-img img { aspect-ratio: 442 / 457; object-fit: cover; }
.project-details-single-page > .thumb img { aspect-ratio: 1220 / 542; object-fit: cover; }
.product-card .product-img img { aspect-ratio: 287 / 280; object-fit: cover; }
.product-thumb .img img { aspect-ratio: 520 / 600; object-fit: cover; }
/* 사진 없는 글 그림(wz_noimg)·약관 예시 문안 안내: 원본 빨강 */
.wz-noimg, .wz-policy-note { --wz-noimg-accent: var(--theme-color); --wz-policy-accent: var(--theme-color); }
.blog-img .wz-noimg, .project-img .wz-noimg, .product-img .wz-noimg, .blog-thumb .wz-noimg, .product-thumb .img .wz-noimg { aspect-ratio: 4 / 3; height: auto; }
.recent-post .media-img .wz-noimg { width: 80px; height: 80px; }
/* 글 본문의 둘째 첨부 사진·에디터로 새로 쓴 글의 표시 없는 사진 */
.gym-post-img { margin: 30px 0 0; }
.blog-single .blog-content img:not([class]), .project-details-single-page .col-xxl-8 img:not([class]) { max-width: 100%; height: auto; }
/* 칼럼 공유 "링크 복사"를 누른 뒤 */
a.is-copied { color: var(--theme-color); }

/* 3-1) 원본에 없는 그누보드 화면(고객센터 게시판·회원·1:1 문의·글쓰기·검색·FAQ)이 들어가는 원본 기본 구역(.space — 위아래 120px) */
.gym-g5 { min-height: 420px; }
.gym-g5 > .container > :first-child { margin-top: 0; }
/* 원본 CSS의 태그 규칙(input·select·textarea 높이 60px·폭 100%·여백)이 키트 스킨의 체크박스·라디오까지 바꾸고, 원본은 체크박스를 숨기고 바로 뒤 이름표(input ~ label)에 네모를 그림.
   키트 스킨(wz-fit)·댓글 폼은 이름표가 칸을 감싸므로(label > input) 그 칸만 브라우저 기본 체크박스로 보이게(원본 빨강) */
:is(.gym-g5, .comment-form, .gym-captcha) label > :is(input[type="checkbox"], input[type="radio"]) { display: inline-block; visibility: visible; opacity: 1; width: 17px; height: 17px; padding: 0; margin: 0 6px 0 0; background: none; border: 0; border-radius: 0; appearance: auto; accent-color: var(--theme-color); vertical-align: -3px; }
.gym-g5 .wz-fit-check { display: inline-flex; align-items: center; gap: 0; margin: 0; padding: 0; }
/* 그누보드 자동등록방지 숫자 그림: 원본 img 규칙(height: auto)이 그누보드 그림 크기 속성(1×1)을 그대로 써서 보이지 않음 → 그림 높이 고정 */
#captcha #captcha_img { width: auto; height: 50px; }
.gym-g5 :is(input[type="file"]) { height: auto; padding: 12px 16px; }
.gym-g5 :where(label) { margin-top: 0; }
.gym-g5 :where(#bo_v_con, .wz-fit-view__body, .wz-content, #ctt_con) :where(table) { width: auto; max-width: 100%; }

/* 3-2) 관리자에게만 보이는 버튼·빈 목록 안내 */
.gym-admin { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin: 30px 0 0; }
.portfolio-area .gym-admin, .shop-area .gym-admin { justify-content: center; }
.gym-empty { width: 100%; padding: 40px 15px; text-align: center; color: var(--body-color); }

/* 3-3) 상담 신청·댓글 폼: 그누보드 캡차·개인정보 동의·비밀 댓글을 원본 입력칸 모양으로. 자동등록방지는 숫자 그림·듣기·새로고침 한 줄, 입력칸은 다음 줄 전체 폭 */
.gym-captcha #captcha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border: 0; padding: 0; margin: 0; }
.gym-captcha #captcha legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.gym-captcha #captcha #captcha_img { order: 1; display: inline-block; height: 50px; width: auto; background: var(--white-color); border-radius: 5px; }
.gym-captcha #captcha #captcha_mp3,
.gym-captcha #captcha #captcha_reload { width: 50px; height: 50px; border: 0; border-radius: 5px; background-color: var(--white-color); }
.gym-captcha #captcha #captcha_mp3 { order: 2; }
.gym-captcha #captcha #captcha_reload { order: 3; }
/* 자동등록방지 입력칸 = 원본 입력칸(.form-control.style-white)과 같은 값 */
.gym-captcha #captcha #captcha_key { order: 4; flex: 1 1 100%; display: block; width: 100%; height: 60px; line-height: normal; padding: 0 30px; margin: 0; font-size: 16px; color: var(--body-color); border: 1px solid transparent; border-radius: 5px; background: var(--white-color); }
.gym-captcha #captcha #captcha_key:focus { border-color: var(--theme-color); }
.gym-captcha #captcha #captcha_info { order: 5; flex-basis: 100%; font-size: 13px; line-height: 1.5; color: var(--body-color); }
.gym-consent { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 20px; font-size: 14px; line-height: 1.6; text-align: left; color: var(--body-color); }
.gym-consent label { margin: 0; font-size: 14px; line-height: 1.6; color: var(--body-color); } /* 앞 네모 = 원본 체크박스 모양(input ~ label:before) */
.gym-consent a { color: var(--theme-color); text-decoration: underline; }
.gym-check { display: inline-flex !important; align-items: center; gap: 6px; margin: 0 18px 0 0 !important; font-size: 14px !important; font-weight: 500; cursor: pointer; vertical-align: middle; }
/* 댓글 폼 손님 비밀번호 칸 아이콘 자리(원본 이메일 칸 아이콘 자리) */
.comment-form .form-group > i.fa-lock { padding-top: 1px; }
/* 문의 보기(관리자) 위 칸 요약 */
.gym-inquiry-info { margin-bottom: 28px; }
.gym-inquiry-info p { margin: 0; line-height: 1.8; }

/* 3-4) 댓글 사진이 없을 때 이름 첫 글자(원본 .comment-avater 110px 자리) */
.gym-avatar { display: flex; align-items: center; justify-content: center; width: 110px; height: 110px; border-radius: 50%; background: var(--title-color); color: var(--white-color); font-family: var(--title-font); font-size: 36px; font-weight: 600; }
.comment-content .gym-tag { vertical-align: 2px; }

/* 3-5) 고객센터·회원 화면 이름표(원본 폼에는 이름표가 없어 원본 소제목 글꼴로) */
.gym-label { display: block; margin: 0 0 10px; font-family: var(--title-font); font-size: 16px; font-weight: 500; color: var(--title-color); }
/* 상자(원본 작성자 소개·댓글 폼 상자 .bg-smoke2) · 작은 표시(원본 상품 배지 .product-tag 모양) */
.gym-card { padding: 30px; border-radius: 10px; }
.gym-tag { display: inline-block; padding: 2px 12px; font-family: var(--title-font); font-size: 13px; font-weight: 500; line-height: 1.7; color: var(--white-color); background: var(--theme-color); border-radius: 4px; }
/* 키트 버튼 자리(wz-fit — 목록·글쓰기·로그인)의 원본 버튼: 원본 .btn 위아래 여백 그대로, 테두리 버튼은 원본 머리 단추처럼 */
.wz-fit-btn.gym-btn { min-height: 0; }
.btn.btn-border.gym-btn { padding: 18.5px 30px 20.5px; }

/* 3-6) 분류 탭·고객센터 묶음 메뉴(원본 GX 시간표 요일 단추 .btn.style4 모양을 작게 — 사선 바탕, 선택 빨강) */
.gym-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 40px; padding: 0; }
.gym-tab { position: relative; z-index: 1; display: inline-block; padding: 12px 24px; font-family: var(--title-font); font-size: 15px; font-weight: 500; line-height: 1; color: var(--title-color); }
.gym-tab::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--smoke-color); border-radius: 6px; transform: skewX(-10deg); transition: 0.4s; }
.gym-tab:hover, .gym-tab.active { color: var(--white-color); }
.gym-tab:hover::before, .gym-tab.active::before { background: var(--theme-color); }
.wz-fit-subnav.gym-tabs { margin-bottom: 50px; }
@media (max-width: 767px) { .gym-tab { flex: 1 1 auto; padding: 11px 14px; font-size: 14px; text-align: center; } }

/* 3-7) 쪽 번호(원본 .pagination a — 둥근 회색 50px, 지금 쪽·호버 빨강) */
.gym-pages, .wz-fit-pages.gym-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 60px 0 30px; padding: 0; }
.gym-page { display: inline-block; min-width: 50px; height: 50px; padding: 0 6px; line-height: 50px; text-align: center; font-size: 16px; font-weight: 700; color: var(--title-color); background: var(--smoke-color3); border-radius: 50%; }
a.gym-page:hover, .gym-page.active { background: var(--theme-color); color: var(--white-color); }

/* 3-8) 고객센터 사진 카드(키트 wz-fit 갤러리·웹진 = 원본 2단 칼럼 카드 .blog-card.style2 모양 — 사진 위·흰 글 칸) 3열 */
.gym-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
@media (max-width: 991px) { .gym-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .gym-grid { grid-template-columns: 1fr; } }
.gym-grid > .blog-card.style2.gym-post { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 0; height: 100%; overflow: hidden; } /* 원본 2단 카드(가로·회색 상자·카드 사이 24px)를 세로 사진 카드로 */
.gym-post .gym-post-media { position: relative; display: block; margin: 0; overflow: hidden; border-radius: 10px 10px 0 0; }
.gym-post .gym-post-media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.4s ease; }
.gym-post:hover .gym-post-media img { transform: scale(1.05); }
.gym-post .gym-post-media .wz-noimg { aspect-ratio: 4 / 3; height: auto; }
.gym-post-badge { position: absolute; left: 16px; top: 16px; z-index: 2; }
.gym-grid .gym-post .gym-post-body { padding: 24px 26px 26px; }
.gym-post .gym-post-title { margin: 6px 0 0; font-size: 20px; line-height: 1.4; }
.gym-post .gym-post-meta { margin: 0; }
.gym-post-text { margin: 10px 0 0; font-size: 15px; line-height: 1.7; color: var(--body-color); }

/* 3-9) 메인 시안 3 방문 예약 폼 연락처 칸: 원본 type="number" → type="tel"(하이픈 입력) — 원본 입력칸 규칙은 태그·class라 모양 같음 */

/* 3-10) 키트 스킨 입력칸을 원본 기본 입력칸(.form-control — 연회색 바탕·테두리 없음·모서리 5px)으로 맞춤: 그누보드 본문 칸(#wr_content)·자동등록방지 칸은 id 규칙이 앞서므로 같은 id로.
   상자(.gym-card = 원본 .bg-smoke2) 안 입력칸은 원본 상담 폼처럼 흰 바탕(.style-white) */
.gym-g5 #wr_content.form-control { background-color: var(--smoke-color); border-color: transparent; border-radius: 5px; }
.gym-g5 #wr_content.form-control:focus { border-color: var(--theme-color); }
.gym-g5 #captcha #captcha_key { height: 60px; padding: 0 30px; font-size: 16px; color: var(--body-color); background-color: var(--smoke-color); border: 1px solid transparent; border-radius: 5px; }
.gym-g5 #captcha #captcha_key:focus { border-color: var(--theme-color); }
.gym-g5 #captcha #captcha_mp3, .gym-g5 #captcha #captcha_reload { width: 50px; height: 50px; }
.gym-card :is(.form-control, .form-select, #captcha_key) { background-color: var(--white-color); }

/* 4) 반응형 보정(2026-10-23 — handoff/reports/WZ-GYM-001/responsive/fixes.md). 원본 CSS 파일은 그대로, 여기서만 덮어씀 */
/* 4-1) 기본 머리(메인 1·서브): 그누보드 메뉴 "고객센터"(원본보다 한 칸 많음) 때문에 992~1399px에서 메뉴 줄이 넘쳐 사이드 메뉴 단추가 다음 줄로 → 메뉴 칸 사이만 좁힘(원본 11px) */
@media (min-width: 992px) and (max-width: 1399px) {
  .header-layout1 .main-menu > ul > li { margin-left: 6px; margin-right: 6px; }
  .header-layout1 .main-menu > ul > li:first-child { margin-left: 0; }
  .header-layout1 .main-menu > ul > li:last-child { margin-right: 0; }
}
@media (min-width: 992px) and (max-width: 1049px) {
  .header-layout1 .main-menu > ul > li { margin-left: 3px; margin-right: 3px; }
  .header-layout1 .main-menu > ul > li:first-child { margin-left: 0; }
  .header-layout1 .main-menu > ul > li:last-child { margin-right: 0; }
}
/* 4-2) 칼럼 카드 제목·서브 머리 제목·위치 표시: 원본 word-break: break-word(영문 템플릿 값)가 한글을 낱자로 끊음("가이/드") → 낱말 단위(긴 영문·주소는 body overflow-wrap이 끊음) */
.blog-title, .pagi-title, .breadcumb-title, .breadcumb-menu li, .breadcumb-menu a, .breadcumb-menu span { word-break: keep-all; }
/* 4-3) 메인 1·멤버십 요금 칼럼 카드 요약: 실제 글 요약 길이가 달라 한 줄 차이로 카드 높이가 어긋남 → 원본처럼 3줄 */
.blog-card:not([class*="style"]) .blog-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
/* 4-4) 센터 운영시간 위젯(프로그램 상세·바디챌린지 상세): 원본 높이 55px 고정이라 좁은 폭에서 "(둘째 주 일요일 정기점검)"이 칸 밖으로 → 줄이 늘면 칸도 늘게(한 줄일 때 55px 그대로) */
.widget_schedule ul li { display: flex; align-items: center; height: auto; min-height: 55px; line-height: 1.5; padding-top: 14.5px; padding-bottom: 14.5px; }
.widget_schedule ul li i { flex: none; }
/* 4-5) 자동등록방지 legend(화면 밖 이름표): 원본 legend { width: 100% }가 남아 1:1 문의 글쓰기에서 문서 폭이 12~110px 넓어짐(가로 스크롤) */
#captcha legend { left: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* 4-6) 전체검색(375px): 키트 .wz-fit-sch 격자 칸(auto)이 안의 최소 폭(게시판 탭·폼 줄 369px)만큼 늘어 화면보다 넓어짐(가로 스크롤 6~9px) → 칸을 화면 폭 안으로 */
.gym-g5 .wz-fit-sch { grid-template-columns: minmax(0, 1fr); }
/* 4-7) 상담 화면 연락 카드: 이메일(원본 info@보다 긴 주소)이 1024·1440px에서 카드 밖으로 → @ 뒤 줄바꿈 허용(make-pieces.mjs <wbr>) */
.contact-info .media-body { min-width: 0; }
/* 4-8) 바닥 연락 줄(992~1399px): 이메일(원본보다 긴 주소)이 칸을 채워 대표 전화가 "02-558- / 7790"으로 끊김(원본도 전화·주소 두 줄) → 글자 조금 작게(22→18px), 전화는 한 줄 */
@media (min-width: 992px) and (max-width: 1399px) {
  .footer-wrapper .contact-card .info-card_link { font-size: 18px; }
  .footer-wrapper .contact-card .info-card_link[href^="tel:"] { white-space: nowrap; }
}
/* 4-9) 메인 시안 3(991px 이하): 원본은 머리(로고·메뉴 단추)가 화면 맨 위 top 0이라 회원 바(36→32px)·데모 바 밑에 가려 첫 화면에 메뉴가 안 보임 → 회원 바 아래로 */
@media (max-width: 991.98px) {
  body.home-3 .header-layout3 { top: calc(var(--wz-demo-bar-h) + 32px); }
  html.no-member-bar body.home-3 .header-layout3 { top: var(--wz-demo-bar-h); }
}
/* 4-10) 바닥 저작권 줄(1399px 이하): 그누보드가 더한 개인정보처리방침·이용약관 링크가 줄 끝에서 끊겨 "이용약관"만 다음 줄로 → 두 링크를 함께 다음 줄 가운데 */
@media (max-width: 1399px) {
  .copyright-text .gym-legal { display: block; margin-top: 4px; }
  .copyright-text .gym-legal a:first-child { margin-left: 0; }
}