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

/* 1) 키트 wz-base.css(레이어)의 폼 요소 font: inherit가 원본이 정하지 않은 단추·입력칸 줄 높이·굵기를 바꾸지 않게(우선순위 0 — 원본 CSS가 정한 값은 그대로 이김).
   원본에 없는 그누보드 화면 틀(.gaon-g5)·회원 화면은 키트 기본값 유지 */
:where(.wz-original) :where(.member-bar, #header, .gf-modal, .footer-area, main > :not(.gaon-g5, .gaon-account)) :where(button, input, select, textarea) { font: revert; }
/* 키트 body { overflow-wrap: break-word }는 원본에 없음 — 원본 화면은 원본대로(원본 body는 word-break: keep-all), 그누보드 화면 틀만 키트 값 */
body.wz-original { overflow-wrap: normal; }
.gaon-g5, .gaon-account { overflow-wrap: break-word; }
/* 키트 g5-compat(그누보드 default.css)의 .btn(높이 35px)이 원본 .btn(위아래 여백으로 높이를 정함)을 납작하게 하지 않게 — 우선순위 0, 원본 크기 class가 이김 */
:where(.wz-original) :where(.btn) { height: auto; }
/* 원본 CSS의 태그 규칙 section { padding: 120px 0(휴대폰 85·72px); 배경 cover }이 키트 스킨 안의 section(로그인 상자·글 보기 첨부·댓글)에도 걸림 →
   그누보드 화면 틀 안의 section만 끔(우선순위 = 원본 태그 규칙과 같고 파일이 뒤라 이김, 키트 class 규칙은 그대로 이김) */
:where(.gaon-g5 > .container, .gaon-account .container, .blog-single) section { position: static; width: auto; padding: 0; background: none; }
@media (max-width: 991px) { :where(.gaon-g5 > .container, .gaon-account .container, .blog-single) section { padding: 0; } }

/* 2) 그누보드 때문에 바뀐 태그의 원본 모양
   블로그 상세 머리: 원본 h1 "블로그 상세"는 그대로 보이되 h1이 아닌 글자(이 화면의 h1 = 본문 글 제목). 원본 h1 태그 규칙을 같은 값으로 */
.gaon-h1 { font-family: var(--gf-font-sans); font-size: 3.5rem; font-weight: 600; line-height: 1.22; margin-top: 0; }
/* 상세 본문 제목: 원본 h2 자리를 h1로 — 원본 h2 태그 규칙 값 */
.blog-single h1.gaon-post-title { font-size: 2.65rem; line-height: 1.28; margin: 1rem 0 1.25rem; }
@media (max-width: 991px) { .gaon-h1 { font-size: 2.6rem; } .blog-single h1.gaon-post-title { font-size: 2rem; } }
@media (max-width: 767px) { .gaon-h1 { font-size: 2.15rem; } .blog-single h1.gaon-post-title { font-size: 1.75rem; } }
/* 게시판 사진 칸: 관리자가 올린 사진 비율이 원본 칸과 달라도 원본 칸 비율(4:3)로 채움(원본 견본 사진은 800×600) */
.blog-item .card-thumb img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.related-posts .blog-item .card-thumb img { aspect-ratio: 1 / 1; width: 72px; }
.blog-single .post-thumbnail img { aspect-ratio: 4 / 3; }
/* 사진 없는 글 그림(wz_noimg)·약관 예시 문안 안내: 원본 보라 */
.wz-noimg, .wz-policy-note { --wz-noimg-accent: var(--gf-purple); --wz-policy-accent: var(--gf-purple); }
.card-thumb .wz-noimg, .post-thumbnail .wz-noimg { display: flex; aspect-ratio: 4 / 3; height: auto; border-radius: var(--gf-radius-sm); }
.related-posts .card-thumb .wz-noimg { width: 72px; height: 72px; aspect-ratio: auto; }
/* 글 본문의 둘째 첨부 사진·에디터로 새로 쓴 글의 표시 없는 사진 */
.gaon-post-img { margin: 24px 0 0; }
.gaon-post-img img, .blog-single img:not([class]) { max-width: 100%; height: auto; border-radius: var(--gf-radius-sm); }
/* 작성자 사진이 없을 때 이름 첫 글자(원본 author.webp 자리) */
.gaon-avatar { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: var(--gaon-avatar, 48px); height: var(--gaon-avatar, 48px); border-radius: 50%; background-image: linear-gradient(150deg, var(--gf-indigo) 0%, var(--gf-purple) 78%); color: #fff; font-weight: 600; }
.blog-item .card-overlay .logo .gaon-avatar { --gaon-avatar: 40px; }

/* 3-1) 원본에 없는 그누보드 화면(고객센터 게시판·1:1 문의·글쓰기·검색·약관)이 들어가는 원본 기본 구역(section — 위아래 120px) */
.gaon-g5 { min-height: 420px; }
.gaon-g5 > .container > :first-child { margin-top: 0; }
.gaon-g5 :where(#bo_v_con, .wz-fit-view__body, .wz-content, #ctt_con) :where(table) { width: auto; max-width: 100%; }
/* 그누보드 자동등록방지 숫자 그림: 원본 img 규칙(height: auto)이 그누보드 그림 크기 속성(1×1)을 그대로 써서 보이지 않음 → 그림 높이 고정 */
#captcha #captcha_img { width: auto; height: 50px; }

/* 3-2) 원본 전체 화면 계정 구역(로그인·회원가입·비밀번호 찾기): 부트스트랩 .vh-100(height: 100vh !important)이 긴 가입 폼을 잘라 내지 않게 높이는 최소값으로(원본 gaon-app.css .vh-100 = min-height 100vh) */
.gaon-account.vh-100 { height: auto !important; }
.gaon-account .wz-fit-member { max-width: none; margin: 0; }
.gaon-account .wz-fit-box { width: 100%; }
.gaon-account .hero-form { text-align: left; }
.gaon-account .wz-fit-cmt__title { margin: 0 0 0.25rem; font-size: 1.85rem; color: var(--gf-heading); } /* 원본 카드 제목(h3) 크기 */

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

/* 3-4) 도입 문의·댓글 폼: 그누보드 캡차·개인정보 동의·비밀 댓글을 원본 입력칸 모양으로. 자동등록방지는 숫자 그림·듣기·새로고침 한 줄, 입력칸은 다음 줄 전체 폭 */
.gaon-captcha #captcha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border: 0; padding: 0; margin: 0; }
.gaon-captcha #captcha legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.gaon-captcha #captcha #captcha_img { order: 1; display: inline-block; height: 50px; width: auto; border: 2px solid var(--gf-border); border-radius: 0.5rem; background: #fff; }
.gaon-captcha #captcha #captcha_mp3,
.gaon-captcha #captcha #captcha_reload { width: 50px; height: 50px; border: 2px solid var(--gf-border); border-radius: 0.5rem; background-color: #fff; }
.gaon-captcha #captcha #captcha_mp3 { order: 2; }
.gaon-captcha #captcha #captcha_reload { order: 3; }
/* 자동등록방지 입력칸 = 원본 입력칸(.contact-form.outlined .form-control)과 같은 값 */
.gaon-captcha #captcha #captcha_key { order: 4; flex: 1 1 100%; display: block; width: 100%; height: calc(3.5rem + 2px); line-height: 1.25; padding: 1rem 0.75rem; margin: 0; font-size: 1rem; color: var(--gf-heading); border: 2px solid var(--gf-border); border-radius: 0.5rem; background: #fff; }
.gaon-captcha #captcha #captcha_key:focus { border-color: var(--gf-purple); outline: 0; }
.gaon-captcha #captcha #captcha_info { order: 5; flex-basis: 100%; font-size: 0.86rem; line-height: 1.5; color: var(--gf-muted); }
.gaon-consent { margin: 0 0 1.25rem; font-size: 0.92rem; line-height: 1.6; text-align: left; color: var(--gf-body); }
.gaon-consent label { display: inline; margin: 0; cursor: pointer; }
.gaon-consent input[type="checkbox"], .gaon-check input[type="checkbox"] { width: 17px; height: 17px; margin: 0 6px 0 0; vertical-align: -3px; accent-color: var(--gf-purple); }
.gaon-consent a { color: var(--gf-purple); text-decoration: underline; }
.gaon-check { display: inline-flex; align-items: center; margin: 0; font-size: 0.92rem; font-weight: 500; color: var(--gf-heading); cursor: pointer; }
/* 문의 보기(관리자) 위 칸 요약 */
.gaon-inquiry-info { margin: 0 0 28px; }
.gaon-inquiry-info p { margin: 0; line-height: 1.8; }

/* 3-5) 블로그 댓글 목록(원본에는 없음 — 원본 상세 작성자 줄 .author 모양), 댓글을 쓸 수 없을 때 안내 */
.gaon-comment-list { list-style: none; margin: 0; padding: 0; }
.gaon-comment-list.children { margin: 18px 0 0 24px; padding-left: 20px; border-left: 3px solid var(--gf-badge-bg); }
.gaon-comment { padding: 18px 0; border-bottom: 1px solid var(--gf-border); }
.gaon-comment-list.children .gaon-comment:last-child, .gaon-comment:last-child { border-bottom: 0; }
.gaon-comment .author span { font-size: 0.9rem; color: var(--gf-muted); }
.gaon-comment-text { margin: 12px 0 0 !important; color: var(--gf-body); }
.gaon-comment-act { display: flex; gap: 14px; margin-top: 8px; font-size: 0.9rem; font-weight: 500; }
.gaon-comment-closed { color: var(--gf-body); }

/* 3-6) 고객센터·회원 화면 이름표·입력칸·상자·버튼(원본 부품 — design.config.php 'ui') */
.gaon-label { display: block; margin: 0 0 8px; font-size: 1rem; font-weight: 600; color: var(--gf-heading); }
/* 입력칸 = 원본 .contact-form.outlined .form-control(흰 바탕·2px 테두리·모서리 8px·포커스 보라) */
.form-control.gaon-input, .form-select.gaon-input { min-height: calc(3.5rem + 2px); padding: 0.75rem 1rem; background-color: #fff; border: 2px solid var(--gf-border); border-radius: 0.5rem; color: var(--gf-heading); }
textarea.form-control.gaon-input { min-height: 140px; }
.form-control.gaon-input:focus, .form-select.gaon-input:focus { border-color: var(--gf-purple); box-shadow: none; }
.gaon-g5 #wr_content.form-control, .gaon-account #reg_mb_signature { background-color: #fff; border: 2px solid var(--gf-border); border-radius: 0.5rem; }
.gaon-g5 #captcha #captcha_key, .gaon-account #captcha #captcha_key { height: calc(3.5rem + 2px); padding: 0 1rem; font-size: 1rem; background: #fff; border: 2px solid var(--gf-border); border-radius: 0.5rem; }
.gaon-g5 #captcha #captcha_mp3, .gaon-g5 #captcha #captcha_reload, .gaon-account #captcha #captcha_mp3, .gaon-account #captcha #captcha_reload { width: 50px; height: 50px; }
/* 상자 = 원본 흰 폼 카드(.hero-form — 패딩 42px·모서리 16px·그림자). 고객센터 흰 바탕에서는 그림자를 약하게 */
.gaon-g5 .hero-form.gaon-card { box-shadow: 0 10px 34px rgba(10, 12, 30, 0.08); }
@media (max-width: 575px) { .hero-form.gaon-card { padding: 28px 22px; } }
/* 보조 버튼: 원본 테두리 알약 버튼(.btn-bordered — 원본은 그라디언트 위 흰 테두리)을 흰 바탕용 보라 테두리로 */
.btn.gaon-btn-line { background: transparent; border: 2px solid var(--gf-purple); color: var(--gf-purple) !important; box-shadow: none; padding: 12px 28px; }
.btn.gaon-btn-line:hover { background: var(--gf-purple); color: #fff !important; }
.wz-fit-btn.btn { min-height: 0; }
/* 작은 표시(원본 .badge)·사진 위 표시 */
.gaon-g5 .badge { margin: 0; vertical-align: 1px; }

/* 3-7) 분류 탭·고객센터 묶음 메뉴(원본 태그 배지 a.terms.badge — 선택·마우스를 올리면 보라) */
.gaon-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 40px; padding: 0; }
.gaon-tabs .badge, .card-terms .badge.gaon-on { margin: 0; }
.badge.gaon-on { background-color: var(--gf-purple); color: #fff; }
.wz-fit-subnav.gaon-tabs { margin-bottom: 48px; }
.gaon-tabs .terms.badge { padding: 0.55rem 1.1rem; font-size: 0.95rem; }
@media (max-width: 767px) { .gaon-tabs .terms.badge { flex: 1 1 auto; justify-content: center; padding: 0.5rem 0.75rem; font-size: 0.9rem; } }

/* 3-8) 쪽 번호(원본 ul.page-numbers — 46px 둥근 사각 연한 바탕, 지금 쪽·마우스를 올리면 보라) */
.gaon-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 40px auto 0; padding: 0; }
a.page-numbers.current { background-color: var(--gf-purple); color: #fff; }

/* 3-9) 고객센터 사진 카드(키트 wz-fit 갤러리·웹진 = 원본 블로그 카드 .card.blog-item — 4:3 사진·날짜·제목) 3열 */
.gaon-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
@media (max-width: 991px) { .gaon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .gaon-grid { grid-template-columns: 1fr; } }
.gaon-post { position: relative; margin: 0; }
.gaon-post .gaon-post-media { position: relative; display: block; overflow: hidden; border-radius: var(--gf-radius-sm); }
.gaon-post .gaon-post-media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.gaon-post .gaon-post-media .wz-noimg { aspect-ratio: 4 / 3; height: auto; }
.gaon-post-badge { position: absolute; left: 14px; top: 14px; z-index: 2; margin: 0 !important; }
.gaon-post .gaon-post-title { margin: 0.5rem 0 0.25rem; font-size: 1.35rem; line-height: 1.4; }
.gaon-post .gaon-post-title a { color: var(--gf-heading); }
.gaon-post .gaon-post-title a:hover { color: var(--gf-purple); }
.gaon-post .gaon-post-meta { font-size: 0.92rem; color: var(--gf-muted); }
.gaon-post-text { margin: 8px 0 0 !important; font-size: 0.96rem; line-height: 1.7; color: var(--gf-body); }

/* 3-10) 계정 구역(그라디언트 바탕)에서 흰 카드 밖에 놓이는 키트 회원 화면 글자·보조 버튼(회원가입 약관 안내·전체 동의·취소)은 흰색으로 */
.gaon-account .wz-fit-member { color: #fff; }
.gaon-account .wz-fit-member a:not(.btn) { color: #fff; text-decoration: underline; }
.gaon-account .hero-form, .gaon-account .hero-form label { color: var(--gf-body); }
.gaon-account .hero-form a:not(.btn) { color: var(--gf-purple); }
.gaon-account .btn.gaon-btn-line:not(.hero-form .btn) { border-color: #fff; color: #fff !important; }
.gaon-account .btn.gaon-btn-line:not(.hero-form .btn):hover { background: #fff; color: var(--gf-purple) !important; }
/* 블로그 본문 목록: 키트 기본(wz-base 목록 점 없음)을 원본처럼 점·번호로 */
.blog-single .col-lg-8 > :is(ul, ol):not([class]) { padding-left: 1.25rem; }
.blog-single .col-lg-8 > ul:not([class]) { list-style: disc; }
.blog-single .col-lg-8 > ol:not([class]) { list-style: decimal; }
.gaon-account .wz-fit-form > .wz-fit-help { color: rgba(255, 255, 255, 0.9); }
/* 가입 정보 입력(그누보드 register_form — 칸 묶음 구조 그대로): 묶음마다 원본 흰 폼 카드(.hero-form) 모양 */
.gaon-account .register_form_inner { margin: 0 0 18px; padding: 30px 34px; background: #fff; border: 0; border-radius: var(--gf-radius-md); box-shadow: 0 20px 50px rgba(10, 12, 30, 0.2); color: var(--gf-body); }
.gaon-account .register_form_inner h2 { margin: 0 0 16px; padding: 0; background: none; border: 0; font-size: 1.35rem; color: var(--gf-heading); }
.gaon-account .register_form_inner :is(label, li) { color: var(--gf-heading); }
.gaon-account .register_form_inner :is(.frm_info, #captcha_info, .tooltip) { color: var(--gf-muted); }
@media (max-width: 575px) { .gaon-account .register_form_inner { padding: 24px 20px; } }
/* 약관·가입 정보 입력은 폼이 길어(원본 가입 카드보다 칸이 많음) 넓은 화면에서 왼쪽 큰 제목을 위에 붙여 스크롤을 따라오게 */
@media (min-width: 992px) { .gaon-account-side { align-self: flex-start; position: sticky; top: 150px; padding-top: 40px; } }
.gaon-account .form_01 .register_form_inner { border-radius: var(--gf-radius-md); }

/* 4) 반응형 보정(2026-10-23 — 원본 CSS는 그대로, 원본 템플릿 자체 결함을 고침. 1440·1024에서는 바뀌지 않음) */
/* 4-1) 전체 화면 안내 구역(앱 다운로드·다운로드 완료·오픈 예정): 부트스트랩 .vh-100(height 100vh !important) 안에서 가운데 정렬된 글이 화면보다 길면(375 앱 다운로드 = 제목·단추·폰 화면) 위로 넘쳐 머리 로고와 겹침 → 높이를 최소값으로 */
:is(.download-page, .download, .coming-soon).vh-100 { height: auto !important; min-height: 100vh; }
/* 4-2) 요금표 단추: 카드 아래 걸친 알약 단추(position absolute)가 768 2칸에서 글자 두 줄("무료로 / 시작하기") → 한 줄 */
.pricing-table .package-button .btn { white-space: nowrap; }
/* 4-3) 태블릿(768~991): 3개짜리 카드 줄(기능·후기·블로그 카드)이 2칸이 되며 마지막 카드가 왼쪽에 혼자 남음 → 가운데로. 팀 4명(col-md-4)은 3+1 → 2×2 */
@media (min-width: 768px) and (max-width: 991.98px) {
  :is(.features-section, .review-section, section.blog) .row.items { justify-content: center; }
  .team-area .row.items > .col-md-4 { flex: 0 0 auto; width: 50%; }
}