/* ══════════════════════════════════════════════════════════════
   진입 선택 화면(EntryGate) — 바우하우스 재디자인 (고객 피드백 2026-09-04, 16번)
   src/components/site/EntryGate.tsx 전용. 게이트 CSS 는 이 파일 한 곳에만 둔다
   (svca.css 에 있던 옛 "진입 선택 화면" 블록은 지웠다).

   조형 언어(데사우 바우하우스): 아이보리 바탕 + 원색 3색(빨강·파랑·노랑) + 검정,
   6px 검정 괘선으로 짠 비대칭 격자, 기하 원형 3개(빨간 원·파란 사각·노란 삼각형)가
   두 선택 패널의 가장자리를 살짝 덮는다. 그라데이션·그림자·둥근 모서리(원 제외)는 쓰지 않는다.
   서체: 영문 디스플레이 Righteous(--font-display) · 국문 Noto Sans KR · 영문 본문 Jost(--font-en).

   사이트의 .hero / .hero-pane / .eyebrow / .cta / .city 는 청록 히어로 스타일을 끌고 오므로 재사용하지 않는다.
   계약(E2E·다른 스트림이 의존): 루트 .entry-gate[role=dialog], 학회 패널 .pane-main,
   언어 nav .entry-gate__langs(+ .on), z-index 1100(공지 팝업 1000 위), 인쇄 시 숨김.
   ══════════════════════════════════════════════════════════════ */

/* ── 루트: 전체화면 대화상자 ─────────────────────────────────────
   조형 원형은 프레임 밖으로 튀어나오고 화면 가장자리에서 잘리는 것이 의도다.
   그래서 가로 스크롤은 막고(overflow-x hidden), 낮은 뷰포트에서는 세로만 스크롤한다. */
.entry-gate {
  --eg-rule: 6px;
  --eg-pad: clamp(16px, 3vw, 44px);
  --eg-circle: clamp(150px, 22vw, 300px);
  --eg-tri: clamp(110px, 16vw, 220px);
  --eg-bar-w: clamp(36px, 4.6vw, 60px);
  --eg-bar-h: clamp(120px, 17vw, 230px);
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  padding: var(--eg-pad);
  color: var(--bh-black);
  background: var(--ivory);
  overflow-x: hidden;
  overflow-y: auto;
}

/* 프레임: 비대칭 격자.
   ┌ brand ─────────────── (6px 괘선) ┐
   │ (빈칸)  │ ask(검정 띠)           │
   │ langs   │ panes(검정 6px 틀)     │
   min-height 100% 로 화면을 채워 패널이 남는 높이를 다 먹는다(포스터처럼).
   가운데 정렬은 margin auto — flex align-items:center 는 내용이 넘칠 때 위쪽이 잘린다.
   아래 padding 은 프레임 밑으로 튀어나온 원(40%)·삼각형(35%) 자리 — 없으면 장식 때문에 세로 스크롤이 생긴다. */
.entry-gate__frame {
  position: relative;
  width: min(1360px, 100%);
  min-height: 100%;
  margin: auto;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr; /* 1fr(min auto) — minmax(0,1fr) 는 낮은 화면에서 패널 내용이 틀 밖으로 넘친다 */
  grid-template-areas:
    "brand brand"
    ".     ask"
    "langs panes";
  column-gap: clamp(16px, 2vw, 28px);
  padding-bottom: clamp(72px, 9vw, 124px);
}

/* ── 브랜드 락업 (컴퍼스 + 워드마크) ─────────────────────────────
   두 SVG 모두 검정 잉크로 그려져 있어 필터 없이 그대로 쓴다(헤더는 어두운 테마에서만 반전한다).
   워드마크(원본 832×236)는 컴퍼스 높이의 약 52% 로 맞추면 무게가 맞는다. */
.entry-gate__brand {
  grid-area: brand;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 20px);
  padding-bottom: clamp(14px, 1.8vw, 24px);
  margin-bottom: clamp(18px, 3vh, 34px);
  border-bottom: var(--eg-rule) solid var(--bh-black);
}

.entry-gate__logo {
  width: clamp(56px, 6vw, 84px);
  height: clamp(56px, 6vw, 84px);
  object-fit: contain;
}

.entry-gate__wordmark {
  height: clamp(30px, 3.2vw, 44px);
  width: auto;
  object-fit: contain;
}

/* ── 질문 띠 ("어디로 이동하시겠습니까?") ──────────────────────────
   검정 띠에 아이보리 글자, 앞에 노란 정사각 점. 패널 틀의 윗선에 바로 붙어 계단 실루엣을 만든다. */
.entry-gate__ask {
  grid-area: ask;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px 22px 12px 18px;
  color: var(--ivory);
  background: var(--bh-black);
  font: 800 clamp(15px, 1.3vw, 20px)/1.3 "Noto Sans KR", sans-serif;
  letter-spacing: -0.01em;
  word-break: keep-all;
}

.entry-gate__ask::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  background: var(--bh-yellow);
}

/* ── 두 패널: 검정 6px 틀, 비대칭 분할(학회 1.25 : 저널 1) ────────── */
.entry-gate__panes {
  grid-area: panes;
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  min-height: 44vh;
  border: var(--eg-rule) solid var(--bh-black);
}

.entry-gate__pane {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(20px, 3vh, 40px);
  min-width: 0;
  padding: clamp(18px, 2.2vw, 32px);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background .25s var(--ease);
}

/* 학회 = 파란 블록 + 아이보리 글자(대비 약 7:1), 저널 = 아이보리 블록 + 검정 글자 */
.entry-gate__pane--society {
  color: var(--ivory);
  background: var(--bh-blue);
}

.entry-gate__pane--journal {
  color: var(--bh-black);
  background: var(--ivory-2);
  border-left: var(--eg-rule) solid var(--bh-black);
}

.entry-gate__pane--journal:hover { background: var(--ivory-3); }

.entry-gate__pane:focus-visible,
.entry-gate__langs a:focus-visible {
  outline: 3px solid var(--bh-yellow);
  outline-offset: -3px;
}

.entry-gate__pane:focus:not(:focus-visible) { outline: none; }

/* 큼직한 영문 디스플레이 낱말(SOCIETY / JOURNAL) — 장식이라 aria-hidden.
   Righteous 는 좌측 사이드베어링과 윗 여백이 커서 음수 마진으로 패딩선에 맞춘다. */
.entry-gate__word {
  display: block;
  margin: -0.06em 0 0 -0.03em;
  font: 400 clamp(40px, 5.2vw, 84px)/0.92 var(--font-display);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

/* 글 묶음은 왼쪽 72% 안에만 — 오른쪽은 조형 원형이 덮는 자리다 */
.entry-gate__copy { max-width: 72%; }

.entry-gate__kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font: 700 12px/1 "Noto Sans KR", sans-serif;
  letter-spacing: .14em;
}

.entry-gate__num {
  font: 400 16px/1 var(--font-display);
  letter-spacing: .06em;
}

.entry-gate__label::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  vertical-align: 1px;
  background: var(--bh-yellow);
}

.entry-gate__pane--journal .entry-gate__label::before { background: var(--bh-red); }

.entry-gate__title {
  margin: 0 0 10px;
  /* 2026-09-07: 국문 큰 낱말은 Black Han Sans(--font-ko-poster, bauhaus.css) — 이 파일이 bauhaus.css 뒤에 실려 여기서 정한다 */
  font: 400 clamp(24px, 2.4vw, 36px)/1.18 var(--font-ko-poster, "Noto Sans KR"), sans-serif;
  letter-spacing: -0.01em;
  word-break: keep-all;
}

.entry-gate__title em { font-style: normal; }
.entry-gate__pane--society .entry-gate__title em { color: var(--bh-yellow); } /* 노랑/파랑 4.8:1 */
.entry-gate__pane--journal .entry-gate__title em { color: var(--bh-red); }    /* 빨강/아이보리 4.7:1 */

/* 설명: --font-en(Jost) 이 국문은 Noto Sans KR 로 떨어져 저널 영문명만 Jost 로 나온다 */
.entry-gate__desc {
  margin: 0 0 clamp(14px, 2vh, 22px);
  font: 400 clamp(13px, 1.05vw, 15px)/1.65 var(--font-en);
  word-break: keep-all;
}

/* CTA: 글자 + 정사각 화살표 상자. 호버·포커스에 상자 색을 뒤집고 4px 민다. */
.entry-gate__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: 700 clamp(14px, 1.1vw, 16px)/1 "Noto Sans KR", sans-serif;
  letter-spacing: -0.01em;
  word-break: keep-all;
}

.entry-gate__cta-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  font: 400 20px/1 var(--font-en);
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}

.entry-gate__pane--society .entry-gate__cta-box { color: var(--bh-black); background: var(--bh-yellow); }
.entry-gate__pane--society:hover .entry-gate__cta-box,
.entry-gate__pane--society:focus-visible .entry-gate__cta-box {
  color: var(--bh-yellow);
  background: var(--bh-black);
  transform: translateX(4px);
}

.entry-gate__pane--journal .entry-gate__cta-box { color: var(--bh-yellow); background: var(--bh-black); }
.entry-gate__pane--journal:hover .entry-gate__cta-box,
.entry-gate__pane--journal:focus-visible .entry-gate__cta-box {
  color: var(--bh-black);
  background: var(--bh-yellow);
  transform: translateX(4px);
}

/* ── 기하 조형 3개 ───────────────────────────────────────────────
   패널 격자(.entry-gate__panes) 기준 절대배치, 패널 위(z 3)에 얹히되 클릭은 통과(pointer-events none).
   글이 없는 자리만 덮도록 잡았다: 삼각형 = 학회 패널 아래 오른쪽 부분(글은 왼쪽 72%),
   원 = 저널 패널 오른쪽 아래 모서리, 파란 막대 = 저널 패널 오른쪽 위(질문 띠 옆 빈 자리로 솟는다).
   --eg-shift 는 호버 시 1~2% 표류량(reduce-motion 이면 0). */
.entry-gate__form {
  --eg-shift: 0%;
  position: absolute;
  z-index: 3;
  pointer-events: none;
  transition: transform .7s var(--ease);
}

.entry-gate__form--tri {
  left: 34%;
  bottom: 0;
  width: var(--eg-tri);
  height: var(--eg-tri);
  background: var(--bh-yellow);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transform: translateY(calc(35% - var(--eg-shift)));
}

.entry-gate__form--circle {
  right: 0;
  bottom: 0;
  width: var(--eg-circle);
  height: var(--eg-circle);
  border-radius: 50%;
  background: var(--bh-red);
  transform: translate(calc(40% - var(--eg-shift)), calc(40% - var(--eg-shift)));
}

.entry-gate__form--bar {
  top: 0;
  right: 8%;
  width: var(--eg-bar-w);
  height: var(--eg-bar-h);
  background: var(--bh-blue);
  transform: translateY(-30%);
}

.entry-gate__pane--society:hover ~ .entry-gate__form--tri { --eg-shift: 2%; }
.entry-gate__pane--journal:hover ~ .entry-gate__form--circle { --eg-shift: 2%; }

/* ── 언어 선택: 44px 정사각 타일 4개, 패널 왼쪽 세로 띠 ─────────────
   DOM 은 라벨→타일(읽기 순서)이지만 화면은 타일이 패널 윗선에 맞고 라벨은 그 아래 세로쓰기.
   타일은 2px 테두리를 겹쳐 한 덩어리 블록으로 보이게 한다. */
.entry-gate__langs {
  grid-area: langs;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: start;
}

.entry-gate__langs-label {
  order: 1;
  margin-top: 14px;
  writing-mode: vertical-rl;
  font: 700 11px/1 "Noto Sans KR", sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bh-black);
}

.entry-gate__langs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--bh-black);
  color: var(--bh-black);
  background: var(--ivory);
  font: 400 13px/1 var(--font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .2s var(--ease), color .2s var(--ease);
}

.entry-gate__langs a + a { margin-top: -2px; }
.entry-gate__langs a:hover { color: var(--bh-black); background: var(--bh-yellow); }
.entry-gate__langs a.on,
.entry-gate__langs a.on:hover { color: var(--bh-yellow); background: var(--bh-black); }

/* ── 모바일(≤850): 세로 쌓임. 390×844 에서 가로 스크롤 없이 다 들어가야 한다. ── */
@media (max-width: 850px) {
  .entry-gate {
    --eg-circle: 30vw;
    --eg-tri: 24vw;
    --eg-bar-w: 10vw;
    --eg-bar-h: 30vw;
  }

  .entry-gate__frame {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas: "brand" "ask" "panes" "langs";
    padding-bottom: 0; /* 아래 여백은 언어 나브의 margin-top 이 맡는다 */
  }

  .entry-gate__brand { padding-bottom: 12px; margin-bottom: 16px; }
  .entry-gate__ask { padding: 10px 16px 10px 14px; font-size: 14px; }

  .entry-gate__panes {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr 1fr;
    min-height: 0;
  }

  .entry-gate__pane { min-height: 200px; gap: 16px; padding: 18px 20px 20px; }
  .entry-gate__pane--journal { border-left: 0; border-top: var(--eg-rule) solid var(--bh-black); }
  .entry-gate__word { font-size: clamp(34px, 10vw, 40px); }
  .entry-gate__copy { max-width: 100%; }
  .entry-gate__title { font-size: 24px; }
  .entry-gate__desc { max-width: 78%; font-size: 13px; } /* 오른쪽 아래 빨간 원 자리 */
  .entry-gate__cta-box { width: 36px; height: 36px; font-size: 18px; }

  /* 조형 재배치 — 세로 쌓임에서는 글이 없는 오른쪽 가장자리로.
     삼각형: 학회 패널 오른쪽 위(질문 띠 옆으로 솟음), 막대: 두 패널 경계선에 걸침, 원: 저널 오른쪽 아래 */
  .entry-gate__form--tri {
    left: auto;
    right: 6%;
    top: 0;
    bottom: auto;
    transform: translateY(calc(-35% - var(--eg-shift)));
  }
  .entry-gate__form--bar { top: 50%; transform: translateY(-50%); }
  .entry-gate__form--circle {
    transform: translate(calc(35% - var(--eg-shift)), calc(40% - var(--eg-shift)));
  }

  .entry-gate__langs {
    flex-direction: row;
    align-items: center;
    margin-top: clamp(56px, 14vw, 72px); /* 원이 아래로 튀어나온 만큼(40%) 비운다 */
  }
  .entry-gate__langs-label { order: 0; margin: 0 12px 0 0; writing-mode: horizontal-tb; }
  .entry-gate__langs a + a { margin-top: 0; margin-left: -2px; }
}

/* 낮은 데스크탑 뷰포트(높이 ≤640): 패널이 300px 안팎으로 낮아져 원이 글을 덮으므로 조형을 줄인다.
   아래 padding 도 원 돌출량(40%)에 맞춰 줄인다. */
@media (min-width: 851px) and (max-height: 640px) {
  .entry-gate {
    --eg-circle: clamp(120px, 16vw, 200px);
    --eg-tri: clamp(90px, 12vw, 160px);
    --eg-bar-h: clamp(90px, 12vw, 160px);
  }
  .entry-gate__frame { padding-bottom: clamp(40px, 5vw, 64px); }
  .entry-gate__panes { min-height: 38vh; }
  .entry-gate__brand { margin-bottom: 14px; padding-bottom: 12px; }
}

/* 움직임 줄이기: 표류·전환 전부 끈다 */
@media (prefers-reduced-motion: reduce) {
  .entry-gate__pane,
  .entry-gate__form,
  .entry-gate__cta-box,
  .entry-gate__langs a { transition: none; }
  .entry-gate__pane:hover ~ .entry-gate__form { --eg-shift: 0%; }
  .entry-gate__pane:hover .entry-gate__cta-box,
  .entry-gate__pane:focus-visible .entry-gate__cta-box { transform: none; }
}

@media print { .entry-gate { display: none; } }