/* Pium Games 공용 헤더/푸터 스타일.
 *
 * 모든 페이지(허브 index.html + subway/ + talk/ + 369/)는 이 파일과
 * shared/pium.js 한 쌍을 로드해서 같은 헤더/푸터를 그린다.
 * 헤더/푸터 모양을 바꿀 땐 반드시 여기(단일 소스)만 고친다 —
 * 페이지별 복제/변형 금지 (CLAUDE.md 규칙).
 *
 * 클래스는 전부 pium- 접두 (게임 쪽 app.css 의 .site-header 등과 충돌 방지).
 */
:root { --pium-header-h: 76px; --pium-footer-h: 60px; }

.pium-header {
  position: sticky;
  top: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(14, 11, 30, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
/* 개발자 모드 빌드 넘버 (= push 횟수, pium.js updateBuildBadge) */
.pium-build {
  position: absolute;
  right: 10px;
  bottom: 5px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: rgba(244, 241, 255, 0.4);
  pointer-events: none;
}
.pium-build[hidden] { display: none; }

.pium-wordmark {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 6vw, 44px);
  letter-spacing: 0.5px;
  line-height: 1;
  margin: 0;
  text-decoration: none;
  background: linear-gradient(92deg, #a78bfa 0%, #ec4899 42%, #f59e0b 72%, #22d3ee 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: pium-shimmer 7s ease-in-out infinite;
}
@keyframes pium-shimmer {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}
@media (prefers-reduced-motion: reduce) {
  .pium-wordmark { animation: none; }
}

/* 푸터 — 컴팩트 + 화면 하단 에 항상 표시 (fixed).  각 페이지 는
 * --pium-footer-h 만큼 하단 여백/높이 계산 에 반영 (pium.js 가 실측 세팅,
 * body padding-bottom 은 아래 공용 규칙). */
.pium-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(10, 8, 22, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  color: #f4f1ff;
}
body { padding-bottom: var(--pium-footer-h, 60px); }
.pium-footer-inner {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  text-align: center;
}
.pium-share {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.pium-share-btn {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.05);
  color: #f4f1ff;
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pium-share-btn:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
}
.pium-share-bluesky:hover { color: #38bdf8; }
.pium-share-x:hover { color: #fff; }
.pium-share-threads:hover { color: #fff; }
.pium-share-instagram:hover { color: #f472b6; }
.pium-share-copy:hover { color: #a78bfa; }
.pium-share-native:hover { color: #22d3ee; }

.pium-fine {
  margin: 0;
  color: #b8b2d8;
  font-size: 12px;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  letter-spacing: 0.3px;
}

.pium-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--pium-footer-h, 60px) + 14px);
  transform: translateX(-50%) translateY(14px);
  background: rgba(20, 16, 40, 0.96);
  color: #f4f1ff;
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 11px 18px;
  border-radius: 12px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 900;
}
.pium-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── "준비중"(개발중) 게임 카드 잠금 — data-pium-wip ──
 * 일반 유저: 우상단 태그 + 옅게 + 클릭 비활성.  푸터 ©줄 7탭(개발자
 * 모드)이면 잠금 해제 (태그는 유지).  pium.js 의 applyWip 참조. */
.pium-wip-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #ffd166;
  background: rgba(20, 16, 40, 0.85);
  border: 1px solid rgba(255, 209, 102, 0.55);
  border-radius: 999px;
}
.pium-wip-locked {
  filter: saturate(0.6);
  pointer-events: none;
  cursor: default;
}
/* 카드 내용만 옅게 — "준비중" 태그는 선명하게 유지 */
.pium-wip-locked > *:not(.pium-wip-tag) {
  opacity: 0.4;
}

/* ── 더블탭 확대/요소 선택 방지 — 모든 페이지 공통 (2026-07-07 지시) ──
 * 더블탭하면 텍스트/요소가 선택·확대되는 문제.  touch-action:
 * manipulation 이 더블탭 줌을 끄고, user-select 가 선택을 막는다.
 * 더블탭 줌은 "탭한 요소" 기준으로 동작하므로 body 만으론 부족 —
 * 전 요소(*)에 건다 (특이도 0 이라 게임의 .mj-btn { touch-action:
 * none } 같은 클래스 규칙은 그대로 이긴다). 입력 필드는 예외.
 * 추가로 pium.js 가 뷰포트 meta 에 maximum-scale=1 을 강제한다. */
html { -webkit-tap-highlight-color: transparent; }
* { touch-action: manipulation; }
body {
  -webkit-user-select: none;
  user-select: none;
}
input, textarea, [contenteditable] {
  -webkit-user-select: text;
  user-select: text;
}