@charset "utf-8";
/* 대메뉴 — 마우스를 올리면 우리말 이름으로 바뀐다
   ============================================================================
   ※ 다른 분이 손대는 파일(style.css · renewal-fix.css)과 섞이지 않게 따로 두었다.
     나중에 합칠 때 이 파일만 들어내면 된다.

   · 영문 글자는 제자리에 그대로 두고, 우리말을 그 위에 **겹쳐** 띄운다.
     → 메뉴 칸의 폭이 변하지 않으므로 옆 메뉴가 밀리지 않는다(자리 1px 그대로).
   · 밑줄도 글자를 따라간다. 영문 밑줄은 접고 우리말 밑줄이 가운데에서 퍼진다.
   · Work 는 올려도 아래 서브메뉴(메가메뉴)가 내려오지 않는다.                */

/* ---------- 영문 · 우리말 두 겹 ---------- */
.gnb__list > li > a > .gnb__en {
	display: block;
	transition: opacity .22s ease, transform .22s ease;
}

.gnb__list > li > a > .gnb__ko {
	position: absolute;
	left: 50%;
	top: 4px;                       /* a 의 위쪽 안여백(4px)과 같은 줄에 앉힌다 */
	transform: translate(-50%, 3px);
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .22s ease, transform .22s ease;
}

.gnb__list > li > a:hover > .gnb__en,
.gnb__list > li > a:focus-visible > .gnb__en {
	opacity: 0;
	transform: translateY(-3px);
}
.gnb__list > li > a:hover > .gnb__ko,
.gnb__list > li > a:focus-visible > .gnb__ko {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* ---------- 밑줄도 보이는 글자를 따라간다 ----------
   본래 밑줄(a::after)은 영문 폭이라 우리말보다 짧다.
   그래서 올렸을 때는 그걸 접고, 우리말 밑에 같은 모양의 밑줄을 새로 편다. */
.gnb__list > li > a > .gnb__ko::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -4px;                   /* a 의 아래쪽 안여백(4px)만큼 내려 본래 밑줄 자리에 */
	width: 0;
	height: 2px;
	background: var(--c-blue);
	transform: translateX(-50%);
	transition: width .25s ease;
}
.gnb__list > li > a:hover > .gnb__ko::after,
.gnb__list > li > a:focus-visible > .gnb__ko::after { width: 100%; }

/* 올린 동안에는 영문 밑줄을 접는다 — 지금 보고 있는 메뉴(is-current)도 같다 */
.gnb__list > li > a:hover::after,
.gnb__list > li > a:focus-visible::after,
.gnb__list > li > a.is-current:hover::after,
.gnb__list > li > a.is-current:focus-visible::after { width: 0; }

/* 어두운 헤더에서는 밑줄도 흰색 */
.site-header--dark .gnb__list > li > a > .gnb__ko::after { background: var(--c-white); }

/* Work 도 다른 메뉴처럼 서브메뉴를 내린다.
   예전에는 Work 칸 위일 때 판을 통째로 닫았는데, 이제 「포트폴리오」 한 줄을 보여 준다. */

/* Work 열도 보여 준다.
   ※ mega.php 에서 열을 아예 빼면 안 된다 —
     site-fx.js 가 메뉴 항목과 열을 차례대로 짝지어 자리를 잡기 때문에
     (items[i] ↔ cols[i], 개수가 다르면 통째로 포기) 나머지 다섯 열의 자리가 어긋난다. */

/* ---------- 움직임을 줄여 달라고 한 분에게는 ---------- */
@media (prefers-reduced-motion: reduce) {
	.gnb__list > li > a > .gnb__en,
	.gnb__list > li > a > .gnb__ko,
	.gnb__list > li > a > .gnb__ko::after { transition: none; }
	.gnb__list > li > a:hover > .gnb__en { transform: none; }
	.gnb__list > li > a > .gnb__ko { transform: translateX(-50%); }
}

/* ---------- 좁은 화면 ----------
   1024px 아래는 대메뉴 대신 햄버거 메뉴를 쓰므로 여기 규칙은 쓰이지 않는다.
   그 위 구간은 메뉴 사이 틈이 줄어드니(80 → 58 → 42px) 우리말이 옆 칸에
   닿지 않도록 글자를 조금 줄인다. */
@media (max-width: 1700px) { .gnb__list > li > a > .gnb__ko { font-size: .94em; } }
@media (max-width: 1560px) { .gnb__list > li > a > .gnb__ko { font-size: .88em; } }