/* 레이아웃 — 스테이지 · 패널 · 구분선 */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; font-family: 'Noto Sans KR', sans-serif; }

/* 모바일 브라우저의 주소창이 접혔다 펴지면 100%(=큰 뷰포트)로 잡은 높이가
   화면 밖으로 밀려 아래 패널의 버튼이 잘린다 — 실제로 보이는 높이를 쓴다. */
@supports (height: 100dvh) {
  html, body { height: 100dvh; }
  .stage { height: 100dvh; }
}

.stage {
  position: fixed; inset: 0;
  display: flex;
}

.panel {
  position: relative; overflow: hidden; cursor: pointer;
  flex: 1 1 0; min-width: 0;
  transition: flex-grow 0.7s cubic-bezier(0.77,0,0.18,1);
}
@media (hover: hover) and (min-width: 769px) {
  .stage:has(.panel-raw:hover)   .panel-raw   { flex-grow: 1.3; }
  .stage:has(.panel-raw:hover)   .panel-glove { flex-grow: 0.7; }
  .stage:has(.panel-glove:hover) .panel-glove { flex-grow: 1.3; }
  .stage:has(.panel-glove:hover) .panel-raw   { flex-grow: 0.7; }
}

.panel-bg {
  position: absolute; inset: -5%;
  background-size: cover; background-position: center;
  transition: transform 0.9s cubic-bezier(0.25,0.46,0.45,0.94), filter 0.6s ease;
  filter: brightness(.45) saturate(.7);
}
.panel:hover .panel-bg {
  transform: scale(1.06);
  filter: brightness(.28) saturate(.5);
}

.panel-raw .panel-bg {
  background-image: url('/hub/img/hub-raw.jpg');
}
.panel-glove .panel-bg {
  background-image: url('/hub/img/hub-glove.jpg');
}
.panel-raw::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(43,140,60,0) 0%, rgba(43,140,60,.18) 100%);
  opacity: 0; transition: opacity .5s;
}
.panel-glove::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(30,90,180,0) 0%, rgba(30,90,180,.18) 100%);
  opacity: 0; transition: opacity .5s;
}
.panel:hover::after { opacity: 1; }

/* 세로 구분선 */
.divider {
  position: fixed; left: 50%; top: 0; bottom: 0; width: 1px;
  background: rgba(255,255,255,.15); z-index: 10; pointer-events: none;
  transition: left 0.7s cubic-bezier(0.77,0,0.18,1);
}
@media (hover: hover) and (min-width: 769px) {
  body:has(.panel-raw:hover)   .divider { left: 65%; }
  body:has(.panel-glove:hover) .divider { left: 35%; }
}
.divider::before {
  content: 'A1KOR';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 11px; letter-spacing: .5em;
  color: rgba(255,255,255,.35);
  background: #0a0f14;
  padding: 10px 0;
  writing-mode: vertical-rl;
  pointer-events: none;
}