/* =====================================================
   POKER-TOUR  -  레이어 팝업 (모달)
   Sign up / Login / Poker Lobby 를 화면 위 레이어로 띄운다.
   크기는 PC·모바일 모두 가로 95%, 세로 85%.
   모든 페이지에서 쓰이므로 style.css 와 별도 파일로 둔다.
   ===================================================== */

/* HTML 의 hidden 속성은 브라우저 기본 스타일(display:none)로 동작하는데,
   클래스에 display 를 지정하면 그쪽이 이겨서 요소가 보여 버린다.
   (예: .pt-field-row{display:grid} 가 <div hidden> 을 무력화)
   hidden 은 항상 숨김이 되도록 못 박는다. */
[hidden] {
   display: none !important;
}

.pt-modal {
   --pt-modal-w: 95vw;

   /* 상단 네비(.hero-nav)는 position:fixed 에 --z-nav:200 이라 이 팝업(120)
      보다 위에 그려진다. 그래서 팝업을 네비 높이만큼 아래에서 시작시킨다.
      안 그러면 [X CLOSE] 버튼이 네비에 잘린다. (2026-08-25 확인)
        데스크톱 --hero-nav-height        6rem    (=96px, 상단 25px 룰 포함)
        모바일   --hero-mobile-nav-height 4.75rem (=76px)
      style.css 에서 네비 높이를 바꾸면 아래 fallback 값도 같이 맞춘다. */
   --pt-nav-gap: calc(var(--hero-nav-height, 6rem) + 12px);

   /* 모바일 하단 액션바(4.4rem + safe-area)에 가리지 않게 남기는 여백.
      데스크톱에는 액션바가 없어서 0 이다. */
   --pt-bottom-gap: 0px;

   /* [X] 버튼(약 40px)과 위아래 여백, 그리고 위 두 여백까지 빼고 남는 높이 */
   --pt-modal-h: min(
      85vh,
      calc(100vh - var(--pt-nav-gap) - var(--pt-bottom-gap) - 64px)
   );

   position: fixed;
   inset: 0;
   z-index: 120; /* .menu(z-index 20) 와 nav 보다 위 */
   display: flex;
   align-items: center;
   justify-content: center;

   /* 이 여백 덕분에 가운데 정렬 기준이 네비 아래로 내려간다 */
   padding-block-start: var(--pt-nav-gap);
   padding-block-end: var(--pt-bottom-gap);
}

.pt-modal[hidden] {
   display: none;
}

/* 주소창이 접혔다 펴지는 모바일에서는 dvh 가 더 정확하다 */
@supports (height: 85dvh) {
   .pt-modal {
      --pt-modal-h: min(
         85dvh,
         calc(100dvh - var(--pt-nav-gap) - var(--pt-bottom-gap) - 64px)
      );
   }
}

/* 모바일 : 네비가 낮아지고, 대신 하단 액션바가 생긴다 */
@media (max-width: 64rem) {
   .pt-modal {
      --pt-nav-gap: calc(var(--hero-mobile-nav-height, 4.75rem) + 10px);
      --pt-bottom-gap: calc(4.4rem + env(safe-area-inset-bottom, 0px) + 10px);
   }
}

.pt-modal__backdrop {
   position: absolute;
   inset: 0;
   background: rgba(12, 9, 10, 0.72);
   -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px);
   opacity: 0;
   transition: opacity 0.28s ease;
}

/* [X] 버튼 + 패널을 세로로 쌓는 무대.
   버튼이 패널 바깥(위쪽)에 있어야 팝업 안 콘텐츠를 가리지 않는다. */
.pt-modal__stage {
   position: relative;
   z-index: 1;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: 10px;
   width: var(--pt-modal-w);
   max-width: 95vw;
}

.pt-modal__panel {
   position: relative;
   width: 100%;
   height: var(--pt-modal-h);
   border-radius: 20px;
   background: #f7f6f5;
   box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45);
   overflow: hidden;
   opacity: 0;
   transform: translateY(18px) scale(0.985);
   transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 열림 상태 (JS 가 클래스를 붙인다) */
.pt-modal.is-open .pt-modal__backdrop {
   opacity: 1;
}

.pt-modal.is-open .pt-modal__panel,
.pt-modal.is-open .pt-modal__close {
   opacity: 1;
   transform: translateY(0) scale(1);
}

.pt-modal__frame {
   display: block;
   width: 100%;
   height: 100%;
   border: 0;
   background: transparent;
}

/* ---------- 닫기 버튼 (패널 바깥, 우측 상단) ---------- */

.pt-modal__close {
   flex: none;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   height: 40px;
   padding: 0 16px 0 13px;
   border: 1px solid rgba(255, 255, 255, 0.28);
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.1);
   -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px);
   color: #fff;
   font-family: "Inter", system-ui, sans-serif;
   font-size: 13px;
   font-weight: 600;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   line-height: 1;
   cursor: pointer;
   opacity: 0;
   transform: translateY(10px);
   transition: background 0.2s, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
      color 0.2s, border-color 0.2s, opacity 0.24s ease;
}

.pt-modal__close-x {
   font-size: 20px;
   line-height: 1;
   /* 시각적 중심을 맞춘다 */
   margin-top: -2px;
}

.pt-modal__close:hover {
   background: #b8332c;
   border-color: #b8332c;
   color: #fff;
}

/* .pt-modal.is-open .pt-modal__close 가 transform 을 잡고 있어서
   같은 수준의 선택자로 눌린 상태를 덮어써야 한다. */
.pt-modal.is-open .pt-modal__close:active {
   transform: scale(0.95);
}

.pt-modal__close:focus-visible {
   outline: 2px solid #fff;
   outline-offset: 3px;
}

/* 아주 좁은 화면에서는 글자를 빼고 동그란 [X] 만 */
@media (max-width: 420px) {
   .pt-modal__close {
      width: 40px;
      padding: 0;
      justify-content: center;
   }

   .pt-modal__close-text {
      display: none;
   }

   .pt-modal__close-x {
      font-size: 22px;
   }
}

/* ---------- 로딩 표시 ---------- */

.pt-modal__loader {
   position: absolute;
   inset: 0;
   z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #f7f6f5;
   transition: opacity 0.25s ease;
}

.pt-modal.is-loaded .pt-modal__loader {
   opacity: 0;
   pointer-events: none;
}

.pt-modal__loader::after {
   content: "";
   width: 34px;
   height: 34px;
   border: 3px solid rgba(22, 22, 22, 0.15);
   border-top-color: #b8332c;
   border-radius: 50%;
   animation: pt-modal-spin 0.8s linear infinite;
}

@keyframes pt-modal-spin {
   to {
      transform: rotate(360deg);
   }
}

/* ---------- 로그인한 회원 이름 (nav / menu) ---------- */
/* nav 는 모든 페이지에 있으므로 폼 전용 signup.css 가 아니라 여기에 둔다 */

/* 회원 이름은 이제 버튼(.pt-account-btn) 안에 들어간다.
   버튼은 Logout 과 같은 .signup-btn 껍데기를 쓰므로 색은 그쪽을 따른다. */
.pt-account-name {
   display: inline-block;
   max-width: 120px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   vertical-align: middle;
   text-transform: none;
}

/* 아이콘 + 이름을 한 줄로. .signup-btn 은 안쪽 span 을 기준으로 그려진다. */
.pt-account-btn > span {
   display: inline-flex;
   align-items: center;
   gap: 7px;
}

.pt-icon-user {
   flex: none;
   width: 17px;
   height: 17px;
   /* 글자 크기가 달라져도 아이콘은 그대로 */
   opacity: 0.92;
}

/* 클릭할 수 있다는 느낌을 조금 더 준다 */
.pt-account-btn:hover .pt-icon-user {
   opacity: 1;
}

/* ---------- 배경 스크롤 잠금 ---------- */

body.pt-modal-open {
   overflow: hidden;
}

/* =====================================================
   플로팅 버튼(Join Poker Lobby / Get Points, .pt-fab-dock)은
   2026-09-05 CK 지시로 삭제했다. 마크업(include/modal.php)과 스타일
   모두 지웠다. 로비 입구는 상단 네비 POKER LOBBY 와 모바일 하단
   액션바(.mobile-action-bar)가 맡는다.

   ※ 2026-09-05 사고 기록: 처음 지울 때 파일 머리말(1행)에도 "Join Poker
      Lobby" 가 있어 1행부터 잘라 버렸고, 팝업 스타일이 통째로 사라져
      POKER LOBBY 를 눌러도 팝업이 화면 밖(문서 맨 아래)에 열렸다.
   ===================================================== */

/* ---------- 모션 최소화 ---------- */

@media (prefers-reduced-motion: reduce) {
   .pt-modal__backdrop,
   .pt-modal__panel,
   .pt-modal__close,
   .pt-modal__loader {
      transition: none;
   }

   .pt-modal__panel,
   .pt-modal__close {
      transform: none;
   }

   .pt-modal__loader::after {
      animation: none;
   }
}