@charset "utf-8";
/* ============================================================
   static.css — A안 오버라이드

   방침 변경 이력:
   - 처음엔 JS를 전부 걷어내고 레이아웃을 CSS로 재현했다(B안).
     그런데 이 사이트는 화면 배치를 CSS가 아니라 JS가 만든다.
     fullpage.js 가 섹션을 배치하고, slick 이 슬라이더를 구성하고,
     jQuery 가 로드 시 hide() 로 초기 상태를 잡는다.
     즉 '애니메이션'인 줄 알고 지운 것이 사실은 레이아웃 엔진이었다.
   - 그래서 A안: JS는 원래대로 살리고, 이 파일은 '모션만' 끈다.

   여기서 하는 일은 네 가지뿐이다.
     1) 모션 제거 (동작은 유지, 시간만 0)
     2) 정적 사본에서 의미 없는 오버레이 정리
     3) GEO/AEO 제목 위계 (시각적 무영향)
     4) 상담 CTA 스타일
   ============================================================ */

/* ---------- 1) 모션 제거 — 2026-07-27 철회 ----------

   [원래 규칙]
     *, *::before, *::after {
       animation-duration: 0s !important;  animation-delay: 0s !important;
       transition-duration: 0s !important; transition-delay: 0s !important;
     }

   [왜 넣었나]
   정적 사본을 '레이아웃 확인용'으로 만들 때, 모션은 끄되 레이아웃 엔진
   (fullpage.js·slick)은 살리려고 duration 만 0 으로 만들었다.
   animation:none 으로 죽이면 기본값 opacity:0 인 요소들이 영영 안 나타나고,
   transition 을 없애면 fullpage 스크롤이 깨지기 때문이다.

   [왜 뺐나]
   이 사본으로 **기존 도메인을 대체**하기로 확정됐다. 원본을 대체하는 이상
   기준은 '원본과 동일한 동작'이어야 한다. 그리고 결정적으로,
   **모션이 콘텐츠를 보여주는 유일한 수단인 구간이 있다.**

   실제 사례 — 메인 #section9:
     animation: section9bg3 1.0s cubic-bezier(...) both 1.5s;
     @keyframes section9bg3 { 0% { height:100% } 100% { height:0% } }
   1.5초 동안 배경 사진 3장을 보여준 뒤 커튼처럼 걷어내는 연출인데,
   delay 를 0 으로 만들면 사진이 보일 틈 없이 끝 상태(height:0)로 점프한다.
   → 사진 3장이 사이트에서 통째로 사라진다. 모션 제거가 곧 콘텐츠 손실.

   그래서 규칙을 삭제하고 원본 모션을 그대로 살린다.
   되돌리려면 static.css.bak-motion 참고. */

/* ---------- 2) 정적 사본에서 정리할 것 ---------- */

/* 진입 레이어 팝업은 CSS 로 숨기면 안 된다 -> fix_popup.py 가 DOM 에서 삭제한다.

   이유: 원본 index.html 은 fullpage 초기화 직후
     $.fn.fullpage.setMouseWheelScrolling(false);
     $.fn.fullpage.setKeyboardScrolling(false);
   로 휠/키보드 스크롤을 끄고, 대신 4~8.5초 타이머로 moveSectionDown() 을
   호출해 섹션을 자동으로 넘긴다. 그런데 그 자동 재생은
     if($(".pop_wrap").length == 0){ intervalcustom(...) }
   조건이라 '팝업이 DOM 에 없을 때만' 시작된다.

   display:none 으로 숨기면 DOM 에는 남으므로 length != 0 -> 자동 재생이
   영원히 시작되지 않고, 휠도 꺼져 있어 페이지가 완전히 멈춰 보인다.
   (실제로 그렇게 만들었다가 원인을 찾는 데 한참 걸렸다.)
   그래서 마크업 자체를 제거하는 방식으로 바꿨다. */

/* 원본 html/5, 9, 188 에는 주석 처리하다 만 잔재 마크업이 있다.
   여는 <!-- 안에 있어야 할 컨테이너는 파서가 삼키는데, 중간의 -->
   때문에 뒤쪽 블록만 주석을 빠져나와 body 직계에 고아로 남는다.
   라이브 원본도 DOM 구조가 동일하며, 원본에서도 화면에 보인 적이 없다.

   반드시 'body >' 직계만, 그리고 #wrap 은 제외할 것.
   html/5, 7 은 같은 클래스가 #wrap '안'에도 있어서
   :not(#wrap) 없이 쓰면 페이지 컨테이너째 숨겨져 백지가 된다. */
body > div:not(#wrap):has(.bnfwrapbox),
body > ul.bnfbt {
	display: none !important;
}

/* ---------- 3) GEO/AEO 제목 위계 (시각적으로 무영향) ----------
   .title/.subtxt 는 CSS 에서 div.title, li.title 처럼 태그와 묶인
   선택자가 150건이라 태그 자체를 h2 로 바꿀 수 없다. 그래서
   '내부 텍스트만' heading 으로 감싸고 부모 스타일을 100% 상속시킨다.
   -> 문서 구조는 생기고 픽셀은 그대로. */
h1.geo-h,
h2.geo-h,
h3.geo-h {
	font: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	font-family: inherit !important;
	line-height: inherit !important;
	letter-spacing: inherit !important;
	color: inherit !important;
	text-align: inherit !important;
	margin: 0 !important;
	padding: 0 !important;
	display: inline !important;
	background: none !important;
}

/* 화면엔 안 보이되 크롤러/스크린리더에는 읽히는 제목.
   숨김이 아니라 '접근 가능한 오프스크린'이라 클로킹이 아니다. */
.geo-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* 로고 h1 -> div 변환 대응. 기존 규칙이 'header #logo' 라 id 기반이므로
   그대로 적용된다. h1 기본 여백만 정리. */
header #logo,
.logo-alt {
	margin: 0;
}

/* ---------- 4) 상담 CTA (동작 불가 폼 대체) ----------
   원본 폼은 카페24 PHP 백엔드로 POST 한다. 새 호스팅엔 그 백엔드가
   없어 전송이 불가능하므로 즉시 연결되는 CTA 로 바꿨다. */
.geo-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 18px 0;
	max-width: 100%;
}

.geo-cta a {
	display: inline-block;
	padding: 14px 26px;
	border-radius: 6px;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	line-height: 1.2;
}

.geo-cta-kakao { background: #fee500; color: #191600; }
.geo-cta-tel   { background: #dda478; color: #fff; }
.geo-cta-note  { flex-basis: 100%; margin: 4px 0 0; font-size: 13px; color: #888; }

/* --- 4-1) 접힌 퀵 패널에서 CTA 가 새어나오지 않게 ---
   .quickcs 는 우측 '상담' 버튼을 누르면 JS 가 펼치는 패널이다.
   접힌 상태에서는 너비가 0인데, 그 안에 넣은 CTA 가 flex 라
   0폭 컨테이너를 뚫고 나와 화면 밖으로 잘려 보였다.
   패널을 숨기면 안 된다(JS 로 정상 동작하므로). 넘침만 잘라낸다. */
.quickcs {
	overflow: hidden;
}