/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* ==========================================================================
   헤더 스크롤 모션
   지심컴퍼니 · 2026-08-26

   최상단      — .header-top   (흰 배경, 화면 전체 폭)
   스크롤 내림 — 잠시 버텔다가 위로 밀려 올라가 사라진다
   스크롤 올림 — .header-float (검정 라운드 바) 가 내려온다

   움직임 자체는 브릭스가 원래 갖고 있는 sticky 헤더 기능이 처리한다.
   헤더 템플릿 설정에서 켠 세 가지가 아래 클래스를 만들어 준다.

     Sticky                →  #brx-header 에 .brx-sticky
     Sticky on scroll      →  position:sticky (본문이 밀려나지 않는다)
     Slide up after 120px  →  120px 까지 내려가는 동안은 헤더가 그대로 있다

   여기서 한 가지가 부족하다.
   브릭스의 .scrolling 은 '임계값 전에 내려가는 중' 과 '위로 올리는 중' 을
   구분하지 못한다. 둘 다 .scrolling 하나만 붙는다.
   그래서 assets/header-motion.js 가 .slide-up 을 지켜보면서 is-swapped 를
   따로 붙여 준다. 아래 CSS 는 그 상태만 본다.
   ========================================================================== */

/* 검정 라운드 바 하나로 간다.  2026-09-09

   예전에는 최상단에서 흰 바를 보이다가 올려닫을 때 검정 바로 바꿨었다.
   이제는 처음부터 검정 바가 나온다.

   흰 바(.header-top)는 템플릿에 그대로 두고 감추기만 한다.
   지우지 않는 이유는 되돌리기 쉽게 하기 위해서다.

   오르내리는 움직임은 그대로다. 브릭스 sticky 헤더가 헤더 바깥에
   .slide-up 을 붙였다 떼는 방식이라, 안쪽에 무엇이 보이든 상관하지 않는다.
   header-motion.js 가 붙이는 .is-swapped 는 이제 쓰이지 않지만
   지우지 않는다. 흰 바를 되살릴 때 다시 필요하다. */
#brx-header > .header-top {
	display: none;
}

#brx-header > .header-float {
	display: flex; /* .brxe-container 의 기본값과 같은 값이다 */
}

/* 움직임을 줄이도록 설정한 사용자에게는 미끄러지는 동작을 뺀다.
   헤더가 바뀌는 것 자체는 그대로 두고, 전환만 즉시 일어나게 한다. */
@media (prefers-reduced-motion: reduce) {

	#brx-header.brx-sticky {
		transition: none;
	}
}

/* ==========================================================================
   행 단위 스크롤 등장 — 클라이언트 로고 (About)
   지심컴퍼니 · 2026-08-26

   로고 한 줄이 화면에 들어오는 순간 아래에서 위로 올라오며 나타난다.
   수치는 레퍼런스 laypact.com/about 을 그대로 따랐다.

     이동거리   자기 높이의 20% (px 고정값이 아니다)
     시간       0.3초
     이징       끝에서 넘기지 않는다 (GSAP power1.out 에 해당)
     줄 간 지연 없다. 한 줄이 통째로 뜨며 그게 '띡' 하는 감을 만든다.

   is-armed 는 자바스크립트가 붙인다.
   그래서 스크립트가 뜨지 않으면 아무것도 감춰지지 않고 로고가 그냥 보인다.
   숨기는 일을 CSS 가 먼저 해버리면, 스크립트가 실패했을 때 빈 자리만 남는다.
   ========================================================================== */

.reveal-rows.is-armed > * {
	opacity: 0;
	transform: translateY(20%);
	transition:
		opacity   .3s cubic-bezier(.25, .46, .45, .94),
		transform .3s cubic-bezier(.25, .46, .45, .94);
	will-change: opacity, transform;
}

.reveal-rows.is-armed > .is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {

	.reveal-rows.is-armed > * {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ==========================================================================
   행 스포트라이트 — What we do (About)
   지심컴퍼니 · 2026-08-27

   한 번에 한 행만 검정이 된다. 자동으로 차례로 넘어가고, 마우스를 올리면 그 행이 된다.

   원래 디자인이 이미 두 상태를 다 갖고 있었다.
     래퍼   #brxe-dqitfr  배경 #000000 · row-gap 1px  (틈이 곳 구분선이다)
     01행   배경 #000000 · 흰 글자      ← 활성 상태
     02~04  배경 #FAF9FB · 검은 글자     ← 비활성 상태
   01행에 박혀 있던 활성 상태를 떼어내 아무 행에나 옮길 수 있게 만든 것뿐이다.

   is-armed 는 자바스크립트가 붙인다.
   스크립트가 안 뜨면 아래 규칙이 하나도 걸리지 않아 지금 화면 그대로 남는다.

   !important 를 쓴 이유
   브릭스가 글자색을 #brxe-xxxxx 처럼 ID 로 내보낸다. 클래스로는 이길 수 없다.
   ========================================================================== */

.spotlight-rows.is-armed > * {
	background-color: var(--gray-10, #FAF9FB) !important;
	transition: background-color .35s ease;
}

.spotlight-rows.is-armed > * .brxe-heading,
.spotlight-rows.is-armed > * .brxe-text,
.spotlight-rows.is-armed > * .brxe-text a {
	transition: color .35s ease;
}

/* 비활성 — 01행에 박혀 있는 흰 글자를 되돌린다 */
.spotlight-rows.is-armed > *:not(.is-on) .brxe-heading {
	color: var(--gray-black, #000000) !important;
}

.spotlight-rows.is-armed > *:not(.is-on) .brxe-text,
.spotlight-rows.is-armed > *:not(.is-on) .brxe-text a {
	color: var(--gray-200, #3B3B43) !important;
}

/* 활성 */
.spotlight-rows.is-armed > .is-on {
	background-color: var(--gray-black, #000000) !important;
}

.spotlight-rows.is-armed > .is-on .brxe-heading,
.spotlight-rows.is-armed > .is-on .brxe-text,
.spotlight-rows.is-armed > .is-on .brxe-text a {
	color: var(--white, #ffffff) !important;
}

@media (prefers-reduced-motion: reduce) {

	.spotlight-rows.is-armed > *,
	.spotlight-rows.is-armed > * .brxe-heading,
	.spotlight-rows.is-armed > * .brxe-text,
	.spotlight-rows.is-armed > * .brxe-text a {
		transition: none;
	}
}

/* ==========================================================================
   Works 상세 팝업 (템플릿 256) — 틀은 고정, 본문만 스크롤
   지심컴퍼니 · 2026-08-28

   왜 CSS 로 따로 잡는가
   브릭스가 반복(loop) 안에서 팝업을 렌더할 때
   요소에 저장해 둔 max-height·overflow 를 CSS 로 내보내지 않는다.
   그래서 팝업이 화면 높이를 넘어 늘어나고 스크롤이 생기지 않았다.

   구조
     .brx-popup-content   브릭스가 만드는 바깥 칸. 여기서 크기를 잠근다.
     .brxe-pwrap          흰 카드. 자기는 스크롤하지 않는다.
     .brxe-phead          제목·브랜드. 고정.
     .brxe-pbody          영상·메타·본문. 여기서만 오르내린다.
   ========================================================================== */

.brx-popup.brxe-popup-256 .brx-popup-content {
	width: 900px;
	max-width: 92vw;
	max-height: 86vh;
	min-height: 0;
	overflow: hidden;
	padding: 0;
	background: transparent;
}

.brx-popup.brxe-popup-256 .brxe-pwrap.brxe-div {
	max-height: 86vh;
	min-height: 0;
	overflow: hidden;
	width: 100%;
}

/* min-height: 0 이 없으면 flex 안에서 overflow 가 먹지 않는다.
   내용이 그대로 넘쳐 버린다. 지우지 말 것. */
.brx-popup.brxe-popup-256 .brxe-pbody.brxe-div {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

.brx-popup.brxe-popup-256 .brxe-phead.brxe-div {
	flex: 0 0 auto;
}

/* 본문 안 요소들은 줄어들지 않는다.

   높이가 제한된 flex 세로 묶음 안에서는 자식들이 기본적으로 줄어든다.
   그러면 영상처럼 자기 높이를 비율로 갖는 요소가 0 으로 눌려
   썸네일이 사라진 것처럼 보인다.
   줄어드는 대신 본문이 스크롤되게 해야 한다. 이 규칙을 지우지 말 것. */
.brx-popup.brxe-popup-256 .brxe-pbody.brxe-div > * {
	flex-shrink: 0;
}

/* ==========================================================================
   Works 카드 — 마우스를 올리면 VIEW 아이콘이 나타난다
   지심컴퍼니 · 2026-08-29

   썸네일 가운데에 얹혀 있고, 평소에는 보이지 않는다.
   카드 전체가 클릭 대상(팝업 열기)이므로 트리거도 카드 전체로 잡는다.

   pointer-events: none 을 둔 이유
   아이콘이 클릭을 가로채면 카드 클릭이 안 먹는다. 장식일 뿐이다.
   ========================================================================== */

.works-card .card-view {
	opacity: 0;
	transform: scale(.88);
	pointer-events: none;
	transition:
		opacity   .38s cubic-bezier(.22, 1, .36, 1),
		transform .38s cubic-bezier(.22, 1, .36, 1);
}

.works-card:hover .card-view {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {

	.works-card .card-view {
		transition: none;
		transform: none;
	}
}

/* ==========================================================================
   Insight 카드 — 카드 전체가 상세페이지 링크
   지심컴퍼니 · 2026-08-31

   Works 는 팝업, Insight 는 상세페이지로 간다.
   Works 카드에는 card-linked 가 없으므로 이 규칙은 Works 에 영향을 주지 않는다.

   div 에는 링크 설정이 없어서 투명한 <a> 를 카드 위에 덮는다.
   자바스크립트로 이동시키지 않고 진짜 링크를 쓰는 이유
     · 검색엔진이 따라간다
     · 새 탭으로 열기·주소 복사가 된다
     · 키보드로 킭 이동이 된다
   ========================================================================== */

.card-linked {
	position: relative;
}

/* 카드 전체를 덮는 투명 링크.
   글자는 화면에서 감추되지만 지우지는 않는다.
   스크린리더가 "어디로 가는 링크인지" 읽을 수 있어야 하기 때문이다. */
.card-linked .card-link {
	position: absolute;
	inset: 0;
	z-index: 1;
	font-size: 0;
	color: transparent;
	overflow: hidden;
}

/* 태그는 링크보다 위에 둔다.
   그래야 태그를 누를 때 상세페이지가 아니라 태그 목록으로 간다. */
.card-linked .works_tag {
	position: relative;
	z-index: 2;
}

/* 호버 기준은 썸네일이 아니라 카드다. Works·Insight 공통.

   왜 카드 기준인가
   1) Insight 는 투명 링크가 카드 전체를 덮어, 마우스가 썸네일이 아니라 링크 위에 올라간다.
      링크는 썸네일의 형제라 :hover 가 전달되지 않고,
      브릭스에 저장된 썸네일 :hover 설정이 영원히 발동하지 않았다.
   2) 카드 전체가 클릭 대상이다. 제목이나 태그 위에 마우스가 있을 때도
      "누를 수 있다"는 신호가 보여야 한다.

   선택자에 .brxe-div 를 붙인 이유
   브릭스 기본 규칙(.brxe-카드 .brxe-썸네일.brxe-div)과 가중치를 맞춰야
   투명 테두리·radius 0 을 덮어쓸 수 있다.

   기본 상태(투명 테두리·투명 그림자·전환)는 브릭스 설정에 그대로 둔다.
   여기서는 호버 상태만 다룬다. */
/* ==========================================================================
   Insight 검색 결과 요약
   지심컴퍼니 · 2026-08-31

   브릭스 query-results-summary 요소가 그리는 문구를 시안대로 입힌다.
   요소 설정의 Format 칸에 span 을 넣어둔 상태라 여기서 색·크기만 정한다.

     <span class="qrs-term">{search_term}</span> 검색 결과
     <span class="qrs-count">총 %total%건</span>

   %total% 은 브릭스가 결과 개수로 바꿔 준다.
   결과 0건·1건일 때는 요소의 별도 문구가 대신 나간다.
   ========================================================================== */

.qrs {
	display: flex;
	align-items: baseline;
	gap: 10px;
	width: 100%;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--gray-black, #000000);
	font-size: 28px;
	font-weight: 500;
	color: var(--gray-black, #000000);
	line-height: 1.3;
}

.qrs .qrs-term {
	font-weight: 700;
}

/* "총 3건" 은 본문보다 작고 연하게. 수치는 보조 정보다. */
.qrs .qrs-count {
	font-size: 14px;
	font-weight: 400;
	color: var(--gray-150, #57585E);
}

@media (max-width: 767px) {

	.qrs {
		font-size: 20px;
		gap: 8px;
	}
}

/* 검색어가 있을 때만 요약 줄을 보여준다.

   is-armed 는 assets/insight-search.js 가 붙인다.
   스크립트가 안 떴 때는 이 규칙이 걸리지 않아 요약이 그냥 보인다.
   숨기는 일을 CSS 가 먼저 해버리면 스크립트 실패 시 영영 안 나타난다. */
.qrs-row.is-armed:not(.has-term) {
	display: none;
}

.works-card:hover .card-thumb.brxe-div {
	border-color: var(--gray-black, #000000);
	border-radius: 20px;
	box-shadow: 0 18px 38px -16px rgba(20, 12, 28, .28);
	transform: translateY(-4px);
}

/* ==========================================================================
   Insight 상세 — 이전 / 다음 글 사이 구분선
   지심컴퍼니 · 2026-09-01

   브릭스 post-navigation 은 justify-content: space-between 이라
   좌우 링크가 '내용 폭만큼만' 차지한다.
   그래서 .prev-post 에 border-right 를 주면 선이 카드 가운데가 아니라
   이전 글 제목 바로 뒤에 붙어 버린다. → 카드 기준 절대 위치로 세운다.

   선을 .next-post 의 가상 요소로 만든 이유
   첫 글·마지막 글에서는 한쪽 링크가 아예 렌더되지 않는다.
   .prev-post + .next-post 는 둘 다 있을 때만 성립하므로,
   링크가 하나뿐인 페이지에서 선이 혼자 떠 있는 일이 없다.
   ========================================================================== */

#brxe-xlgdye {
	position: relative;
}

#brxe-xlgdye .prev-post + .next-post::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 1px;
	background-color: var(--gray-50, #AFB1BA);
}

/* 478px 아래에서는 브릭스가 두 링크를 세로로 쌓는다 (a { width: 100% }).
   이때 세로선은 두 항목을 관통하므로 가로선으로 눕힌다.
   선은 두 링크 사이 30px gap 안에 놓인다. */
@media (max-width: 478px) {

	#brxe-xlgdye .prev-post + .next-post::before {
		top: 50%;
		bottom: auto;
		left: 0;
		width: 100%;
		height: 1px;
	}
}

/* ==========================================================================
   메인 인트로 — 스크롤에 따라 네 패널이 모서리에서 들어와 맞물린다
   지심컴퍼니 · 2026-09-03

   좌표는 피그마 01_MAIN 시안(1920×1080)을 백분율로 옮긴 것이다.
   진행률 계산과 transform 은 assets/main-intro.js 가 맡는다.
   여기서는 '도착 상태'만 그린다. 출발 위치는 스크립트가 밀어낸다.
   ========================================================================== */

/* 스크롤 트랙. 이 높이가 곧 '몇 화면을 굴려야 다 조립되는가'다.

   display: block 이 꼭 필요하다.
   브릭스의 .brxe-section 은 flex · column · align-items: center 이라
   그대로 두면 안의 핀이 내용 폭만큼 줄어든다. */
.main-intro {
	--intro-track: 220vh;
	display: block;
	position: relative;
	height: var(--intro-track);
	max-width: none;
	margin: 0;
	padding: 0;
}

.intro-pin {
	position: sticky;
	top: 0;
	height: 100vh;
	/* 모바일은 100vh 가 주소창·툴바를 포함해 실제 보이는 화면보다 크다.
	   svh 는 가장 작은 상태 기준. 못 알아듣는 브라우저는 윗줄을 그대로 쓴다. */
	height: 100svh;
	overflow: hidden;
	background-color: var(--gray-white, #FFFFFF);
}

/* ★ 좌표계 — 시안 1920×1080 을 픽셀 그대로 쓴다.

   예전에는 모든 좌표를 무대 크기 대비 %로 잡았다. 그러면 화면비가 시안과
   다를 때 가로·세로가 서로 다른 비율로 늘어나, 바람개비 가운데 구멍이
   정사각이 아니게 되고 칩과 여백이 어긋난다. 좌우 여백과 상하 여백이
   달라 보이던 게 그 때문이다.

   이제 무대를 시안 크기로 고정해 두고, 스크립트가 화면을 덮도록 통째로
   scale 한다. 안쪽 좌표는 시안 수치를 그대로 적으면 되고, 어떤 화면비에서도
   비율이 절대 틀어지지 않는다. 넘치는 부분은 핀이 잘라 준다. */
.intro-stage {
	--frame-w: 1920;
	--frame-h: 1080;
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	width: calc(var(--frame-w) * 1px);
	height: calc(var(--frame-h) * 1px);
	/* ★ 브릭스가 [class*=brxe-] 에 max-width: 100% 를 건다.
	   이걸 풀지 않으면 무대 폭이 부모 폭으로 깎여 시안 좌표가 무너진다.
	   390 을 줘도 360 으로 줄어들어 모바일에서 계산이 전부 어긋났다. */
	max-width: none;
	/* 세로 구성  2026-09-10
	   상하 여백과 가운데 틈은 고정이고, 남는 높이를 네 패널이 나눠 가진다.
	   1080 틀에서 짧은 쪽 455, 긴 쪽 594 — 그 비율을 그대로 쓴다.
	   --frame-h 는 assets/main-intro.js 가 화면 비율에 맞춰 넣어 준다. */
	--edge-t: 10px;
	--edge-b: 11px;
	--gap: 10px;
	--inner: calc(var(--frame-h) * 1px - var(--edge-t) - var(--edge-b) - var(--gap));
	/* 두 패널의 높이 차는 139px 로 고정한다.
	   가운데 칩 구멍의 높이가 바로 이 차 + 틈 10px 이기 때문이다.
	   비율로 나누면 화면이 낮을수록 구멍이 줄어들어
	   칩 좌우 여백(10.5px 고정)과 상하 여백이 어긋난다. */
	--h-diff: 139px;
	--h-short: calc((var(--inner) - var(--h-diff)) / 2);
	--h-tall: calc(var(--h-short) + var(--h-diff));

	--grid-ink: rgba(255, 255, 255, .22);
	transform-origin: 50% 50%;
	container-type: inline-size;
}

/* 1px 그리드 — 시안의 보조선.

   좌표는 시안 그대로다.
     세로  635 · 800 · 1120 · 1285
     가로  215 · 375 · 705 · 865

   바깥 네 선이 2단계 보라 정사각(650)의 변과 정확히 일치하고,
   안쪽 네 선이 좌우 165 · 상하 160 만큼 들어와 있다.

   흰 선이라 흰 바탕에서는 보이지 않고 보라 위에서만 드러난다.
   시안에서도 보라 영역에만 선이 보이는 이유다.

   --grid-fade 는 assets/main-intro.js 가 넣는다.
   마지막 상태(시안 Main - Default)에는 선이 없어 보라가 물러나면 같이 사라진다. */
.intro-stage::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	opacity: var(--grid-fade, 1);
	background-image:
		linear-gradient(var(--grid-ink), var(--grid-ink)),
		linear-gradient(var(--grid-ink), var(--grid-ink)),
		linear-gradient(var(--grid-ink), var(--grid-ink)),
		linear-gradient(var(--grid-ink), var(--grid-ink)),
		linear-gradient(var(--grid-ink), var(--grid-ink)),
		linear-gradient(var(--grid-ink), var(--grid-ink)),
		linear-gradient(var(--grid-ink), var(--grid-ink)),
		linear-gradient(var(--grid-ink), var(--grid-ink));
	background-repeat: no-repeat;
	background-size:
		1px 100%, 1px 100%, 1px 100%, 1px 100%,
		100% 1px, 100% 1px, 100% 1px, 100% 1px;
	background-position:
		635px 0, 800px 0, 1120px 0, 1285px 0,
		0 calc(var(--frame-h) * 0.19907px),
		0 calc(var(--frame-h) * 0.34722px),
		0 calc(var(--frame-h) * 0.65278px),
		0 calc(var(--frame-h) * 0.80093px);
}

.intro-pan {
	position: absolute;
	overflow: hidden;
	will-change: transform;
}

/* 가로는 시안 좌표 그대로(1920 고정), 세로는 화면에 맞춰 늘어난다.
   1080 일 때 시안 값(455 / 594 / top 475 / top 614)과 정확히 같다. */
.pan-works   { left: 10px;   top: var(--edge-t); width: 1015px; height: var(--h-short); background-color: #D1A1D4; }
.pan-insight { left: 1035px; top: var(--edge-t); width: 875px;  height: var(--h-tall);  background-color: #A38DDF; }
.pan-about   { left: 10px;   top: calc(var(--edge-t) + var(--h-short) + var(--gap)); width: 875px;  height: var(--h-tall);  background-color: #99C4BB; }
.pan-contact { left: 895px;  top: calc(var(--edge-t) + var(--h-tall)  + var(--gap)); width: 1015px; height: var(--h-short); background-color: #7699D1; }

/* 라벨은 네 패널 모두 왼쪽 위 40px, 아이콘은 모두 오른쪽 아래 40px 이다. */
.intro-pan .intro-lab {
	position: absolute;
	top: 40px;
	left: 40px;
	z-index: 2;
	font-size: 40px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--gray-black, #000000);
}

.intro-pan .intro-ico {
	position: absolute;
	right: 40px;
	bottom: 40px;
	z-index: 2;
	transition: opacity .28s ease, transform .34s cubic-bezier(.22, 1, .36, 1);
}

.pan-works   .intro-ico { width: 271px; }
.pan-insight .intro-ico { width: 511px; }
.pan-about   .intro-ico { width: 352px; }
.pan-contact .intro-ico { width: 204px; }

/* 패널 전체를 덮는 투명 링크.
   글자는 화면에서 지우되 읽어 주는 도구에는 남긴다. */
.intro-pan .intro-link {
	position: absolute;
	inset: 0;
	z-index: 3;
	overflow: hidden;
	font-size: 0;
	color: transparent;
}

/* 호버 — 시안 Main - Hover(Works) / (All)

   패널이 검정으로 바뀌고, 라벨과 채워진 아이콘이 가운데 나란히 선다.

   패널 전체를 덮는 오버레이 한 장으로 처리한다.
   기본 상태의 라벨·아이콘을 옮기는 대신 가리는 편이, 위치가 서로 얽히지
   않아 나중에 고치기 쉽다.

   라벨과 아이콘 모두 패널 고유색이다.
   아이콘은 파일에 색이 박혀 있고, 라벨은 아래에서 패널별로 지정한다. */
.intro-pan .intro-hov {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 40px;
	padding: 40px;
	background-color: #000000;
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease;
}

/* 호버는 진짜 포인터가 있는 기기에서만 건다.
   터치에서는 한번 누르면 호버 상태가 남아 검은 화면이 박히는 일이 생긴다.
   키보드 초점은 기기와 무관하므로 따로 둔다. */
@media (hover: hover) {

	.intro-pan:hover .intro-hov {
		opacity: 1;
	}
}

.intro-pan:focus-within .intro-hov {
	opacity: 1;
}

/* 배치 방향은 패널마다 다르다 (시안 Main - Hover(All)).
     Works · Contact   글자 옆에 아이콘   — 기본값(row)
     Insight · About    글자 아래에 아이콘
   DOM 순서가 라벨 → 아이콘 이라 column 만 주면 위아래로 선다. */
.pan-insight .intro-hov,
.pan-about .intro-hov {
	flex-direction: column;
}

.intro-hov .intro-hov-lab {
	font-size: 64px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -.01em;
	white-space: nowrap;
}

/* 라벨 색 = 패널 고유색 */
.pan-works   .intro-hov-lab { color: #D1A1D4; }
.pan-insight .intro-hov-lab { color: #A38DDF; }
.pan-about   .intro-hov-lab { color: #99C4BB; }
.pan-contact .intro-hov-lab { color: #7699D1; }

/* 아이콘은 시안 원본 크기 그대로 */
.intro-hov .intro-hov-ico {
	display: block;
	height: auto;
	max-width: 100%;
}

/* aspect-ratio 를 같이 적는 이유 — 이미지가 아직 안 들어왔을 때도 자리를 잡아 둔다.
   height: auto 만 있으면 브릭스 지연 로딩의 빈 자리표시자(viewBox 0 0 0 0)로
   비율을 못 구해 높이가 0 이 된다. 수치는 SVG 원본 그대로다. */
.pan-works   .intro-hov-ico { width: 271px; aspect-ratio: 271 / 175; }
.pan-insight .intro-hov-ico { width: 511px; aspect-ratio: 511 / 140; }
.pan-about   .intro-hov-ico { width: 352px; aspect-ratio: 352 / 175; }
.pan-contact .intro-hov-ico { width: 209px; aspect-ratio: 209 / 307; }

/* 로고 칩 — 세 단계로 줄어든다. 시안 프레임 순서 그대로다.

     cover → hold → final
     꽉 참   정사각   작은 칩
     (1·2번) (3번)   (4번 → 완성)

   중심은 시안의 바람개비 구멍 한가운데(960.5, 539.5)에 고정된다.
   마지막에 129 가 되면 좌표가 시안(896..1025, 475..604)과 정확히 맞는다.

   세 값 모두 시안 픽셀이다. assets/main-intro.js 가 읽어 간다. */
.intro-chip {
	--chip-cover: 2200;
	--chip-hold: 650;
	--chip-final: 129;
	position: absolute;
	left: 960.5px;
	/* 구멍은 항상 무대 한가운데에 생긴다. */
	top: 50%;
	translate: -50% -50%;
	z-index: 4;
	/* 폭만 주고 높이는 aspect-ratio 에 맡긴다.
	   폭·높이를 둘 다 적으면 한쪽이 안 풀렸을 때 정사각이 깨진다. */
	width: calc(var(--chip-cover) * 1px);
	/* 무대와 같은 이유 — 칩은 일부러 무대보다 크게 잡는다.
	   max-width: 100% 가 살아 있으면 첫 화면이 절대 꽉 차지 않는다. */
	max-width: none;
	height: auto;
	aspect-ratio: 1 / 1;
	display: grid;
	place-items: center;
	background-color: #6E3A88;
	transform-origin: 50% 50%;

	/* 로고가 차지하는 비율. JS 도 이 값을 읽어 쓴다. */
	--logo-ratio: .49;
}

/* 2026-09-15 — 크기를 transform 이 아니라 width 로 바꾼다.

   예전에는 로고를 1078px 로 깔아놓고 transform: scale 로 17배 줄였다.
   will-change: transform 이 붙은 레이어는 한 번 그린 그림을 그대로 당겨 쓰기 때문에,
   다 줄어든 뒤에도 큰 그림을 강제로 축소한 모양이 남아 흐리게 보였다.

   width 를 직접 줄이면 그때마다 SVG 를 그 크기로 다시 그린다. 항상 선명하다.
   칩과 로고 둘뿐이라 비용도 싸다. */
.intro-chip .intro-logo {
	width: calc(var(--logo-ratio, .49) * 100%);
}

/* 인트로 문구 — GLOBAL · MARKETING · AGENCY  2026-10-08

   칩과 별도 층이다. 칩 안에 두면 칩이 줄 때 같이 찌그러진다.
   상단 268 은 1080 틀 기준이라, 칩 중심(무대 50%)에서 272 위로 잡는다.
   무대 높이가 화면 비율에 따라 늘어나도 보라 위 같은 자리에 남는다.

   GLOBAL 은 피그마 확정값, MARKETING · AGENCY 는 측정 추정값이다.
   흐려지는 시점은 assets/main-intro.js 가 칩 폭으로 정한다. */
.intro-words {
	--words-show: 1600;
	--words-gone: 1150;
	position: absolute;
	left: 0;
	top: calc(50% - 272px);
	width: 100%;
	max-width: none;
	height: 52px;
	z-index: 6;
	pointer-events: none;
}

.intro-words .intro-word {
	position: absolute;
	top: 0;
	height: 52px;
	font-family: "Paperlogy", var(--font-en, sans-serif);
	font-weight: 600;
	font-size: 36px;
	line-height: 52px;
	letter-spacing: .09em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #FFFFFF;
}

.intro-words .word-global    { left: 431px;  width: 171px; text-align: right; }
.intro-words .word-marketing { left: 824px;  width: 269px; text-align: center; }
.intro-words .word-agency    { left: 1310px; width: 193px; text-align: left; }

/* 하단 워드마크 — 피그마 상단 766 · 왼쪽 880 · 160×24.
   문구 층(상단 268) 안에 두므로 766 - 268 = 498. 문구와 같이 흐려진다. */
.intro-words .intro-wordmark {
	position: absolute;
	left: 880px;
	top: 498px;
	width: 160px;
	max-width: none;
	height: auto;
	display: block;
}

/* 모바일 틀(390)에는 세 단어가 들어갈 폭이 없다. 시안도 없다. */
@media (max-width: 767px) {
	.intro-words { display: none; }
}

.intro-pan .intro-ico img,
.intro-chip .intro-logo img {
	display: block;
	width: 100%;
	height: auto;
}

/* 모바일 — 바람개비는 가로가 좁으면 성립하지 않아 2×2 로 편다.
   패널이 네 장이라 네 모서리가 그대로 남는다. '모서리에서 들어옴'은 유지된다.
   시안에 모바일 프레임이 없어 390×800 좌표는 제안값이다. */
@media (max-width: 767px) {

	/* --frame-h 는 스크립트가 기기 비율에 맞춰 넣어 준다.
	   여기 값은 스크립트가 안 뗴을 때를 위한 기본값이다. */
	.intro-stage { --frame-w: 390; --frame-h: 800; }

	/* ★ 데스크톱과 같은 바람개비다. 균등한 2×2 가 아니다.

	   균등 2×2 로 두면 패널 사이 틈이 8px 뿐이라 칩이 들어갈 구멍이 없다.
	   62px 칩이 네 패널 위에 그냥 얹힐 뿐이다.
	   네 장의 크기를 엇갈리게 해야 가운데 구멍이 생긴다.

	   시안 규칙 그대로 맞춰 둔다.
	     칩 오른쪽 = Works 오른쪽 끝      (240)
	     칩 아래  = Insight 아래 끝       (400)
	     칩 왼쪽  = About 오른쪽 + 8       (178)
	     칩 위   = Works 아래 + 8          (338)
	   → 62×62 구멍이 (178..240, 338..400) 에 생긴다. 중심 (209, 369).

	   시안에 모바일 프레임이 없어 390×800 좌표는 제안값이다. */
	/* 세로 값은 --frame-h 에 따라 늘어난다. 가로는 390 고정이다.
	   기기 비율이 어떻든 여백도 잘림도 없게 된다.

	   0.41 은 위쪽 띄의 비율이다. 칩(62)이 그 아래 8px 지점에 앚혀
	   어느 높이에서든 정사각 구멍이 그대로 생긴다. */
	.pan-works   { left: 8px;   top: 8px;
	               width: 232px; height: calc(var(--frame-h) * 0.41px - 8px); }
	.pan-insight { left: 248px; top: 8px;
	               width: 134px; height: calc(var(--frame-h) * 0.41px + 62px); }
	.pan-about   { left: 8px;   top: calc(var(--frame-h) * 0.41px + 8px);
	               width: 162px; height: calc(var(--frame-h) * 0.59px - 16px); }
	.pan-contact { left: 178px; top: calc(var(--frame-h) * 0.41px + 78px);
	               width: 204px; height: calc(var(--frame-h) * 0.59px - 86px); }

	.intro-pan .intro-lab { top: 14px; left: 14px; font-size: 15px; }
	.intro-pan .intro-ico { right: 14px; bottom: 14px; }

	/* 데스크톱과 같은 비율(패널 폭의 26.7 / 58.4 / 40.2 / 20.1%) */
	.pan-works   .intro-ico { width: 62px; }
	.pan-insight .intro-ico { width: 78px; }
	.pan-about   .intro-ico { width: 65px; }
	.pan-contact .intro-ico { width: 41px; }

	/* 칩 중심 = 구멍 중심. 구멍은 Works 아래 8px 지점에서 시작해 62px 높이다. */
	.intro-chip {
		--chip-cover: 900;
		--chip-hold: 260;
		--chip-final: 62;
		left: 209px;
		top: calc(var(--frame-h) * 0.41px + 39px);
	}

	/* 그리드도 같은 비율로 줄인다.
	   바깥 선은 260 정사각의 변, 안쪽 선은 거기서 66 · 64 만큼 들어온다.
	   (데스크톱 165/650 · 160/650 과 같은 비율) */
	.intro-stage::after {
		background-position:
			79px 0, 145px 0, 273px 0, 339px 0,
			0 calc(var(--frame-h) * 0.41px - 91px),
			0 calc(var(--frame-h) * 0.41px - 27px),
			0 calc(var(--frame-h) * 0.41px + 105px),
			0 calc(var(--frame-h) * 0.41px + 169px);
	}

	/* 호버 — 모바일 크기.

	   데스크톱 수치(라벨 64px · 아이콘 271~511px)는 1920 틀 기준이라
	   390 틀에 그대로 쓰면 네 패널 모두 밖으로 넘친다.
	   아이콘은 데스크톱과 같은 비율(패널 폭의 26.7 / 58.4 / 40.2 / 20.6%)로
	   줄이고, 여백과 간격도 같이 좁힌다. */
	.intro-pan .intro-hov {
		gap: 12px;
		padding: 16px;
	}

	.intro-hov .intro-hov-lab {
		font-size: 20px;
	}

	.pan-works   .intro-hov-ico { width: 62px; }
	.pan-insight .intro-hov-ico { width: 78px; }
	.pan-about   .intro-hov-ico { width: 65px; }
	.pan-contact .intro-hov-ico { width: 42px; }
}

/* 인트로가 있는 페이지에서는 트랙을 다 지날 때까지 헤더를 감춘다.

   :has() 로 걸어 두는 이유 — 스크립트가 클래스를 붙이기 전에도 규칙이 이미 걸려 있어
   헤더가 한 번 깜빡였다 사라지는 일이 없다.
   intro-done 은 assets/main-intro.js 가 트랙을 다 지났을 때 붙인다. */
body:has(.main-intro) #brx-header {
	/* ★ position 을 fixed 로 바꾸는 게 핵심이다.

	   테마는 #brx-header.brx-sticky.on-scroll 을 position: sticky 로 둔다.
	   sticky 는 흐름 안에 남아 자리를 차지하고, visibility: hidden 은
	   그 자리를 그대로 두는 속성이라 인트로 위에 헤더 높이만큼 흰 띄가 남았다.

	   fixed 는 두 상태 모두에서 흐름 밖에 있어, 헤더가 다시 나타날 때도
	   본문이 아래로 밀리는 점프가 없다. */
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .35s ease, visibility 0s .35s;
}

body:has(.main-intro).intro-done #brx-header {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity .35s ease;
}

@media (prefers-reduced-motion: reduce) {

	.intro-pan .intro-ico {
		transition: none;
	}
}

/* ==========================================================================
   폼 전송 완료 팔업
   지심컴퍼니 · 2026-09-08

   브릭스 폼은 전송에 성공하면 bricks/form/success 이벤트를 쇞다.
   assets/form-popup.js 가 그걸 받아 이 팔업을 띄운다.

   문구는 편집기에서 고칠 수 있다.
     제목  폼 요소의 속성 칸  data-popup-title
     본문  폼 설정의 '성공 메시지'

   폼이 여러 개가 되어도 같은 팔업을 쓴다. 뉴스레터 폼이 생기면
   그 폼에 문구만 넣으면 바로 동작한다.
   ========================================================================== */

.fp-back {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	place-items: center;
	padding: 20px;
	background-color: rgba(20, 12, 28, .55);
	opacity: 0;
	transition: opacity .22s ease;
}

.fp-back.is-open {
	opacity: 1;
}

.fp-card {
	width: 100%;
	max-width: 460px;
	padding: 40px 32px 28px;
	border-radius: 16px;
	background-color: var(--gray-white, #FFFFFF);
	text-align: center;
	box-shadow: 0 24px 60px -20px rgba(20, 12, 28, .45);
	transform: translateY(12px) scale(.98);
	transition: transform .26s cubic-bezier(.22, 1, .36, 1);
}

.fp-back.is-open .fp-card {
	transform: none;
}

/* 체크 원. 색은 Contact 패널과 같은 계열을 썼다.
   다른 색으로 바꾸려면 --fp-mark 한 군데만 고치면 된다. */
.fp-mark {
	width: 64px;
	height: 64px;
	margin: 0 auto 22px;
	border-radius: 50%;
	background-color: var(--fp-mark, #7699D1);
	display: grid;
	place-items: center;
}

.fp-mark svg {
	display: block;
	width: 30px;
	height: 30px;
}

.fp-title {
	margin: 0 0 12px;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -.02em;
	color: var(--gray-black, #000000);
	text-wrap: balance;
}

.fp-desc {
	margin: 0 0 28px;
	font-size: 14px;
	line-height: 1.65;
	color: var(--gray-100, #7B7D86);
	text-wrap: balance;
}

.fp-close {
	appearance: none;
	width: 100%;
	border: 0;
	border-radius: 8px;
	padding: 15px;
	background-color: var(--gray-20, #E4E4EB);
	color: var(--gray-200, #3B3B43);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .18s ease;
}

.fp-close:hover {
	background-color: var(--gray-50, #AFB1BA);
}

.fp-close:focus-visible {
	outline: 2px solid var(--purple-100, #6E3A88);
	outline-offset: 2px;
}

/* 팔업이 뜨면 브릭스 기본 인라인 문구는 감춘다. 같은 말을 두 번 하지 않는다. */
.brxe-form.fp-done .message {
	display: none;
}

/* 팔업이 열린 동안 뒷배경 스크롤을 막는다. */
body.fp-open {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {

	.fp-back,
	.fp-card {
		transition: none;
	}
}

/* ==========================================================================
   u-turn  —  스크롤하면 돌아가고, 올리면 되돌아온다
   지심컴퍼니 · 2026-09-08

   쓰는 법
     요소의 CSS 클래스 칸에  u-turn
     돌아가는 지점을 바꾸려면 속성 칸에  data-turn-at = 20vh  (px · vh · % 가능)

   각도와 속도는 변수로 바꿈다. 클래스를 새로 만들지 않는다.
     --turn-angle      돌아갈 각도   (기본 -90deg — 왼쪽 화살표를 아래로)
     --turn-duration   도는 시간     (기본 .55s)

   ★ transform 이 아니라 rotate 개별 속성을 쓴다.
     u-bounce 가 transform: translateY() 로 튀는 애니메이션을 돌리고 있어,
     같은 transform 을 건드리면 애니메이션이 이기고 회전이 사라진다.
     개별 속성은 따로 계산되어 합쳐지므로 둘이 공존한다.

   is-turned 는 assets/scroll-turn.js 가 붙이고 떼어낸다.
   브릭스 스크롤 트리거로도 붙일 수 있지만, 그쪽은 한번 발동하면
   되돌리는 기능이 없어 스크립트로 다룬다.
   ========================================================================== */

.u-turn {
	transition: rotate var(--turn-duration, .55s) cubic-bezier(.22, 1, .36, 1);
}

.u-turn.is-turned {
	rotate: var(--turn-angle, -90deg);
}

@media (prefers-reduced-motion: reduce) {

	.u-turn {
		transition: none;
	}
}

/* ==========================================================================
   모바일 슬라이드 메뉴
   지심컴퍼니 · 2026-09-09

   헤더는 두 벌이다.
     .header-top   흰 바   → 검정 글자   (nav #brxe-freiwo)
     .header-float 검정 바 → 흰 글자     (nav #brxe-npikmj)

   브릭스가 만드는 전체화면 패널은 두 벌 모두 배경이 #fff 로 고정된다.
   그래서 검정 바에서 메뉴를 열면 흰 글자가 흰 배경에 얹혀 아무것도 안 보였다.
   패널 색을 각자의 바 색에 맞춘다.

   같은 이유로 검정 바의 햄버거 아이콘도 안 보였다.
   브릭스 토글은 currentColor 로 그려지는데 색이 검정으로 잡혀 있었다.

   여백도 함께 잡는다. 브릭스 기본 패널은 gap 이 0 이라 항목이 서로 붙고,
   닫기 버튼이 메뉴 네 번째 항목처럼 목록 한가운데 남는다.
   ========================================================================== */

/* 검정 바의 글자·아이콘은 흰색이다. 닫기 버튼도 이 색을 따라간다. */
#brxe-npikmj {
	color: var(--gray-white, #FFFFFF);
}

@media (max-width: 767px) {

	/* 두 패널 공통 — 숨 쉴 자리 */
	#brxe-freiwo.brx-open .brx-nav-nested-items,
	#brxe-npikmj.brx-open .brx-nav-nested-items {
		gap: 28px;
		/* 위아래 여백은 반드시 같아야 한다.
		   justify-content: center 는 패딩 안쪽을 기준으로 가운데를 잡기 때문에
		   위 96 / 아래 48 이면 메뉴가 그 차이의 절반인 24px 만큼 아래로 내려간다. */
		padding: 96px 24px;
		overflow-y: auto; /* scroll 이면 스크롤바 자리가 늘 보인다 */
	}

	#brxe-freiwo.brx-open .brx-nav-nested-items .brxe-text-link,
	#brxe-npikmj.brx-open .brx-nav-nested-items .brxe-text-link {
		font-size: 28px;
		line-height: 1.2;
	}

	/* 닫기 버튼은 목록에서 빼내 우상단에 둔다.
	   패널이 position: fixed 라 absolute 의 기준이 패널 자신이 된다. */
	#brxe-freiwo.brx-open .brx-nav-nested-items > li:has(> .brx-toggle-div),
	#brxe-npikmj.brx-open .brx-nav-nested-items > li:has(> .brx-toggle-div) {
		position: absolute;
		top: 24px;
		right: 20px;
		margin: 0;
	}

	/* 검정 바에서 연 패널만 검정으로 */
	#brxe-npikmj.brx-open .brx-nav-nested-items {
		background-color: var(--gray-black, #000000);
	}
}

/* ==========================================================================
   u-roll — 스크롤로 굴러 올라가는 움직임
   지심컴퍼니 · 2026-09-09

   헤더 Contact 버튼의 btn-roll 과 같은 움직임이다.
   원본이 위로 빠져나가고 똑같은 복제본이 아래에서 따라 올라온다.
   다른 점은 신호가 호버가 아니라 스크롤이라는 것뿐이다.
   시간과 이징을 btn-roll 과 같은 값으로 맞춘 이유도 그것이다.
   두 모션이 한 벌로 읽혀야 한다.

   쓰는 법
     1. 굴릴 요소를 div 하나로 감싼다.
     2. 그 div 의 CSS 클래스 칸에  u-roll

   복제본은 assets/scroll-roll.js 가 만든다. 원본 한 장만 관리하면 된다.

   조절
     data-roll-at     몇 만큼 보일 때 구를지  (0~1, 기본 0.6)
     --roll-duration  구르는 시간             (기본 .42s · btn-roll 과 같다)
   ========================================================================== */

.u-roll {
	display: block;
	position: relative;
	overflow: hidden;
	line-height: 0; /* 인라인 이미지 아래 생기는 빈 줄을 없앤다 */
}

.u-roll > * {
	transition: translate var(--roll-duration, .42s) cubic-bezier(.22, 1, .36, 1);
}

/* 복제본은 바로 아래 칸에서 대기한다. */
.u-roll > .u-roll-copy {
	position: absolute;
	left: 0;
	top: 100%;
	width: 100%;
	height: auto;
}

/* 둘 다 한 칸씩 위로. 원본은 빠지고 복제본이 그 자리를 채운다. */
.u-roll.is-rolled > * {
	translate: 0 -100%;
}

@media (prefers-reduced-motion: reduce) {

	.u-roll > * {
		transition: none;
	}
}

/* ==========================================================================
   u-hovervid — 호버하면 재생되는 영상
   지심컴퍼니 · 2026-09-09

   원래 있던 이미지를 그대로 두고 그 위에 영상을 얹는다.
   이미지는 포스터 역할을 한다. 영상이 뜨기 전과 마우스를 뗀 뒤에
   빈 화면이 보이지 않는 이유다.

   영상 요소는 assets/hover-video.js 가 호버할 때 만들고 뗄 때 지운다.
   미리 심어 두지 않는 이유는 두 가지다.
     처음 페이지를 열 때 유튜브를 통째로 받지 않는다.
     마우스를 떼면 재생도 통신도 확실히 끊긴다.
   ========================================================================== */

.u-hovervid {
	position: relative;
}

/* 감싼 div 에 준 모서리 반경을 그대로 물려받는다.
   빌더의 Border → 반경 값만 고치면 포스터와 영상이 함께 따라온다.
   값을 두 군데 적지 않는다는 것이 이 방식의 이유다. */
.u-hovervid > img,
.u-hovervid-frame,
.u-hovervid-clip,
.u-hovervid-shade,
.u-hovervid-shade > div {
	border-radius: inherit;
}

.u-hovervid > img {
	display: block;
	width: 100%;
	height: auto;
}

/* 호버하기 전 포스터에 얹는 검은 그늘.

   영상 상자와 똑같은 방식으로 자리를 잡는다. 감싼 div 에 좌우 여백이 있어서
   ::after 가상 요소로는 이미지에 정확히 겹칠 수가 없다.

   질기를 바꾸려면 --hovervid-shade 에 다른 그라데이션을, 그늘을 없애려면 none 을 넣는다. */
.u-hovervid-shade {
	position: absolute;
	inset: 0;
	padding: inherit;
	box-sizing: border-box;
	z-index: 1;
	pointer-events: none;
}

.u-hovervid-shade > div {
	width: 100%;
	height: 100%;
	background-image: var(--hovervid-shade,
		linear-gradient(to bottom,
			rgba(0, 0, 0, .38) 0%,
			rgba(0, 0, 0, .10) 32%,
			rgba(0, 0, 0, .18) 62%,
			rgba(0, 0, 0, .58) 100%));
	transition: opacity .35s ease;
}

/* 재생할 때는 그늘을 걷는다. 호버가 열리는 느낌을 만든다. */
@media (hover: hover) {

	.u-hovervid:hover .u-hovervid-shade > div {
		opacity: 0;
	}
}

.u-hovervid-frame {
	position: absolute;
	inset: 0;
	z-index: 2;

	/* 감싼 div 의 좌우 여백을 그대로 물려받는다.
	   absolute 는 패딩 박스를 기준으로 잡히기 때문에, 이게 없으면
	   영상이 이미지보다 여백만큼 넓게 깔린다. */
	padding: inherit;
	box-sizing: border-box;

	/* 영상이 준비되기 전까지는 포스터가 보인다. */
	opacity: 0;
	transition: opacity .35s ease;

	/* 유튜브 아이프레임이 마우스를 가로채면 mouseleave 가 바로 떠서
	   영상이 깜빡인다. 마우스를 통과시켜 그걸 막는다. */
	pointer-events: none;
}

.u-hovervid-frame.is-ready {
	opacity: 1;
}

/* 확대한 영상을 이미지 테두리에서 잘라 내는 상자.
   .u-hovervid-frame 에 자를 수 없는 이유는 그쪽이 좌우 여백을 물려받고 있어서
   여백 자리까지 영상이 비어져 나오기 때문이다. */
.u-hovervid-clip {
	width: 100%;
	height: 100%;

	/* 모서리를 깎으면 안쪽 영상도 같이 깎인다.
	   isolation 은 사파리 때문이다. 확대한 자식을 둔 상자는
	   둘러싸는 맥락이 따로 없으면 둥근 모서리로 자르지 못한다. */
	overflow: hidden;
	isolation: isolate;

	background-color: var(--gray-black, #000000);
}

.u-hovervid-clip > * {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;

	/* 유튜브는 제목과 로고를 화면 가장자리에 그린다. 없앨 수 있는 값이 없으므로
	   영상을 조금 키워 그 띠를 테두리 밖으로 밀어낸다. 화면은 그만큼 확대된다. */
	scale: var(--hovervid-zoom, 1);
	transform-origin: 50% 50%;
}

/* 유튜브일 때만 키운다. 직접 올린 mp4 는 가릴 것이 없으니 그대로 둔다.
   data-yt 를 data-video 로 바꾸면 확대도 저절로 풀린다. */
.u-hovervid[data-yt] {
	--hovervid-zoom: 1.14;
}

/* 포스터로 갈아 끼운 유튜브 썸네일은 영상과 같은 16:9 로 맞춘다.
   큰 썸네일이 없는 옛날 영상은 4:3 그림이 와서 위아래에 검은 띠가 붙는데,
   16:9 로 잘라 내면 그 띠가 거의 정확히 잘려 나간다. */
.u-hovervid[data-yt] > img {
	aspect-ratio: 16 / 9;
	height: auto;
	object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {

	.u-hovervid-frame {
		transition: none;
	}
}


/* ==========================================================================
   Contact 문의 폼 — 2026-09-10 수정요청 반영
   지심컴퍼니

   브릭스 폼 요소가 설정 칸으로 내주지 않는 부분만 여기서 잡는다.
   색·글자크기·테두리처럼 설정 칸에 있는 것은 그쪽에서 고친다.
   ========================================================================== */

/* 필수 항목의 별표는 퍼플이다. 글자는 검정 그대로 둔다. */
#brxe-jqopmy label.required::after {
	color: var(--purple-100, #6E3A88);
}

/* 개인정보 동의 줄
   브릭스 기본값은 baseline 정렬이라 체크박스가 글자 아래쪽에 걸린다.
   가운데 정렬로 바꾸고 크기도 키운다. */
#brxe-jqopmy .options-wrapper li {
	align-items: center;
	gap: 10px;
}

#brxe-jqopmy .options-wrapper input[type="checkbox"] {
	width: 20px;
	height: 20px;
	top: 0;
	flex: 0 0 auto;
	accent-color: var(--purple-100, #6E3A88);
	cursor: pointer;
}

/* 기본 CSS 스니펫에 label { margin-bottom: 12px !important } 이 있다.
   입력칸 라벨과 칸 사이를 띄우려는 규칙인데, 동의 줄에서는 방해가 된다.
   가운데 정렬은 여백까지 포함한 상자를 기준으로 하므로,
   글자는 12px 의 절반인 6px 만큼 위로 올라가 체크박스가 낮아 보였다.
   이 줄에서만 여백을 없앨다. */
#brxe-jqopmy .options-wrapper label {
	margin-bottom: 0 !important;
	cursor: pointer;
}

/* 동의 줄과 문의하기 버튼 사이를 좁힌다.
   다른 칸과 같은 46px 이 들어가 있어서 멀어져 보였다. */
/* 동의 줄은 칸 전체 폭(100%)을 차지하고 안의 내용은 왼쪽에 붙는다.
   문의하기 버튼은 감싼 칸이 width: auto 라 폼의 가운데 정렬을 받는다.
   그래서 둘의 중심이 서로 다르다.

   동의 줄도 width: auto 로 바꾸면 버튼과 한 줄에 나란히 설 수 있다.
   폭은 그대로 두고 안의 내용만 가운데로 몰아 중심을 맞춘다. */
/* padding-bottom 에 !important 가 붙은 이유  2026-09-15

   브릭스가 내보내는 규칙은
     #brxe-jqopmy .form-group:not(.submit-button-wrapper):not(.message):not(.captcha)
   로, :not() 세 개까지 쉐서 이 규칙보다 구체적이고 로드도 나중에 된다.
   그래서 그냥 써서는 46px 이 이긴다. 명시적으로 이긴다. */
#brxe-jqopmy .form-group:has(.options-wrapper) {
	align-items: center;
	padding-bottom: 24px !important;
}

/* 칸 사이 간격은 왼쪽 칸에만 준다.  2026-09-16

   예전에는 앞에 "모든 칸 padding-right: 0" 을 두고 그 뒤에 왼쪽 칸만 다시 준다고 썼는데,
   앞 규칙의 :not() 세 개가 더 구체적이라 뒤 규칙을 이기고 있었다.
   순서가 아니라 특정도 싸움이라 밀린 것이다.

   이제 브릭스 쪽 칸 여백 설정(fieldMargin.right)을 뺄 상태라
   초기화할 상대가 없다. 왼쪽 칸에 주는 규칙 하나만 남긴다. */
#brxe-jqopmy .form-group:nth-child(1),
#brxe-jqopmy .form-group:nth-child(3) {
	padding-right: 30px;
}


/* ==========================================================================
   Works 상세 팝업 — 2026-09-10 수정요청 반영
   지심컴퍼니
   ========================================================================== */

/* 재생 버튼.
   play.svg 가 width/height 100 을 직접 들고 있어
   브릭스의 글꼴 크기 설정으로는 줄어들지 않는다. */
.brxe-pvideo .bricks-video-overlay-icon {
	width: 68px;
	height: 68px;
}

/* 바깥 딥드 영역을 누를 때 닫힌다.

   브릭스는 바깥틀(.brx-popup)을 직접 눌렀을 때만 닫는다.
   그런데 .brx-popup-content 가 화면을 가득 채우고 있어
   빈 곳을 눌러도 클릭이 그쪽으로 가 닫히지 않았다.
   가운데 카드만 클릭을 받게 하고 나머지는 통과시킨다. */
.brxe-popup-256 .brx-popup-content {
	pointer-events: none;
}

.brxe-popup-256 .brxe-pwrap {
	pointer-events: auto;
}


/* ==========================================================================
   카드 뷰 아이콘의 배경 흐림 — 2026-09-10
   지심컴퍼니

   예전에는 view.svg 안에 foreignObject 로 backdrop-filter 가 들어 있었다.
   그 아이콘은 평소 opacity: 0 이라 브라우저가 흐림 레이어를 만들어 두지 않는다.
   그래서 호버하는 순간 어두운 원이 먼저 보이고 흐림이 뒤달아 들어왔다.

   svg 안의 흐림을 빼고 여기서 CSS 로 건다. 흐림 반경 0 으로 시작하면
   레이어가 처음부터 있어서 원과 흐림이 함께 올라온다. */

.works-card .card-view {
	border-radius: 50%;
	-webkit-backdrop-filter: blur(0);
	backdrop-filter: blur(0);
	transition:
		opacity   .38s cubic-bezier(.22, 1, .36, 1),
		transform .38s cubic-bezier(.22, 1, .36, 1),
		-webkit-backdrop-filter .38s cubic-bezier(.22, 1, .36, 1),
		backdrop-filter .38s cubic-bezier(.22, 1, .36, 1);
}

.works-card:hover .card-view {
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

@media (prefers-reduced-motion: reduce) {

	.works-card .card-view {
		transition: none;
	}
}


/* ==========================================================================
   Insight 상단 큰 카드 — 그리드 카드와 같은 딥드 + 뷰
   지심컴퍼니 · 2026-09-10

   그리드 카드는 썸네일이 배경이미지 div 라 flex 로 가운데 정렬하면 된다.
   상단 카드는 진짜 <img> 가 들어 있어 flex 로 바꾸면 이미지 배치가 틀어진다.
   그래서 아이콘만 절대위치로 올린다.

   자리를 translate 로 잡는 이유
   공통 호버 규칙이 transform: scale() 을 쓰고 있어
   transform 으로 가운데 정렬을 하면 둘이 서로 덮어버린다. */

/* 루프 안 요소는 id 가 아니라 class 로 렌더된다.
   그래서 #brxe-아이디 가 아니라 직접 붙인 클래스로 잡는다.
   :has(> img) 로 진짜 이미지가 들어있는 썸네일만 골라,
   배경이미지를 쓰는 그리드 카드는 건드리지 않는다. */
.card-thumb:has(> img) {
	position: relative;
	line-height: 0;
}

.card-thumb:has(> img) > .card-view {
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	z-index: 2;
}




/* ==========================================================================
   Insight 상세 — 공유 · 목록 버튼 (좌측 하단 고정)
   지심컴퍼니 · 2026-09-10

   흰 영역(#brxe-ovorcx)은 좌우 마진이 8% 다.
   그 안쪽 50px 에 놓이려면 화면 왼쪽에서 8% + 50px 이 된다. */

.ins-fab {
	position: fixed;
	left: calc(8% + 50px);
	bottom: 50px;
	z-index: 90;
}

.ins-fab .brxe-icon {
	display: grid;
	place-items: center;
	transition: transform .3s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
}

@media (hover: hover) {

	.ins-fab .brxe-icon:hover {
		transform: translateY(-3px);
	}
}

/* 좌측 여백이 좁은 화면에서는 글을 가리지 않게 바짝 붙인다. */
@media (max-width: 991px) {

	.ins-fab {
		left: 20px;
		bottom: 20px;
	}

	.ins-fab .brxe-icon {
		padding: 12px;
	}
}

/* 주소를 복사했을 때 알려주는 말풍선. */
.ins-fab-toast {
	position: fixed;
	left: 50%;
	bottom: 40px;
	translate: -50% 0;
	z-index: 100001;
	padding: 12px 22px;
	border-radius: 999px;
	background-color: var(--gray-black, #000000);
	color: var(--gray-white, #FFFFFF);
	font-size: 15px;
	opacity: 0;
	transition: opacity .25s ease;
	pointer-events: none;
}

.ins-fab-toast.is-on {
	opacity: 1;
}


/* 진입 화면에서는 푸터를 보이지 않는다.  2026-09-10

   헤더와 같은 신호를 쓴다. main-intro.js 가 모션이 끝나는 순간
   body 에 intro-done 을 붙인다.

   예전에는 visibility 로 감췄는데 자리가 남아 큰 흰 공백이 보였다.
   그렇다고 지우면 교착이 생겼다. 신호가 트랙을 완전히 지나야 켜지는
   조건이라, 푸터가 없으면 그만큼 스크롤할 여지가 없어 신호가 영영
   안 떨어지고 헤더까지 같이 안 돌아왔다.

   신호를 모션이 끝나는 순간으로 앞당겨 그 문제가 없어졌다.
   트랙 끝까지 내리면 조건이 딱 맞아떨어지고, 그때 푸터가 생기면서
   페이지가 길어져 그대로 이어서 스크롤된다. */

body:has(.main-intro):not(.intro-done) #brx-footer {
	display: none;
}


/* ==========================================================================
   u-vid-whole  —  배경 영상을 잘라내지 않고 통째로 보여 준다
   지심컴퍼니 · 2026-09-10

   브릭스 배경 영상은 항상 cover 다. 영상 비율과 상자 비율이 다르면
   넘치는 쪽을 잘라 낸다. 이 배너는 영상이 32:9 로 아주 넓고
   상자는 휴대폰에서 세로로 길어져, 좌우가 크게 잘렸다.

   width/height 를 100% 로 덮고 object-fit: contain 을 준다.
   브릭스가 자바스크립트로 넣는 크기를 덮어써야 해서 !important 가 필요하다.
   (작성자 !important 는 style 속성보다 우선한다)

   남는 위아래 자리는 배너 배경색이 그대로 보인다. 검정 배너라 티가 안 난다. */

/* 2026-09-15 — contain 에서 비율 맞춤으로 바꿈.

   contain 은 영상을 다 보여 주지만 상자 비율이 다르면 검정 띄가 남는다.
   상자 자체를 영상 비율로 만들면 띄도 잘림도 없고,
   화면이 넓어지면 가로·세로가 비율을 유지한 채 함께 커진다.

   --vid-ratio 는 각 배너의 커스텀 CSS 칸에서 지정한다. */
.u-vid-whole {
	aspect-ratio: var(--vid-ratio, 16 / 9);
	min-height: 0;
}

.u-vid-whole .bricks-background-video-wrapper video {
	width: 100% !important;
	height: 100% !important;
	transform: translate(-50%, -50%) !important;
	object-fit: cover;
}


/* ==========================================================================
   u-btn-invert  —  검정 버튼: 호버하면 흰색으로 뒤집힌다
   지심컴퍼니 · 2026-09-10

   배경 흰색 · 테두리 검정 1px · 글자와 아이콘 검정.

   브릭스 설정으로는 아이콘 색이 안 바뀌었다. 이유가 둘이다.
     1) 브릭스가 만든 규칙은 svg:hover 였다.
        버튼이 아니라 아이콘 위에 마우스가 있을 때만 바뀌는 선택자다.
     2) download.svg 의 path 에 fill="white" 가 박혀 있다.
        svg 에 색을 줘도 path 가 가진 값이 이긴다. path 를 직접 짚어야 한다.

   평소에도 투명 테두리 1px 을 둘러 둔다.
   호버할 때만 테두리를 두면 버튼이 2px 커져 칸칸 흔들린다.
   ========================================================================== */


.u-btn-invert {
	border: 1px solid transparent;
	transition:
		background-color .35s cubic-bezier(.22, 1, .36, 1),
		border-color     .35s cubic-bezier(.22, 1, .36, 1),
		color            .35s cubic-bezier(.22, 1, .36, 1);
}

.u-btn-invert svg,
.u-btn-invert svg path {
	transition: fill .35s cubic-bezier(.22, 1, .36, 1);
}

/* !important 가 붙은 이유
   브릭스는 요소 설정을 #brxe-아이디 로 내보낸다. 아이디는 클래스보다 강해서
   클래스 하나로 만든 유틸리티로는 기본 상태를 덮을 수 없다.
   이 유틸리티는 "호버 상태는 여기서 정한다" 는 목적이므로 명시적으로 이긴다. */
.u-btn-invert:hover {
	background-color: var(--gray-white, #FFFFFF) !important;
	border-color: var(--gray-black, #000000) !important;
	color: var(--gray-black, #000000) !important;
}

.u-btn-invert:hover svg,
.u-btn-invert:hover svg path {
	fill: var(--gray-black, #000000);
}

@media (prefers-reduced-motion: reduce) {

	.u-btn-invert,
	.u-btn-invert svg,
	.u-btn-invert svg path {
		transition: none;
	}
}


/* ==========================================================================
   푸터 — 아이콘과 글자 세로 가운데 정렬
   지심컴퍼니 · 2026-09-15

   묶음에 align-items: center 를 줘도 아이콘이 아래로 처져 보였다.
   링크를 걸면 브릭스가 .bricks-link-wrapper 로 감싸는데 이게 인라인이라,
   안의 svg 가 글자 밑선에 얹혀 밑으로 내려앉는다.
   래퍼를 flex 로 바꿔 밑선 영향을 없앤다. */

#brx-footer .bricks-link-wrapper {
	display: flex;
	align-items: center;
}

#brx-footer .bricks-link-wrapper > svg {
	display: block;
}


/* ==========================================================================
   u-close-x  —  선 두께를 정확히 정하는 닫기 X
   지심컴퍼니 · 2026-09-15

   예전에는 ✕ 글자를 썼다. 글꼴이 그리는 모양이라 선 두께를 정할 수 없고,
   크기를 키우면 두께도 같이 굵어졌다.
   가상 요소 두 개를 가로로 놓고 서로 반대로 돌려 X 를 만든다.
   그러면 두께는 height, 크기는 width 로 따로 정해진다. */

.u-close-x {
	/* 글자는 숨긴다. 지우면 브릭스가 요소 자체를 렌더하지 않는다. */
	font-size: 0;
	line-height: 0;
	color: transparent;
	--x-size: 32px;
	--x-thick: 1.5px;
	--x-ink: var(--gray-100, #7B7D86);
	display: block;
	width: var(--x-size);
	height: var(--x-size);
	cursor: pointer;
}

.u-close-x::before,
.u-close-x::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: var(--x-thick);
	background-color: var(--x-ink);
	transition: background-color .25s ease;
}

.u-close-x::before { rotate: 45deg; }
.u-close-x::after { rotate: -45deg; }

@media (hover: hover) {

	.u-close-x:hover {
		--x-ink: var(--gray-black, #000000);
	}
}


/* ==========================================================================
   Contact 문의 폼 — 2026-09-15 수정요청 반영
   지심컴퍼니
   ========================================================================== */

/* 입력칸 글자 크기 16 → 18px */
#brxe-jqopmy input,
#brxe-jqopmy textarea,
#brxe-jqopmy select {
	font-size: 18px;
}

#brxe-jqopmy ::placeholder {
	font-size: 18px;
}

/* 라벨과 칸 사이 간격을 칸 종류와 상관없이 똑같게 맞춘다.
   예전에는 label 의 margin-bottom 에 기대었는데,
   input 과 textarea 는 밑선 처리가 달라 상세내용만 좁게 보였다.
   칸 자체의 row-gap 으로 바꾸면 밑선과 무관하게 같아진다. */
#brxe-jqopmy .form-group {
	row-gap: 12px;
}

#brxe-jqopmy .form-group > label {
	margin-bottom: 0 !important;
}

/* 체크박스를 시안 비율에 맞춰 조금 더 키운다. */
#brxe-jqopmy .options-wrapper input[type="checkbox"] {
	width: 22px;
	height: 22px;
}


/* ==========================================================================
   Contact 문의 폼 — 2026-09-16 수정요청 반영
   지심컴퍼니
   ========================================================================== */

/* 상세내용 칸의 윗 여백 — 다른 칸과 눈으로 같아지게 맞춘다.

   상자 사이 간격은 이미 다른 칸과 똑같은 12px 이다. 그런데도 좁아 보인 건
   한 줄 높이가 달라서다.
     한 줄 입력칸 : 글꼴 18px / 줄높이 40px  →  글자 위아래로 8px 씩 남는다
     상세내용    : 글꼴 18px / 줄높이 24px  →  남는 공간이 거의 없다
   눈에 보이는 여백은 상자가 아니라 글자를 기준으로 재므로 8px 차이가 난다.
   그만큼 위 여백에 더해 준다. */
#brxe-jqopmy .form-group textarea {
	padding-top: 18px;   /* 기본 10px + 줄높이 차이 8px */
}

/* 개인정보 동의 체크박스 — 시안의 검정 네모로 바꾼다.

   브라우저가 그려 주는 기본 체크박스는 색(accent-color) 말고는
   크기도 모서리도 체크 표시의 굵기와 안쪽 여백도 손댈 수 없다.
   그래서 appearance: none 으로 기본 그림을 끄고 직접 그린다.
   체크 표시는 가상 요소의 두 변(왼쪽·아래)만 남겨 45도 돌린 것이다. */
#brxe-jqopmy .options-wrapper input[type="checkbox"],
#brxe-nlform .options-wrapper input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	padding: 0;          /* 입력칸 공통 여백 10px 20px 이 올라와 가로가 42px 로 벌어졌다 */
	width: 24px;
	height: 24px;
	border: 1px solid var(--gray-20, #E4E4EB);
	border-radius: 4px;
	background-color: var(--gray-white, #FFFFFF);
	display: inline-grid;
	place-content: center;
	transition: background-color .2s ease, border-color .2s ease;
}

/* 체크 표시. 24px 상자 안에서 사방으로 여유가 남아 답답하지 않다. */
#brxe-jqopmy .options-wrapper input[type="checkbox"]::before,
#brxe-nlform .options-wrapper input[type="checkbox"]::before {
	content: "";
	width: 11px;
	height: 6px;
	border-left: 2px solid var(--gray-white, #FFFFFF);
	border-bottom: 2px solid var(--gray-white, #FFFFFF);
	rotate: -45deg;
	translate: 0 -1px;
	opacity: 0;
	transition: opacity .15s ease;
}

#brxe-jqopmy .options-wrapper input[type="checkbox"]:checked,
#brxe-nlform .options-wrapper input[type="checkbox"]:checked {
	background-color: var(--gray-black, #000000);
	border-color: var(--gray-black, #000000);
}

#brxe-jqopmy .options-wrapper input[type="checkbox"]:checked::before,
#brxe-nlform .options-wrapper input[type="checkbox"]:checked::before {
	opacity: 1;
}

/* 기본 그림을 끄면 키보드 초점 테두리도 같이 사라진다. 다시 그려 준다. */
#brxe-jqopmy .options-wrapper input[type="checkbox"]:focus-visible,
#brxe-nlform .options-wrapper input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--purple-100, #6E3A88);
	outline-offset: 2px;
}


/* 회사소개서 다운로드 버튼 — 호버하면 아이콘도 검정으로  2026-09-17

   버튼의 배경·글자·테두리는 브릭스 설정에서 뒤집힌다.
   그런데 아이콘은 SVG 의 path 에 fill="white" 가 속성으로 박혀 있어
   흰 바탕으로 바뀜 뒤에도 흰색으로 남아 보이지 않았다.
   속성보다 CSS 가 우선이므로 여기서 덮는다.

   path 만 골라야 한다. 같은 SVG 안의 <rect> 는 마스크라
   색을 건드리면 아이콘이 통째로 사라진다. */
#brxe-udpfmq svg path {
	transition: fill .35s cubic-bezier(.22, 1, .36, 1);
}

#brxe-udpfmq:hover svg path {
	fill: var(--gray-black, #000000);
}


/* 필터 탭 — 클릭하면 파란 네모가 남는 문제  2026-09-21

   라디오 입력이 화면에서 감춰져 있어(brx-a11y-hidden, 0x0),
   크롬은 그 입력의 포커스 테두리를 안에 보이는 글자 상자(.brx-option-text)에 대신 그린다.
   키보드로 온 것이 아니어도 남기 때문에
   다른 곳을 누를 때까지 파란 네모가 계속 보였다.

   밑줄과 글자색으로 이미 선택이 드러나므로 이 테두리는 끊는다.
   아래 주석에 대체 표시를 두지 않은 이유를 적어 둔다. */
/* 페이지마다 아이디가 달라 아이디 대신 클래스로 잡는다.
   인사이트 qliksq / 웍스 hknbyi / 검색결과 btdhqe /
   인사이트 상세 qiblcc 등 같은 탭이 여러 곳에 있다. */
.brxe-filter-radio label,
.brxe-filter-radio input,
.brxe-filter-radio .brx-option-text,
.brxe-filter-checkbox label,
.brxe-filter-checkbox input,
.brxe-filter-checkbox .brx-option-text {
	outline: none;
}

/* 대체 표시를 따로 두지 않는다.

   라디오 묶음은 키보드로 들어오면 이미 선택된 항목에 초점이 잡히고,
   화살표로 움직이면 선택과 초점이 항상 같이 움직인다.
   즉 초점은 늘 검정 글자 + 검정 밑줄인 항목 위에 있다.
   활성 표시 자체가 초점 표시 역할을 하므로 테두리를 더하면 중복이다.

   참고 — 크롬은 라디오를 마우스로 눌러도 :focus-visible 로 친다.
   그래서 :focus-visible 을 써도 클릭 시 테두리가 그대로 남는다. */


/* 카드 섬네일 — 호버 테두리와 이미지 모서리가 어긋나는 문제  2026-09-21

   테두리는 바깥 상자에, 둥근 모서리는 이미지에 따로 걸려 있었다.
   테두리가 1px 라 바깥 상자의 안쪽 곡선은 반지름 19px 인데
   이미지는 20px 이라 모서리에서 이미지가 더 많이 깎인다.
   그 차이만큼 네 모서리에 바탕색이 실처럼 비쳤다.

   이미지의 모서리 값은 브릭스 설정에서 지우고,
   여기서 바깥 상자가 잘라 내게 한다.
   overflow 로 자르면 테두리 안쪽 곡선을 그대로 따라가므로
   나중에 테두리 굵기를 바꿔도 다시 어긋나지 않는다. */
.card-thumb {
	overflow: hidden;
}

/* 카드 섬네일 — 호버 전에도 한쪽 가장자리에 실선이 보이는 문제  2026-10-08

   섬네일은 배경 이미지인데 브릭스 설정이 background-repeat: repeat 이고
   호버용 1px 투명 테두리가 둘러져 있다.
   배경은 기본적으로 테두리 안쪽(padding-box)을 기준으로 깔리고
   테두리 아래까지 칠해지므로, 반복된 이미지의 반대쪽 끝 1px 이
   테두리 자리에 비쳐 선처럼 보였다. 이미지 왼쪽 끝이 어두운 섬네일에서만 두드러진다.

   기준을 테두리 바깥(border-box)으로 옮기면 이미지 한 장이 테두리까지 덮고,
   반복도 끈다. 호버 시 검정 테두리는 그대로 이미지 위에 그려진다. */
body .card-thumb.brxe-div {
	background-origin: border-box;
	background-repeat: no-repeat;
}

/* Insight 목록 — 마지막 줄 아래 빈 공간  2026-10-08

   그리드가 1fr 네 줄로 고정되어 있는데 한 페이지에 9개(세 줄)만 나와
   빈 넷째 줄(563px + 간격 30px)이 페이지 번호 위에 그대로 남았다.
   필터로 결과가 적을 때는 빈 줄이 더 늘어난다.
   줄 수를 내용에 맡기면 있는 만큼만 줄이 생긴다. 카드 사이 간격은 그대로다. */
body #brxe-435ea9.brx-grid {
	grid-template-rows: none;
}

/* Works 상단 — 다른 페이지(Insight)와 같은 간격으로  2026-10-08 수정요청

   Works 는 흰 필터 상자(scvyki, 위 모서리 20px)가 보라 히어로 아래쪽에
   60~80px 겹쳐 올라가 있었고, 탭 바로 밑에서 카드가 시작했다.
   Insight 는 보라가 끝난 뒤 띄우고 탭을 놓은 다음, 그리드 위 여백 6% 를 두고 카드가 온다.

   보라 아래 → 탭 간격을 Insight 실측값에 맞춘다.
     데스크톱 100  ·  ~991px 82  ·  ~478px 121
   margin-top = (보라 높이 − 위 여백 상자 ae105f 의 padding-top) + 위 간격
     데스크톱 (620 − 520) + 100 = 200
     ~991px  (400 − 250) +  82 = 232
     ~478px  (325 − 100) + 121 = 346
   보라 높이와 ae105f 여백은 브릭스에 고정값으로 들어 있다. 그쪽을 바꾸면 여기도 바꿔야 한다. */
body #brxe-scvyki.brxe-div {
	background-color: transparent;
	border-radius: 0;
	min-height: 0;
	margin: 200px 0 0;
}

/* 6% 는 Insight 그리드와 같은 값. 좁은 화면에선 20px 대로 붙어 버려
   기존 모바일 간격(70)을 하한으로 둔다. */
body #brxe-4a1212.brx-grid {
	padding-top: max(6%, 70px);
}

@media (max-width: 991px) {
	body #brxe-scvyki.brxe-div { margin: 232px 0 0; }
}

@media (max-width: 478px) {
	body #brxe-scvyki.brxe-div { margin: 346px 20px 0; }
}


/* 검색창 — 클릭했을 때 틀이 이중으로 보이는 문제  2026-09-21

   브라우저가 초점 표시를 outline: auto 로 그리는데
   offset 이 -2px 라 테두리 안쪽에 선이 하나 더 생긴다.
   연회색 테두리 안에 진한 테두리가 겹쳐 틀이 두 개로 보였다.

   탭과 달리 글을 입력하는 칸이라 초점 표시를 없애면 안 된다.
   지금 어디에 타이핑하는지 알 수 없게 된다.
   선을 더하는 대신 원래 있던 테두리를 검정으로 바꾼다.
   탭과 카드와 같은 방식이라 화면 안에서 따로 놀지 않는다. */
.brxe-filter-search input {
	transition: border-color .25s ease;
}

/* border-color 에 !important 가 붙은 이유

   브릭스는 #brxe-daxsep input 처럼 아이디로 테두리를 내보낸다.
   아이디가 클래스보다 세서 그냥 써서는 지고,
   검색창은 페이지마다 아이디가 달라(인사이트 daxsep / 검색결과 aplazt)
   아이디로 쓰면 한 곳만 고쳐진다. */
.brxe-filter-search input:focus,
.brxe-filter-search input:focus-visible {
	outline: none;
	border-color: var(--gray-black, #000000) !important;
}


/* 카카오맵 — 컨택 페이지  2026-10-06

   높이는 브릭스 요소 설정에서 준다(600 / 400 / 250).
   지도는 그려지기 전에 틀의 높이가 정해져 있어야 한다. */
.u-kakaomap {
	width: 100%;
}

/* 핀 위에 붙는 상호 표기. */
.u-kakaomap-label {
	padding: 6px 14px;
	border-radius: 99px;
	background-color: var(--gray-black, #000000);
	color: var(--gray-white, #FFFFFF);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -.2px;
	white-space: nowrap;
}


/* 뉴스레터 신청 폼 — 컨택 페이지 하단  2026-10-06

   체크박스 모양은 위의 컨택 폼 규칙을 같이 쓴다.
   여기서는 두 칸짜리 간격과 동의 줄 정렬만 잡는다. */

/* 이메일·이름이 한 줄에 선다. 왼쪽 칸에만 여백을 준다. */
#brxe-nlform .form-group:nth-child(1) {
	padding-right: 20px;
}

/* 동의 줄 — 라벨이 없는 줄이라 밑여백을 줄인다. */
#brxe-nlform .form-group:has(.options-wrapper) {
	padding-bottom: 10px !important;
}

#brxe-nlform .options-wrapper li {
	align-items: center;
	gap: 10px;
}

#brxe-nlform .options-wrapper label {
	margin-bottom: 0 !important;
	cursor: pointer;
	font-size: 15px;
}

/* 버튼은 동의 줄과 간격을 둔다. */
#brxe-nlform .submit-button-wrapper {
	margin-top: 14px;
}

#brxe-nlform .bricks-button {
	padding: 14px 56px;
}