/* ============================================================
   entry.css — 첫 진입 선택 화면(entry.js). 반반: 왼쪽 전시장 / 오른쪽 작품.
   두 면은 흑백, 올린(포커스·누른) 쪽만 컬러로 번진다.
   ============================================================ */
html.entry-open, html.entry-open body { overflow: hidden; }
.entry {
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sans: "Inter Tight", "Pretendard Variable", Pretendard, "Noto Sans JP", system-ui, sans-serif;
  /* 언어 선택기(styles.css .nav-lang-*) 토큰 — 어두운 배경용 */
  --ink: #f4f2ec; --ink-muted: rgba(244, 242, 236, 0.62); --hairline: rgba(244, 242, 236, 0.14); --bg: #0b0b0d;
  position: fixed; inset: 0; z-index: 12500; display: flex; background: #0b0b0d; color: #f4f2ec; font-family: var(--sans);
  /* 페이드인 없이 바로 불투명 — 뒤에서 전시장이 셰이더를 컴파일하느라 메인 스레드가 막히면 페이드가
     몇 초씩 반투명에 멈춰 로딩 화면이 비쳤다(실측) */
}
.entry.is-gone { opacity: 0; pointer-events: none; transition: opacity 0.28s ease-out; }

.entry-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 4; display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 22px clamp(20px, 3vw, 40px); pointer-events: none;
}
.entry-logo { display: block; width: 30px; height: 30px; }
.entry-name { margin: 0; display: flex; align-items: baseline; gap: 10px; font-size: 15px; letter-spacing: -0.01em; }
.entry-name b { font-weight: 600; }
.entry-name span { color: rgba(244, 242, 236, 0.6); }
.entry-lang { position: absolute; right: clamp(20px, 3vw, 40px); top: 50%; transform: translateY(-50%); pointer-events: auto; list-style: none; }
.entry-lang .nav-lang-pill { background: rgba(10, 10, 12, 0.35); backdrop-filter: blur(8px); }

.entry-side {
  appearance: none; border: 0; padding: 0; margin: 0; background: none; color: inherit; font: inherit; text-align: center;
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; cursor: pointer; isolation: isolate;
  display: flex; align-items: flex-end; justify-content: flex-start; padding: clamp(24px, 3vw, 44px);
  transition: flex-grow 0.9s var(--ease);
}
.entry-side:focus-visible { outline: none; }
.entry-media {
  position: absolute; inset: 0; z-index: -2;
  filter: grayscale(1) brightness(0.62) contrast(1.05);
  transition: filter 0.9s var(--ease), transform 1.6s var(--ease);
}
.entry-media--ex { background: #1a1612 url("assets/entry/exhibition.webp") center 42% / cover no-repeat; transform: scale(1.04); }
.entry-media--wk { display: flex; gap: 10px; padding: 0 10px; background: #0e0e11; transform: rotate(-4deg) scale(1.18); }
.entry-col { flex: 1; display: flex; flex-direction: column; gap: 10px; animation: entry-drift var(--d) linear infinite; animation-direction: var(--dir); }
.entry-col span { display: block; aspect-ratio: 16 / 10; border-radius: 6px; background: #1d1d22 center / cover no-repeat; flex: none; }
@keyframes entry-drift { from { transform: translateY(0); } to { transform: translateY(-33.333%); } }
.entry-side--wk { justify-content: flex-end; text-align: right; }
.entry-side::after { /* 글자 받침 — 아래쪽만 어둡게 */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 8, 10, 0) 55%, rgba(8, 8, 10, 0.6) 100%);
}

.entry-title {
  font-weight: 500; font-size: clamp(56px, 6.2vw, 120px); line-height: 0.9; letter-spacing: -0.045em; word-break: keep-all;
  transform-origin: left bottom; transition: transform 0.9s var(--ease);
}
.entry-side--wk .entry-title { transform-origin: right bottom; }

/* 컬러로 — 올린 쪽, 키보드 포커스, 고른 쪽 */
.entry-side:focus-visible .entry-media, .entry.pick-ex .entry-side--ex .entry-media, .entry.pick-wk .entry-side--wk .entry-media { filter: none; }
.entry-side:focus-visible .entry-title { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 2px; }

.entry::before { /* 가운데 가는 세로선 */
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; z-index: 2; background: rgba(255, 255, 255, 0.16); pointer-events: none;
  transition: left 0.9s var(--ease), opacity 0.4s ease;
}

/* 올린 쪽이 컬러로 번지며 살짝 넓어진다(1.25 : 1 — 가운데 선도 따라간다) */
@media (hover: hover) and (pointer: fine) {
  .entry:not(.is-leaving) .entry-side:hover { flex-grow: 1.25; }
  .entry:not(.is-leaving) .entry-side:hover .entry-media { filter: none; }
  .entry:not(.is-leaving) .entry-side--ex:hover .entry-media--ex { transform: scale(1); }
  .entry:not(.is-leaving) .entry-side--wk:hover .entry-media--wk { transform: rotate(-4deg) scale(1.22); }
  .entry:not(.is-leaving) .entry-side:hover .entry-title { transform: scale(1.06); }
  .entry:not(.is-leaving):has(.entry-side--ex:hover)::before { left: 55.556%; }
  .entry:not(.is-leaving):has(.entry-side--wk:hover)::before { left: 44.444%; }
}
/* 누르는 순간 컬러(터치) */
.entry-side:active .entry-media { filter: none; }

/* 고른 쪽이 화면을 채우며 넘어간다 */
.entry.pick-wk .entry-side--wk { flex-grow: 12; } /* 전시장 쪽은 확장 없이 바로 페이드(entry.js enterExhibition) */
.entry.is-leaving::before, .entry.is-leaving .entry-top, .entry.is-leaving .entry-title { opacity: 0; transition: opacity 0.35s ease; }

/* 세로 화면 — 위/아래로 나눈다 */
@media (max-aspect-ratio: 1/1) {
  .entry { flex-direction: column; }
  .entry-top { padding: 16px 20px; }
  .entry-side { padding: 20px; }
  .entry-title { font-size: clamp(44px, 13vw, 72px); }
  .entry::before { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 1px; }
  .entry-media--ex { background-position: center 55%; }
}
@media (prefers-reduced-motion: reduce) {
  .entry-col { animation: none; }
  .entry-side, .entry-media, .entry-title { transition: none; }
}