/* ============================================================
   gateway.css — 게이트웨이(브랜드 선택 랜딩) 전용 스타일
   components.css에는 포함하지 않는다(12페이지가 공유하는 컴포넌트가 아니라
   이 한 페이지만의 독자적인 레이아웃 연출이므로 분리 배치).
   tokens.css 변수만 참조. 브레이크포인트는 64rem 하나만 사용(differentiation-brief 2장).
   ============================================================ */

html, body { height: 100%; }
body { background: var(--dark-bg); }

/* 게이트웨이 다크 배경 위에서 --point(잉크색)로는 포커스 링이 거의 안 보이므로
   접근성을 위해 이 페이지 한정으로 밝은 색으로 재정의(override, base.css 수정 아님) */
[data-theme="gateway"] :focus-visible {
  outline-color: var(--dark-text);
}

.gateway-main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.gateway-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
@media (min-width: 64rem) {
  .gateway-stage { flex-direction: row; }
}

/* ---------- 패널 공통 ---------- */
.gateway-panel {
  position: relative;
  isolation: isolate;
  display: flex;
  flex: 1 1 auto;
  min-height: 45vh;
  flex-direction: column;
  align-items: center;
  /* 모바일/태블릿: 무드 사진 위 하단 스크림 존 안에 콘텐츠를 앉힌다(가독성) */
  justify-content: flex-end;
  text-align: center;
  overflow: hidden;
  color: var(--dark-text);
  background: var(--dark-bg);
  padding: var(--sp-7) var(--gutter);
  /* filter/flex-basis 트랜지션은 :hover·:focus-visible 규칙에서만 선언한다
     (resting 상태에 트랜지션을 걸어두면, 풀페이지 스크린샷 캡처 시 브라우저가
     내부적으로 뷰포트를 순간적으로 재조정하면서 64rem 경계를 오가는 부작용이 있어
     캡처 타이밍에 따라 중간 프레임이 찍히는 것을 방지하기 위함) */
}
.gateway-panel--katoori {
  animation: gwPanelInLeft var(--dur-reveal) var(--ease-out) both;
}
.gateway-panel--daebak {
  animation: gwPanelInRight var(--dur-reveal) var(--ease-out) 120ms both;
}
@media (min-width: 64rem) {
  .gateway-panel {
    min-height: 0;
    flex-basis: 50%;
    justify-content: center;
  }
  /* QA #1 fix: 워드마크 블록을 컷아웃 이미지의 반대쪽 가장자리로 고정한다.
     까투리 이미지는 right:6%(중앙 쪽) → 텍스트는 flex-start(바깥쪽, 화면 좌측 가장자리).
     대박 이미지는 left:6%(중앙 쪽) → 텍스트는 flex-end(바깥쪽, 화면 우측 가장자리).
     hover로 패널이 58%까지 확장돼 이미지가 커져도 텍스트 블록은 항상 이미지 반대편에
     머물러 물리적으로 겹칠 수 없다(퍼센트 폭 미세조정에 의존하지 않는 구조적 해결). */
  .gateway-panel--katoori { align-items: flex-start; }
  .gateway-panel--daebak { align-items: flex-end; }
}

/* 아트(컷아웃/무드 사진) */
.gateway-panel__art-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gateway-panel__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, transparent 30%, var(--dark-bg) 78%);
  opacity: 0.9;
}

/* 브랜드 그레인 텍스처 — 평면 검정 탈피(1번). katoori.css의 .bg-texture(cover 단일 사용)와
   동일 원칙: opacity 저농도 + cover 1장, 타일링하지 않는다 */
.gateway-panel__texture {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: center / cover no-repeat;
  opacity: 0.08;
  pointer-events: none;
}
.gateway-panel--katoori .gateway-panel__texture {
  background-image: url("../shared/assets/img/katoori/bg_texture.webp");
}
.gateway-panel--daebak .gateway-panel__texture {
  background-image: url("../shared/assets/img/daebak/bg_texture.webp");
}

/* 비네트 — 패널 가장자리를 은은히 어둡게 눌러 아트/무드 사진에 깊이를 준다.
   dark-bg 토큰만 사용(신규 하드코딩 색 없음), 중심은 완전 투명이라 리빌 레이어를 가리지 않는다 */
.gateway-panel__vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(125% 92% at 50% 45%, transparent 46%, var(--dark-bg) 120%);
  pointer-events: none;
}

@media (min-width: 64rem) {
  .gateway-panel__art-img {
    inset: 0;
    top: 0;
    bottom: 0;
    margin-block: auto;
    width: min(26rem, 42%);
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    transform: scale(1);
    filter: grayscale(1) brightness(0.55) contrast(0.92);
  }
  .gateway-panel--katoori .gateway-panel__art-img { right: 6%; left: auto; }
  .gateway-panel--daebak .gateway-panel__art-img { left: 6%; right: auto; }
  .gateway-panel__scrim { display: none; }
}

/* 컬러 리빌 오버레이(hover/focus 전용) */
.gateway-panel__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  background: radial-gradient(120% 100% at 30% 20%, var(--katoori-point) 0%, transparent 62%);
}
.gateway-panel--daebak .gateway-panel__overlay {
  background: radial-gradient(120% 100% at 30% 20%, var(--daebak-point) 0%, transparent 62%);
}

/* 콘텐츠(워드마크/언더라인/태그라인/CTA) */
.gateway-panel__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 26rem;
}
/* "산업식품" 4글자가 7rem에서 26rem을 살짝 넘쳐 비상 줄바꿈되는 것 방지 */
.gateway-panel--daebak .gateway-panel__content {
  max-width: 30rem;
  /* 무드 사진 배경 위 대비 보강용 안전장치(하드코딩 색 아님 — 다크 토큰 재사용) */
  text-shadow: 0 2px 16px var(--dark-bg);
}
.gateway-panel__word {
  /* 2번: 워드마크 스케일 업(fs-display보다 한 단계 위, 이 페이지 전용 스케일).
     word-break은 전역 keep-all을 이 한 요소만 되돌려, 좁은 화면에서 "대박산업식품"처럼
     긴 워드마크가 밖으로 흘러넘치는 대신 글자 단위로 안전하게 접히도록 한다 */
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 1.6rem + 8vw, 7rem);
  font-weight: var(--fw-bold); /* GmarketSans 최대 700 */
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  /* 음절 단위 자동 줄바꿈 금지 — 접힘 지점은 마크업의 <wbr>(대박|산업식품)로만 지정.
     normal이면 balance가 "대박산/업식품" 같은 어중간한 3/3 분할을 골라버린다 */
  word-break: keep-all;
  text-wrap: balance;
}
.gateway-panel__label {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--dark-text-mute);
}
.gateway-panel__underline {
  display: block;
  width: 3rem;
  height: 2px;
  margin-block: 1rem 0;
  background: var(--sub);
}
.gateway-panel--katoori .gateway-panel__underline { background: var(--katoori-sub); }
.gateway-panel--daebak .gateway-panel__underline { background: var(--daebak-sub); }

.gateway-panel__tagline {
  margin-top: 0.75rem;
  font-size: var(--fs-sm);
  color: var(--dark-text-mute);
}

.gateway-panel__cta {
  margin-top: var(--sp-6);
}
/* 게이트웨이의 --point는 중립(잉크)이므로 CTA만은 각 브랜드 고유색으로 재해석 */
.gateway-panel--katoori .gateway-panel__cta.btn--primary { background: var(--katoori-point); }
.gateway-panel--daebak .gateway-panel__cta.btn--primary { background: var(--daebak-point); }
/* 접근성: 게이트웨이의 --on-point(흰색)가 --daebak-point(#33AC45) 위에서 2.95:1로
   WCAG AA(4.5:1) 미달 — 이 버튼 텍스트만 --ink로 재지정(tokens.css 미변경) */
.gateway-panel--daebak .gateway-panel__cta.btn--primary { color: var(--ink); }

@media (min-width: 64rem) {
  .gateway-panel__underline {
    transform: scaleX(0);
    transform-origin: left;
  }
  .gateway-panel__cta {
    opacity: 0;
    transform: translateY(0.5rem);
  }
}

/* ---------- 3번: 패널 하단 "입장" 어포던스 ----------
   정지 상태에서도 항상 보이는 원형 배지 — 데스크탑 정지 상태 밀도 부족을 직접 해소한다.
   모바일/태블릿은 이미 풀컬러 카드에 화살표 CTA 버튼이 상시 노출되므로(differentiation-brief
   "모바일은 hover 개념 없이 처음부터 CTA 노출" 원칙) 이 배지를 중복 배치하지 않고 desktop 전용으로 둔다.
   패널 자체(<a>)가 이미 hover/focus-visible 대상이므로 이 요소는 장식으로만 두고
   상태 변화는 아래 hover·focus-visible 블록에서 함께 다룬다. */
.gateway-panel__enter { display: none; }
@media (min-width: 64rem) {
  .gateway-panel__enter {
    display: grid;
    position: absolute;
    z-index: 4;
    bottom: var(--sp-6);
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--dark-line);
    background: color-mix(in srgb, var(--dark-bg-soft) 55%, transparent);
    color: var(--dark-text);
    transition:
      background var(--dur-base) var(--ease-out),
      border-color var(--dur-base) var(--ease-out),
      color var(--dur-base) var(--ease-out);
  }
  .gateway-panel__enter svg { width: 1.15rem; height: 1.15rem; }
  .gateway-panel--katoori .gateway-panel__enter { left: var(--gutter); }
  .gateway-panel--daebak .gateway-panel__enter { right: var(--gutter); }
}

/* ---------- hover(데스크탑, 마우스 전용) ---------- */
@media (min-width: 64rem) and (hover: hover) and (pointer: fine) {
  .gateway-panel:hover .gateway-panel__overlay {
    opacity: 0.38;
    transition: opacity var(--dur-slow) var(--ease-out);
  }
  .gateway-panel:hover .gateway-panel__art-img {
    filter: grayscale(0) brightness(1) contrast(1);
    transform: scale(1.03);
    transition: filter var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  }
  .gateway-panel:hover .gateway-panel__underline {
    transform: scaleX(1);
    transition: transform 240ms var(--ease-out);
  }
  .gateway-panel:hover .gateway-panel__cta {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 180ms var(--ease-out) 120ms, transform 180ms var(--ease-out) 120ms;
  }
  .gateway-panel--katoori:hover .gateway-panel__enter {
    background: var(--katoori-point);
    border-color: var(--katoori-point);
    color: var(--on-point);
  }
  .gateway-panel--daebak:hover .gateway-panel__enter {
    background: var(--daebak-point);
    border-color: var(--daebak-point);
    /* 접근성: on-point(흰색)가 daebak-point 위에서 대비 미달 — ink로 보정(5장 CTA와 동일 원칙) */
    color: var(--ink);
  }

  .gateway-stage:has(.gateway-panel--katoori:hover) .gateway-panel--katoori {
    flex-basis: 58%;
    transition: flex-basis var(--dur-base) var(--ease-in-out);
  }
  .gateway-stage:has(.gateway-panel--katoori:hover) .gateway-panel--daebak {
    flex-basis: 42%;
    filter: brightness(0.72);
    transition: flex-basis var(--dur-base) var(--ease-in-out), filter var(--dur-slow) var(--ease-out);
  }
  .gateway-stage:has(.gateway-panel--daebak:hover) .gateway-panel--daebak {
    flex-basis: 58%;
    transition: flex-basis var(--dur-base) var(--ease-in-out);
  }
  .gateway-stage:has(.gateway-panel--daebak:hover) .gateway-panel--katoori {
    flex-basis: 42%;
    filter: brightness(0.72);
    transition: flex-basis var(--dur-base) var(--ease-in-out), filter var(--dur-slow) var(--ease-out);
  }
}

/* ---------- 키보드 포커스(모든 포인터 환경에서 동일하게 동작) ---------- */
@media (min-width: 64rem) {
  .gateway-panel:focus-visible .gateway-panel__overlay {
    opacity: 0.38;
    transition: opacity var(--dur-slow) var(--ease-out);
  }
  .gateway-panel:focus-visible .gateway-panel__art-img {
    filter: grayscale(0) brightness(1) contrast(1);
    transform: scale(1.03);
    transition: filter var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  }
  .gateway-panel:focus-visible .gateway-panel__underline {
    transform: scaleX(1);
    transition: transform 240ms var(--ease-out);
  }
  .gateway-panel:focus-visible .gateway-panel__cta {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 180ms var(--ease-out) 120ms, transform 180ms var(--ease-out) 120ms;
  }
  .gateway-panel--katoori:focus-visible .gateway-panel__enter {
    background: var(--katoori-point);
    border-color: var(--katoori-point);
    color: var(--on-point);
  }
  .gateway-panel--daebak:focus-visible .gateway-panel__enter {
    background: var(--daebak-point);
    border-color: var(--daebak-point);
    color: var(--ink);
  }

  .gateway-stage:has(.gateway-panel--katoori:focus-visible) .gateway-panel--katoori {
    flex-basis: 58%;
    transition: flex-basis var(--dur-base) var(--ease-in-out);
  }
  .gateway-stage:has(.gateway-panel--katoori:focus-visible) .gateway-panel--daebak {
    flex-basis: 42%;
    filter: brightness(0.72);
    transition: flex-basis var(--dur-base) var(--ease-in-out), filter var(--dur-slow) var(--ease-out);
  }
  .gateway-stage:has(.gateway-panel--daebak:focus-visible) .gateway-panel--daebak {
    flex-basis: 58%;
    transition: flex-basis var(--dur-base) var(--ease-in-out);
  }
  .gateway-stage:has(.gateway-panel--daebak:focus-visible) .gateway-panel--katoori {
    flex-basis: 42%;
    filter: brightness(0.72);
    transition: flex-basis var(--dur-base) var(--ease-in-out), filter var(--dur-slow) var(--ease-out);
  }
}

/* ---------- 모바일 탭 피드백 ---------- */
@media (max-width: 63.9375rem) {
  .gateway-panel:active { transform: scale(0.98); transition: transform 100ms var(--ease-out); }
}

/* ---------- 분할선 + 라인아트 배지 ---------- */
.gateway-divider {
  position: relative;
  z-index: 5;
  flex: 0 0 auto;
  width: 100%;
  height: 1px;
  pointer-events: none;
}
@media (min-width: 64rem) {
  .gateway-divider { width: 1px; height: auto; }
}

.gateway-divider__line {
  position: absolute;
  inset: 0;
  background: var(--dark-line);
  transform-origin: center;
  animation: gwDividerInX 500ms var(--ease-out) 700ms both;
}
@media (min-width: 64rem) {
  .gateway-divider__line { animation-name: gwDividerInY; }
}

.gateway-divider .brand-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: gwBadgeIn var(--dur-base) var(--ease-out) 900ms both;
  width: 2.5rem;
  height: 2.5rem;
}
@media (min-width: 64rem) {
  .gateway-divider .brand-mark { width: 3.5rem; height: 3.5rem; }
}

/* ---------- 진입 모션 키프레임 ---------- */
@keyframes gwPanelInLeft {
  from { opacity: 0; transform: translateX(-2rem); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes gwPanelInRight {
  from { opacity: 0; transform: translateX(2rem); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes gwDividerInX {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes gwDividerInY {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes gwBadgeIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ---------- 하단 법적 고지 + 5번: 브랜드 스위치 링크 ---------- */
.gateway-legal {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: var(--sp-4) var(--gutter) var(--sp-3);
  border-top: 1px solid var(--dark-line);
  text-align: center;
  background: var(--dark-bg);
}

.gateway-legal__switch {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
}

.gateway-legal__link {
  color: var(--dark-text-mute);
  transition: color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .gateway-legal__link--katoori:hover { color: var(--katoori-sub); }
  .gateway-legal__link--daebak:hover { color: var(--daebak-sub); }
}
.gateway-legal__link--katoori:focus-visible { color: var(--katoori-sub); }
.gateway-legal__link--daebak:focus-visible { color: var(--daebak-sub); }

.gateway-legal__sep {
  width: 3px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--dark-line);
}

.gateway-legal__copy {
  font-size: var(--fs-xs);
  color: var(--dark-text-mute);
}