/* ===================================================================
   노원 JUMP — 예매(사전 오픈) 페이지 전용
   tokens.css / base.css / components.css 뒤에 로드
   좌측 브랜드 패널은 화면에 고정(sticky), 우측은 긴 상세 이미지가 들어가 페이지가 스크롤된다.
   =================================================================== */

body{ background:var(--dark); }

.acc{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); min-height:calc(100vh - 78px); }

/* 좌측 브랜드 패널 (다크) */
.acc__brand{
  position:relative; overflow:hidden; background:var(--dark); color:#fff;
  padding:72px 64px; display:flex; flex-direction:column;
}
.acc__brand-grid{ position:absolute; inset:0; pointer-events:none; opacity:.5; }
.acc__brand-grid::before,.acc__brand-grid::after{
  content:""; position:absolute; background:rgba(255,255,255,.06);
}
.acc__brand-grid::before{ left:8%; top:0; bottom:0; width:1px; }
.acc__brand-grid::after{ left:0; right:0; top:34%; height:1px; }
.acc__brand-diag{
  position:absolute; right:-160px; top:-160px; width:620px; height:620px;
  background:
    repeating-linear-gradient(135deg, transparent 0 22px, rgba(233,34,133,.10) 22px 23px);
  pointer-events:none;
}
.acc__brand-top{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; }
.acc__brand-mid{ position:relative; z-index:2; margin-top:auto; padding-top:60px; }
.acc__brand-eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.7); display:inline-flex; align-items:center; gap:12px;
}
.acc__brand-eyebrow::before{ content:""; width:28px; height:1px; background:rgba(255,255,255,.5); }
.acc__brand-en{
  margin-top:20px; font-family:var(--disp); font-weight:400;
  font-size:clamp(54px,6vw,104px); line-height:.86; letter-spacing:-.04em; color:#fff;
}
.acc__brand-en .pk{ color:var(--pink); }
.acc__brand-lead{ margin-top:26px; max-width:380px; color:rgba(255,255,255,.78); font-size:16px; line-height:1.75; }

/* 좌측: 뷰포트에 고정 */
.acc--po .acc__brand{
  position:sticky; top:78px; align-self:start;
  height:calc(100vh - 78px);
  overflow:hidden;
}

/* 우측: 긴 상세 이미지
   display:block + min-width:0 — flex 아이템의 min-width:auto로 이미지가
   원본 너비 밑으로 안 줄어 모바일에서 가로 오버플로우 나던 문제 방지 */
.po__media{ background:var(--dark); display:block; min-width:0; }
.po__img{ display:block; width:100%; height:auto; }
.po__reserve{ display:inline-block; margin-top:36px; }
.po__reserve img{ display:block; width:auto; max-width:100%; height:auto; }

/* 상단(미스크롤) 헤더 유틸 링크를 밝은 우측 대비로 흰색 유지 */
.njhdr:not(.is-scrolled) .njhdr__util-links a{ color:#fff; }

@media (max-width:900px){
  .acc{ grid-template-columns:1fr; min-height:0; }
  .acc__brand{ padding:48px 32px 40px; }
  .acc__brand-mid{ padding-top:36px; }
  /* 모바일: 1단 스택 — 좌측 고정 해제, 이미지 아래로.
     position:relative 유지(static로 두면 .acc__brand-diag 장식이 컨테이닝 블록을
     잃고 뷰포트 오른쪽으로 삐져나가 가로 오버플로우 발생) */
  .acc--po .acc__brand{ position:relative; height:auto; top:0; }
}
@media (max-width:560px){
  .acc__brand-en{ font-size:46px; }
}