/* overlay.css — 우리 보정 전용 (R5 v1)
 *
 * 원본 CSS(css/ 의 나머지 파일)는 수정하지 않는다. 보강·무력화·보정은 전부 여기서
 * 캐스케이드로 이긴다. head 정본이 이 파일을 항상 맨 뒤에 링크한다.
 *
 * 원본 = WordPress + Astra 4.9.1 (반응형 테마) → 반응형 보강은 불필요.
 * 헤더는 headerScrolled 실측이 headerScrolledNoChange:true 라 스크롤 전환 CSS 없음(R12②).
 */

/* ── R23 접근성: skip-nav (원본에 없어 표준 삽입) ─────────────────────── */
#skipNavigation .skip-nav {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	z-index: 100000;
}

#skipNavigation .skip-nav:focus {
	left: 0;
	top: 0;
	width: auto;
	height: auto;
	padding: 10px 20px;
	background: #fff;
	color: #000;
	font-size: 14px;
	line-height: 1.4;
	text-decoration: underline;
	outline: 2px solid #0073aa;
}

/* ── BR-RUN 수선 보정: 게시글 본문 이미지 스택 (EditGate) ──
 * 원본(KBoard 에디터 산출물)은 상세 본문에서 세로로 쌓인 상품 이미지를 <br><br> 연발로
 * 띄웠다. R1 위반이자 편집 불가(행이 요소가 아니라 br 사이 텍스트 흐름) — 이미지마다
 * 독립 블록 .content-row 로 분리하고 여백을 CSS 로 옮겼다.
 * gap-* 수치는 수선 전 1440 뷰포트 렌더 실측값(0/29/30/60px)을 그대로 옮긴 것이다(R16).
 * 원본 '.content-view img { display:inline; vertical-align:middle }' 가 만들던
 * 인라인 baseline 여백이 블록화로 사라지므로, 이미지를 block 으로 바꿔 높이를 일치시킨다.
 */
.kboard-content .content-view .content-row {
	font-size: 0;   /* 인라인 잔여 공백 제거 */
	line-height: 0;
}

.kboard-content .content-view .content-row img {
	display: block;
	max-width: 100%;
}

/* 원본이 'margin: 0 auto' 인라인 스타일로 가운데 정렬하던 이미지 유지 */
.kboard-content .content-view .content-row img.img_content {
	margin-right: auto;
	margin-left: auto;
}

.kboard-content .content-view .content-row.gap-29 { margin-bottom: 29px; }
.kboard-content .content-view .content-row.gap-30 { margin-bottom: 30px; }
.kboard-content .content-view .content-row.gap-60 { margin-bottom: 60px; }
/* 마지막 이미지 아래 원본 여백(<br><br><br><div><br></div> = 실측 89px) 보존 */
.kboard-content .content-view .content-row.gap-89 { margin-bottom: 89px; }

/* ── MIXED-INLINE 수선 보정: 대표이사 라벨 (EditGate) ──
 * 원본은 <p class="info_ceo"> 안에 라벨 텍스트가 맨몸으로 있고 서명만 <span class="sign3">
 * 였다. 에디터 편집 커밋이 textContent 통째 교체라 그대로 두면 서명 마크업이 파괴되므로
 * 라벨을 <span class="ceo-label"> 로 감쌌다. 그런데 원본 '.info_ceo span' 이
 * font-size:50px / margin-left:10px / display:inline-block 을 주므로, 새 래퍼가
 * 그 규칙에 걸려 라벨이 50px 로 부풀고 10px 들여쓰기가 생긴다. 아래로 '본문 텍스트'
 * 상태(=원본 맨몸 텍스트가 p 에서 상속하던 값)로 되돌린다. 서명(.sign3)은 원본 그대로.
 */
.info_ceo span.ceo-label {
	display: inline;
	margin-left: 0;
	padding-bottom: 0;
	font-size: inherit;
	font-weight: inherit;
	vertical-align: baseline;
}

/* ── 원본 인라인 @font-face 대체 (R5: <style> 블록 금지 → 파일로 이관) ──
 * 원본 인사말/회사소개 페이지가 본문 <style> 안에서 선언하던 서명용 폰트.
 * 자체 CDN(jsdelivr) → R9 v2 내재화. 고지는 licenses/ 참조.
 */
@font-face {
	font-family: 'SangSangShin';
	src: url('/fonts/SangSangShin.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/* ── 공지 팝업 (BUILDER-2238) — /js/popup.js 가 만드는 DOM 전용 ──
 * 원본 CSS 에 없는 새 UI 라 규칙을 여기 직접 둔다(R5).
 * z-index: skip-nav(100000) 위 · Astra 계정 로그인 레이어(1000010~11) 아래.
 * 패널은 이미지 원래 폭(어드민 권장 400×500)에 맞춰 줄고, 좁은 화면에선 화면 폭까지 줄어든다.
 */
.ahb-popup {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(0, 0, 0, 0.5);
}
.ahb-popup--top { align-items: flex-start; }
.ahb-popup--bottom { align-items: flex-end; }

.ahb-popup__panel {
	display: flex;
	flex-direction: column;
	max-width: min(100%, 520px);
	/* 100vh 대신 100% — iOS 동적 툴바만큼 패널이 넘쳐 하단 버튼이 잘리는 것을 막는다. */
	max-height: 100%;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
.ahb-popup--full .ahb-popup__panel { max-width: min(100%, 960px); }

.ahb-popup__body { overflow: auto; -webkit-overflow-scrolling: touch; }
.ahb-popup__link { display: block; }
.ahb-popup__image { display: block; max-width: 100%; height: auto; }

.ahb-popup__content {
	width: min(80vw, 400px);
	margin: 0;
	padding: 28px 24px;
	color: #333;
	font-size: 16px;
	line-height: 1.6;
	white-space: pre-wrap;
}

.ahb-popup__actions {
	display: flex;
	flex: none;
	justify-content: flex-end;
	background: #333;
}
.ahb-popup__actions button {
	min-height: 44px;
	padding: 0 16px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #fff;
	font: inherit;
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
}
.ahb-popup__actions button:hover,
.ahb-popup__actions button:focus-visible { background: #555; color: #fff; }
.ahb-popup__today { margin-right: auto; }
.ahb-popup__close { font-weight: 600; }

@media (max-width: 767px) {
	.ahb-popup { padding: 16px; }
}

/* ── 빌더 편집기 전용: 편집하면 안이 지워지는 요소를 클릭 통과로 ─────────────────────────
 * 대상(`data-mig-nohit`)과 이유는 js/builder-guard.js 머리말에 있다. 그 요소 **자체**만 통과시키고
 * 직속 자식은 다시 눌리게 한다. 자식도 대상이면 뒤 규칙이 이겨 다시 통과된다(순서가 중요하다).
 * `data-mig-builder` 는 편집기 미리보기에서만 붙는다 — 실사이트 무관. */
html[data-mig-builder] [data-mig-nohit] > * { pointer-events: auto; }
html[data-mig-builder] [data-mig-nohit] { pointer-events: none; }

/* ── 서브페이지 배너 배경을 전용 레이어로 (빌더에서 배경을 고를 수 있게) ─────────────────────
 * 원본은 배경을 컨테이너(.uagb-block-7aa283c8, css/uag-css-104.css)에 건다. 그 컨테이너는 글자·이미지를
 * 품고 있어 빌더에서 누르면 글자가 뭉개질 수 있어 builder-guard 가 클릭 통과로 막는다 — 그러면 배경을
 * 고를 길이 없다. 그래서 배경만 **글자 없는 빈 레이어**(.mig-banner-bg)로 옮긴다: 그 자리를 누르면
 * 빌더가 이 레이어의 배경 url() 을 Source 로 잡고, 바꾸면 이 규칙의 URL 이 치환된다.
 * 원본 규칙은 그대로 두고 컨테이너 배경만 끈다(값은 원본과 같다 — 모양 불변). */
.wp-block-uagb-container.uagb-block-7aa283c8 { position: relative; background-image: none !important; }
.wp-block-uagb-container.uagb-block-7aa283c8 > .mig-banner-bg {
  /* 원본 uag-*.css 가 컨테이너 직속 자식에 position:relative·width:100% 를 더 강한 선택자로 건다 — 이겨야 한다 */
  position: absolute !important; inset: 0 !important; z-index: 0;
  width: auto !important; min-width: 0 !important; height: auto !important; margin: 0 !important;
  background-image: url(/uploads/mig_site/img/2024/11/moa_sub_renew.png);
  background-repeat: no-repeat; background-position: 50% 50%; background-size: cover;
  background-attachment: scroll; background-clip: padding-box;
}
.wp-block-uagb-container.uagb-block-7aa283c8 > .uagb-container-inner-blocks-wrap { position: relative; z-index: 1; }

/* 편집기 전용 빈 바닥 — builder-guard.js 가 붙인다. 클릭이 통과 요소를 지나 html 까지 떨어지면 빌더가
 * 문서의 첫 이미지(헤더 로고)를 Source 로 잡는다(실측: 배너 빈 곳 클릭 → 로고 URL). 그 전에 이 빈 요소가
 * 받아 아무것도 선택되지 않게 한다. */
html[data-mig-builder] #mig-hit-floor { position: fixed; inset: 0; z-index: -1; pointer-events: auto; }