@charset "utf-8";
/* *******************************************************
 * filename : cm_liquid_glass.css
 * description : Liquid Glass (iOS26형 굴절 유리) — class="liquid-glass" 부여만으로 적용
 *               굴절/분산/흐릿함은 js/common/cm_liquid_glass.js가 backdrop-filter로 주입
 * 튜닝 변수 : --lg-blur(px) / --lg-refraction(0~1) / --lg-dispersion(0~1)
 * date : 2026-08-12
******************************************************** */
.liquid-glass {
	position: relative;
	isolation: isolate;
	--lg-blur: 4;
	/* 굴절 엔진(JS) 비활성 상태 — GPU 합성 경로 블러만 사용 (배경 영상과 매 프레임 조합돼도 부드러움) */
	-webkit-backdrop-filter: blur(calc(var(--lg-blur, 4) * 1px)) saturate(1.3);
	backdrop-filter: blur(calc(var(--lg-blur, 4) * 1px)) saturate(1.3);
}
/* 부분 그라데이션 엣지 (1px 연하게): 좌상단 하이라이트 → 측면 투명 소멸 → 우하단 옅은 카운터.
   전체 테두리가 아니라 빛 받는 구간만 드러나는 유리 단면 — 알약·카드 공통 */
.liquid-glass::before,
.main-article-list li > a::before,
.article-list > li > a::before,
.contact-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(165deg,
		rgba(255,255,255,0.30) 0%,
		rgba(255,255,255,0.10) 20%,
		rgba(255,255,255,0) 45%,
		rgba(255,255,255,0) 80%,
		rgba(255,255,255,0.08) 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	pointer-events: none;
	z-index: 3;
}
.main-article-list li > a,
.article-list > li > a { position: relative; }
/* 프로스트 틴트 + 상단 시트 + 하단 두께 음영 */
.liquid-glass::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background:
		linear-gradient(180deg, rgba(255,255,255,0.10), transparent 38%),
		linear-gradient(0deg, rgba(10,5,40,0.14), transparent 45%);	/* 플랫 white 5% 제거 — 요소 고유 톤(시안 색감) 유지 */
	pointer-events: none;
	z-index: 1;
}
.liquid-glass > * { position: relative; z-index: 2; }