/* ============================================================
   ss_pcframe.css — PC/와이드 화면에서 모바일 레이아웃을 중앙 프레임으로
   오리지널(모바일전용) 버전이 PC에서 옆으로 퍼지는 문제 대응.
   실제 모바일(폭<640)은 영향 없음. @media (min-width:640px)에서만 적용.
   프레임 폭 430px(=최신 대화면 폰 폭). 고정바/플로팅요소도 프레임에 정렬.
   ============================================================ */
@media (min-width: 640px) {
  html { background: #14161b !important; }
  body {
    width: 430px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    min-height: 100vh;
    background: #e9edf2;
    box-shadow: 0 0 50px rgba(0,0,0,.7);
    position: relative;
    overflow-x: hidden !important;
  }

  /* 전체폭 고정바(상단헤더/하단네비/토스트) → 프레임 중앙정렬 */
  .new2_top_position,
  #tapbar2,
  #ss-toast-container {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 430px !important;
    max-width: 430px !important;
    right: auto !important;
  }
  /* 하단 네비(가로 슬라이더)는 데스크톱에서 스와이프 불가 → 스크롤 폴백 */
  #tapbar2 { overflow-x: auto !important; }

  /* 뉴스 티커 */
  #ticker {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 406px !important;
    max-width: 406px !important;
    right: auto !important;
  }

  /* 우측 플로팅 아이콘(월드마스터/충전/캐릭터 등) → 프레임 우측 가장자리 */
  .uchatIcon,
  .zoom { left: auto !important; right: calc(50% - 215px + 6px) !important; }
  .top_servername { left: calc(50% - 215px + 6px) !important; right: auto !important; }

  /* 인게임 채팅 위젯 → 프레임 정렬 (미니창은 JS 좌표 유지) */
  #sschat-fab,
  #sschat-wtoast { left: calc(50% - 215px + 14px) !important; }
  #sschat-panel:not(.sschat-mini) {
    left: calc(50% - 215px) !important;
    right: auto !important;
    width: 430px !important;
  }

  /* 폭 속성이 박힌 이미지(스크립트가 창폭 기준으로 키우는 컬렉션 배너 등) 프레임 밖으로 넘침 방지.
     $(window).width()는 프레임과 무관하게 실제 뷰포트폭이라 스크립트가 큰 값으로 리사이즈 → CSS로 캡. */
  img[width], .IMG_CLASS { max-width: 100% !important; height: auto !important; }

  /* 컬렉션 3열 그리드: table-layout:auto라 열마다 폭이 달라 특정 열(컵)만 이미지가 살짝 큼.
     IMG_CLASS를 직접 담은 테이블만 fixed로 열 균등화(:has 자식결합자로 외곽 래퍼테이블 제외). PC 전용이라 :has 지원 OK. */
  table:has(> tbody > tr > td > .IMG_CLASS),
  table:has(> tbody > tr > td > div > .IMG_CLASS) { table-layout: fixed !important; width: 100% !important; }
}