/* PC(≥1024px) 좌측 브랜드 패널 — 지도 앱(index.html)과 동일한 좌측 콘텐츠를
   preregister.html·intro.html에도 공유. 모바일에선 .pc-shell이 display:contents라 무영향.
   색상은 host 페이지 변수에 의존하지 않도록 리터럴로 자립(퍼플 #574acc 등). */
#pc-brand { display: none; }
.pc-shell { display: contents; }

@media (min-width: 1024px) {
  /* 주의: html/body에 overflow-x:hidden 금지 — overflow-y가 auto로 강제돼 body가 스크롤 컨테이너가 되고
     좌측 패널 position:sticky가 깨진다. 가로 오버플로는 .pc-shell 폭 제어로 이미 방지됨. */
  /* 스크롤바 항상 표시 → 스크롤 없는 지도(index)와 이 페이지들의 가운데 정렬 위치 일치(페이지 전환 시 덜그럭 방지) */
  html { overflow-y: scroll; }
  body {
    background:
      radial-gradient(55% 55% at 20% 25%, rgba(87, 74, 204, .08), transparent 70%),
      radial-gradient(50% 50% at 85% 80%, rgba(87, 74, 204, .06), transparent 70%),
      #f4f4f4;
  }
  /* 브랜드 + 페이지 컬럼을 하나의 그룹으로 가운데 정렬(좌우 여백 대칭).
     min-height 강제 없음 → 페이지(본문) 높이만큼 자연 스크롤. align-items:flex-start로 좌측 sticky 동작. */
  .pc-shell {
    position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: center;
    gap: clamp(40px, 4vw, 72px); max-width: 1200px; margin: 0 auto;
    padding: 0 clamp(24px, 3vw, 48px); box-sizing: border-box;
  }
  /* 우측 컬럼 — 소개/신청은 .shell(스크롤), 지도는 #pk-app(고정 100vh). 폭·그림자 공통. */
  .pc-shell > .shell, .pc-shell > #pk-app {
    margin: 0; flex: 0 0 auto; width: clamp(420px, 32vw, 480px); max-width: none;
    box-shadow: 0 0 60px rgba(35, 30, 70, .13);
  }
  .pc-shell > .shell { min-height: 100vh; }
  /* 지도 앱(index)은 고정 높이 100vh 컬럼(페이지 스크롤 없음) */
  .pc-shell > #pk-app { position: relative; inset: auto; height: 100vh; max-height: none; border-radius: 0; }
  /* 좌측 브랜딩 = 고정: 우측 콘텐츠가 스크롤돼도 뷰포트에 붙어 있게(sticky, 뷰포트 높이·수직 중앙) */
  #pc-brand {
    position: sticky; top: 0; align-self: flex-start; height: 100vh;
    display: flex; flex: 0 1 auto; min-width: 0; max-width: 540px; flex-direction: column; justify-content: center;
  }
  .pc-brand-inner { display: flex; flex-direction: column; align-items: flex-start; width: 100%; max-width: 500px; margin: 0; }
  .pc-slogan { margin: 0; font-size: clamp(34px, 4vw, 54px); font-weight: 800; line-height: 1.2; letter-spacing: -1px; color: #191919; }
  .pc-slogan b { color: #574acc; font-weight: 800; }
  .pc-lead { margin: 22px 0 0; font-size: 16px; line-height: 1.7; letter-spacing: -0.3px; color: #666; max-width: 460px; }
  .pc-lead b { color: #191919; font-weight: 700; }
  .pc-brand-btns { display: flex; flex-direction: column; gap: 11px; margin-top: 40px; width: 100%; max-width: 320px; }
  .pc-bbtn {
    display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; border-radius: 14px;
    border: 1.5px solid #e4e4ec; background: #fff; color: #333; font-family: inherit; font-size: 15px; font-weight: 700;
    cursor: pointer; text-decoration: none; transition: border-color .15s, background .15s, transform .05s;
  }
  .pc-bbtn svg { width: 19px; height: 19px; }
  .pc-bbtn:hover { border-color: #574acc; color: #574acc; }
  .pc-bbtn:active { transform: translateY(1px); }
  .pc-bbtn.primary { background: #574acc; border-color: #574acc; color: #fff; box-shadow: 0 6px 18px rgba(87, 74, 204, .28); }
  .pc-bbtn.primary:hover { background: #4a3eb5; color: #fff; }
  /* 폰트 메트릭 고정 — host 페이지(body)마다 line-height가 달라 콘텐츠 높이가 어긋나면
     수직 중앙정렬이 몇 px 밀린다. line-height를 명시해 네 페이지 동일 렌더 보장. */
  .pc-brand-foot { margin-top: 16px; font-size: 12px; line-height: 1.4; letter-spacing: -0.3px; color: #999; }
  /* intro의 하단 고정 CTA는 PC에선 좌측 패널 버튼으로 대체 → 중복 제거 */
  .sticky-cta { display: none !important; }
}