/* ═══════════════════════════════════════════════════════════
   motion-reveal.css — 제목 줄 단위 리빌의 껍데기
   명탐정토토(dosiraktoto02) · 2026-09-28 · v1

   index.html 의 hdLines() 가 SplitText 로 끊은 줄마다
   .hd_line_mask 를 씌운다. 여기서 하는 일은 하나 —
   "줄이 마스크 밑에서 올라오게" 만드는 overflow:hidden 이다.

   없으면 글자가 그냥 위치만 옮겨 다니는 것으로 보인다.
   인트로(motion-intro.css)의 글줄 리빌과 같은 원리이고,
   그쪽은 마크업이 고정이라 CSS 로 잡았지만 여기는 줄 수가
   폭에 따라 달라져서 런타임에 씌운다.

   [line-height 여유]
   한글은 받침·괄호가 line-box 밖으로 살짝 나간다. overflow:hidden
   을 딱 맞게 주면 그 부분이 잘린다 — padding 으로 숨 쉴 틈을 주고
   같은 만큼 margin 으로 당겨 레이아웃을 원래대로 돌린다.
   ═══════════════════════════════════════════════════════════ */

.hd_line_mask {
	display:block;
	overflow:hidden;
	padding:0.12em 0;
	margin:-0.12em 0;
}

.hd_line {
	display:block;
	will-change:transform;
}


/* ── 제목 태그 되돌리기 ──────────────────────────────────────
   문서 구조를 만들려고 <div> 를 h1/h2 로 바꿨다(원래 제목 태그가 0개였다).
   CSS 선택자는 전부 class 기반(.text_con / .title_con / .text0N_con)이라
   규칙은 그대로 먹지만, 브라우저 기본값(h1 2em/0.67em 여백, h2 1.5em/0.83em)이
   끼어들어 레이아웃이 밀린다. 그 기본값만 지운다 —
   실제 글자 크기는 안쪽 span 이 정하고 있어 건드릴 것이 없다. */
#main_con h1, #main_con h2 {
	margin:0;
	font-size:inherit;
	font-weight:inherit;
	line-height:inherit;
}


/* ── width/height 속성을 붙인 뒤 반드시 필요한 한 줄 ─────────
   모든 <img> 에 실제 픽셀 크기를 width/height 속성으로 박았다.
   이유: loading="lazy" 를 붙였는데 크기를 안 알려 주면 이미지가 로드될
   때마다 아래 콘텐츠가 밀린다. 실측으로 스크롤 중 문서가 1099px(PC)
   /942px(모바일) 자라났고, ScrollTrigger 가 미리 계산해 둔 발화 위치가
   그만큼 어긋나 연출이 의도보다 이르게 터졌다.

   그런데 이 프로젝트 CSS 는 이미지에 width 만 주고 height 는 안 준다
   (예: .img_con img { width:100% }). 그러면 height 속성이 그대로 먹어
   가로는 CSS, 세로는 속성값이 되어 이미지가 세로로 늘어난다
   (실측: 290px 로 그려질 아이콘이 627px 높이로 늘어났다).

   height:auto 를 주면 브라우저가 width/height 속성을 "비율"로만 쓰고
   실제 높이는 비율대로 계산한다 — 자리는 미리 잡히고 모양은 안 변한다.

   :where() 라 특정도가 0 이다. 어딘가 CSS 가 img 높이를 직접 정해 두었다면
   그쪽이 이긴다. 반대로 속성(프레젠테이션 힌트)보다는 이 규칙이 이긴다. */
:where(img[width][height]) {
	height:auto;
}


/* ── 라틴 표제의 글자 단위 리빌 ─────────────────────────────
   index.html 의 hdChars() 가 SplitText 로 단어·글자를 끊는다.
   레퍼런스: baronissisportsclub.webflow.io (글자마다 요소 하나,
   글자 높이의 100% 만큼 올라옴, 이웃 간 9px 차의 촘촘한 시차).

   [마스크를 단어에 건다 — 글자가 아니라]
   글자마다 overflow:hidden 껍데기를 씌우면 낱자가 각각 inline-block 이
   되어 자간과 띄어쓰기가 미세하게 틀어진다. 단어 박스에 걸면 그 안의
   글자들이 알아서 잘리고, 단어 사이 공백은 원래대로 텍스트로 남는다.

   [padding 으로 숨 쉴 틈]
   대문자라도 괄호·따옴표가 line-box 를 살짝 넘는다. overflow:hidden 을
   딱 맞게 주면 그 부분이 잘려 보인다 — padding 으로 틈을 주고 같은 만큼
   margin 으로 당겨 레이아웃을 원래대로 돌린다.

   ※ 한글 제목에는 쓰지 않는다. 그쪽은 .hd_line(줄 단위)이다. */
.hd_word_mask {
	display:inline-block;
	overflow:hidden;
	vertical-align:top;
	padding:0.14em 0;
	margin:-0.14em 0;
}

.hd_char {
	display:inline-block;
	will-change:transform;
}