@charset "utf-8";
/* ============================================================
   (주)하람 A안 — 인터랙션 (2026-09-09 고객 선택 10종)
   RV-02 마스크 리빌 / RV-03 순차 등장 / RV-04 구분선 드로잉
   TX-01 단어 순차  / TX-02 강조어 밑줄 / TX-03 숫자 카운트업
   HV-03 라임 바    / HR-02 문구 시퀀스 / MC-01 버튼 채우기 / MC-03 헤더 축소

   - 스크롤 등장은 기존 AOS(index.css가 aos.min.css를 import)를 그대로 활용.
     커스텀 이름(ha-mask/ha-line)만 여기서 정의하면 AOS가 duration·easing을 붙여줌.
   - JS가 <html>에 .ha-js 를 붙인 뒤에만 숨김 상태를 적용한다.
     JS가 죽어도 콘텐츠는 보이게 하기 위한 안전장치이므로 .ha-js 접두사를 빼지 말 것.
   - 적용 대상 태깅은 /js/motion_a.js 참조.
   ============================================================ */

/* ===== RV-02 마스크 리빌 — 아래에서 위로 걷히며 드러남 ===== */
html.ha-js [data-aos="ha-mask"] { clip-path:inset(100% 0 0 0); transition-property:clip-path; }
html.ha-js [data-aos="ha-mask"].aos-animate { clip-path:inset(0 0 0 0); }

/* ===== RV-04 구분선 드로잉 — JS가 끼워 넣은 .ha-rule 에만 적용 ===== */
html.ha-js .ha-rule { display:block; position:absolute; background:var(--ha-ink); pointer-events:none; }
html.ha-js .ha-rule.x { left:0; right:0; top:0; height:2px; transform:scaleX(0); transform-origin:left; transition-property:transform; }
html.ha-js .ha-rule.x.aos-animate { transform:scaleX(1); }
html.ha-js .ha-rule.y { top:0; bottom:0; width:2px; background:var(--ha-line); transform:scaleY(0); transform-origin:top; transition-property:transform; }
html.ha-js .ha-rule.y.aos-animate { transform:scaleY(1); }
/* 원본 선은 감추고 애니메이션 선으로 대체 */
html.ha-js .pdb .pdb-grid.ha-ruled { border-top-color:transparent; position:relative; }
html.ha-js .abh .abh-tl2.ha-ruled:before { display:none; }
html.ha-js .crh .crh-profile.ha-ruled, html.ha-js .crh .crh-rnd.ha-ruled { border-top-color:transparent; }

/* ===== TX-02 강조어 밑줄 — 섹션 제목 <b> 아래 라임 라인 ===== */
html.ha-js .ha-h2 b, html.ha-js .hero-h1 b { position:relative; }
html.ha-js .ha-h2 b:after, html.ha-js .hero-h1 b:after {
	content:''; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:var(--ha-lime);
	transform:scaleX(0); transform-origin:left; transition:transform .7s .3s cubic-bezier(.66,0,.2,1);
}
html.ha-js .ha-h2.aos-animate b:after,
html.ha-js .aos-animate .ha-h2 b:after,
html.ha-js .hero > .hero-in.ha-hero-go .hero-h1 b:after { transform:scaleX(1); }

/* ===== HR-02 문구 시퀀스 + TX-01 단어 순차 (메인 히어로, 로드 시 1회) ===== */
/* ※ .hero-in 은 페이지에 4개 있다 — CMS 메인비주얼 텍스트(mvisualText)에도 같은 마크업이 들어 있어
   .mcontent(display:none) 안에 숨은 복사본이 DOM 앞쪽에 온다.
   반드시 .hero 직속 자식(.hero > .hero-in)만 겨냥할 것. 안 그러면 숨은 복사본에 걸리고
   실제 히어로는 opacity:0 인 채로 남는다. */
html.ha-js .hero > .hero-in .hero-eye,
html.ha-js .hero > .hero-in .hero-sub,
html.ha-js .hero > .hero-in .hero-btns { opacity:0; transform:translateY(18px); transition:opacity .6s cubic-bezier(.25,.46,.45,.94), transform .6s cubic-bezier(.25,.46,.45,.94); }
html.ha-js .hero > .hero-in .hero-h1 { overflow:hidden; }
html.ha-js .hero > .hero-in .ha-w { display:inline-block; opacity:0; transform:translateY(78%); transition:opacity .55s cubic-bezier(.25,.46,.45,.94), transform .55s cubic-bezier(.2,.7,.3,1); }
html.ha-js .hero > .hero-in.ha-hero-go .hero-eye,
html.ha-js .hero > .hero-in.ha-hero-go .hero-sub,
html.ha-js .hero > .hero-in.ha-hero-go .hero-btns,
html.ha-js .hero > .hero-in.ha-hero-go .ha-w { opacity:1; transform:none; }
html.ha-js .hero > .hero-in .hero-eye { transition-delay:.05s; }
html.ha-js .hero > .hero-in .hero-sub { transition-delay:.62s; }
html.ha-js .hero > .hero-in .hero-btns { transition-delay:.74s; }
/* 단어 지연은 JS가 style로 직접 넣음 (개수가 가변이라) */

/* ===== HV-03 라임 바 슬라이드 =====
   ※ 메인 인증 현황(.ct-r .ct-c)은 2026-09-10 고객 요청으로 제외 — 가로선이 어울리지 않음 */
html.ha-js div.sec-pt .pt-c,
html.ha-js div#wrap div#container .nws-card { position:relative; }
html.ha-js div.sec-pt .pt-c:after,
html.ha-js div#wrap div#container .nws-card:after {
	content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--ha-lime);
	transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.66,0,.2,1);
}
html.ha-js div.sec-pt .pt-c:hover:after,
html.ha-js div#wrap div#container .nws-card:hover:after { transform:scaleX(1); }

/* ===== MC-01 버튼 채우기 ===== */
html.ha-js div#wrap div.hero .btn-line,
html.ha-js div.sec-pt .pt-more a,
html.ha-js .pdb .pdb-btn-list,
html.ha-js .pdb .pdb-b-view,
html.ha-js .crh .crh-more,
html.ha-js .abh .abh-more a {
	position:relative; overflow:hidden; z-index:0;
	transition:color .32s ease, border-color .32s ease;
}
html.ha-js div#wrap div.hero .btn-line:before,
html.ha-js div.sec-pt .pt-more a:before,
html.ha-js .pdb .pdb-btn-list:before,
html.ha-js .pdb .pdb-b-view:before,
html.ha-js .crh .crh-more:before,
html.ha-js .abh .abh-more a:before {
	content:''; position:absolute; left:0; top:0; right:0; bottom:0; z-index:-1;
	transform:scaleX(0); transform-origin:left;
	transition:transform .42s cubic-bezier(.66,0,.2,1);
}
html.ha-js div#wrap div.hero .btn-line:hover:before,
html.ha-js div.sec-pt .pt-more a:hover:before,
html.ha-js .pdb .pdb-btn-list:hover:before,
html.ha-js .pdb .pdb-b-view:hover:before,
html.ha-js .crh .crh-more:hover:before,
html.ha-js .abh .abh-more a:hover:before { transform:scaleX(1); }
/* ★ overflow:hidden 을 준 inline-block 은 baseline 이 '마지막 줄'이 아니라 '하단 마진 끝'이 된다.
   그래서 채우기 효과를 준 버튼만 같은 줄의 형제 버튼과 수직으로 어긋난다(히어로 두 버튼, 제품상세 버튼 줄).
   버튼 줄 전체를 vertical-align:middle 로 맞춰 해결. */
html.ha-js div#wrap div.hero .hero-btns > a,
html.ha-js .pdb .pdb-vbtn > a { vertical-align:middle; }

/* 채움 색 — 호버 시 배경을 즉시 갈아끼우던 기존 규칙은 덮어씀 */
html.ha-js div#wrap div.hero .btn-line:before { background:#fff; }
html.ha-js div#wrap div.hero .btn-line:hover { background:transparent; color:var(--ha-green-deep); border-color:#fff; }
html.ha-js div.sec-pt .pt-more a:before,
html.ha-js .pdb .pdb-btn-list:before { background:var(--ha-green); }
html.ha-js div.sec-pt .pt-more a:hover,
html.ha-js .pdb .pdb-btn-list:hover { background:#fff; color:#fff; border-color:var(--ha-green); }
html.ha-js .pdb .pdb-b-view:before { background:var(--ha-green); }
html.ha-js .pdb .pdb-b-view:hover { background:#fff; color:#fff; border-color:var(--ha-green); }

/* ===== MC-03 헤더 축소 ===== */
html.ha-js div#wrap div#header { transition:background-color .3s ease, box-shadow .3s ease, transform .35s cubic-bezier(.25,.46,.45,.94); }
/* 2026-09-11 레퍼런스(현대바이오랜드) 채택 A4 — 따라오는 헤더를 흰색 + 가는 선으로.
   (이전: 딥그린 반투명 + 블러) 흰 바탕이라 메뉴 글자·햄버거를 어둡게, 로고는 딥그린으로 바꾼다.
   ※ 컬러 로고 파일이 없어 흰 로고 PNG 의 알파를 마스크로 써서 칠한다(--ha-logo 는 motion_a.js 가 실제 로고 경로로 채움).
     컬러 로고를 받으면 마스크 두 줄을 지우고 img src 교체로 대신하면 된다. */
html.ha-js div#wrap div#header.ha-hdr-min {
	position:fixed; top:0; left:0; right:0; width:100%; z-index:900;
	background:rgba(255,255,255,.97); box-shadow:0 1px 0 var(--ha-line);
}
html.ha-js div#wrap div#header.ha-hdr-min div.header-in { background:transparent; }
html.ha-js div#wrap div#header.ha-hdr-min div#nav > ul > li > div > a { color:var(--ha-ink); }
html.ha-js div#wrap div#header.ha-hdr-min div#nav > ul > li > div > a:hover,
html.ha-js div#wrap div#header.ha-hdr-min div#nav > ul > li > div > a strong { color:var(--ha-green); }
html.ha-js div#wrap div#header.ha-hdr-min h1 a {
	display:inline-block; background:var(--ha-green-deep);
	-webkit-mask:var(--ha-logo, url('/images/main/logo_white.png')) no-repeat left center / contain;
	mask:var(--ha-logo, url('/images/main/logo_white.png')) no-repeat left center / contain;
}
html.ha-js div#wrap div#header.ha-hdr-min h1 a img { opacity:0; }
/* 모바일 햄버거는 #header 밖(뒤 형제)에 있다 */
html.ha-js div#wrap div#header.ha-hdr-min ~ .btn-mobile-menu span { background:var(--ha-ink); }

/* ===== 섹션 표시 (2026-09-11 레퍼런스 채택 B8) — 메인 왼쪽 가운데. 오른쪽 가운데는 퀵메뉴 자리 =====
   마크업은 motion_a.js sectionIndicator() 가 만든다. 어두운 섹션(히어로·파인더·중앙연구소·푸터)에선 .dark */
.ha-ind { position:fixed; left:26px; top:50%; transform:translateY(-50%); z-index:1200; }
.ha-ind a { display:flex; align-items:center; gap:10px; height:26px; text-decoration:none; font-size:11px; font-weight:800; line-height:1; letter-spacing:.12em; color:var(--ha-green); }
.ha-ind a:before { content:''; flex:none; width:6px; height:6px; border-radius:50%; background:#B9C4BD; transition:width .25s ease, background-color .25s ease, border-radius .25s ease; }
.ha-ind a span { opacity:0; transform:translateX(-4px); transition:opacity .25s ease, transform .25s ease; padding:3px 7px; border-radius:3px; background:rgba(255,255,255,.88); } /* 전폭 제품 슬라이더 위에서도 읽히게 */
.ha-ind a.on:before { width:20px; border-radius:3px; background:var(--ha-green); }
.ha-ind a.on span, .ha-ind a:hover span, .ha-ind a:focus-visible span { opacity:1; transform:none; }
.ha-ind.dark a { color:#fff; }
.ha-ind.dark a:before { background:rgba(255,255,255,.45); }
.ha-ind.dark a.on:before { background:var(--ha-lime); }
.ha-ind.dark a span { background:rgba(0,0,0,.28); }
@media screen and (max-width:1024px) { .ha-ind { display:none; } }
@media print { .ha-ind { display:none; } }
/* 축소 상태: 유틸바를 접고 높이·글자를 한 단계 줄여 화면을 덜 가린다 (92px → 54px) */
html.ha-js div#wrap div#header.ha-hdr-min div.util-bar { height:0; overflow:hidden; border-bottom:none; }
html.ha-js div#wrap div#header.ha-hdr-min div.header-in { padding-top:0; padding-bottom:0; border-bottom:none; }
html.ha-js div#wrap div#header.ha-hdr-min .header-row { height:54px; min-height:0; }
html.ha-js div#wrap div#header.ha-hdr-min h1 img { width:112px; height:auto; }
html.ha-js div#wrap div#header.ha-hdr-min div#nav > ul > li { padding-right:28px; }
html.ha-js div#wrap div#header.ha-hdr-min div#nav > ul > li > div > a { line-height:54px; font-size:15px; }
html.ha-js div#wrap div#header.ha-hdr-min div#nav > ul > li > ul { top:54px; }

/* ※ 스크롤 방향에 따라 헤더를 감추는 동작(.ha-hdr-away)은 2026-09-10 고객 요청으로 제거했다.
   천천히 스크롤하면 임계값(프레임당 6px)에 안 걸려 안 사라지는 탓에 동작이 들쭉날쭉해 보였다.
   축소 고정 자체는 유지 — 되살릴 거라면 임계값을 '프레임당'이 아니라 '누적 이동량'으로 바꿔야 한다. */
/* 서브페이지는 헤더가 문서 흐름에 있어 fixed 전환 시 본문이 튄다 → JS가 넣은 스페이서로 보정 */
html.ha-js .ha-hdr-spacer { display:none; }
html.ha-js .ha-hdr-spacer.on { display:block; }

/* ===== 동작 최소화 설정 존중 ===== */
@media (prefers-reduced-motion: reduce) {
	html.ha-js [data-aos="ha-mask"],
	html.ha-js [data-aos="ha-mask"].aos-animate { clip-path:none; }
	html.ha-js .ha-rule.x, html.ha-js .ha-rule.y { transform:none; }
	html.ha-js .hero-in .hero-eye,
	html.ha-js .hero-in .hero-sub,
	html.ha-js .hero-in .hero-btns,
	html.ha-js .hero-in .ha-w { opacity:1; transform:none; transition:none; }
	html.ha-js .ha-h2 b:after, html.ha-js .hero-h1 b:after { transform:scaleX(1); transition:none; }
	html.ha-js div#wrap div#header { transition:none; }
}