/* common/css/page.css */
[hidden] { display: none !important; }
:root { --bg1: #1e1e30; --bg2: #0c0c14; --ink: #fff; --muted: #a4b0be; --soft: #ced6e0; --accent: #ff4757; --ok: #2ed573; --lime: #8ee03a; --frame: #2f3542; --bw: 14px; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: radial-gradient(circle at center, var(--bg1) 0%, var(--bg2) 100%) fixed; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; }
html.no-scroll, html.no-scroll body { overflow: hidden; }
a { color: inherit; }

.page { display: grid; grid-template-columns: minmax(0, 460px) auto; gap: 56px; justify-content: center; align-items: start; max-width: 1180px; margin: 0 auto; padding: 40px 24px 56px; }
.info { min-width: 0; }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.badge { display: inline-block; background: var(--accent); padding: 6px 12px; border-radius: 20px; font-size: .85rem; font-weight: 700; letter-spacing: 1px; }
.lang { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 20px; background: rgba(255, 255, 255, .06); color: #fff; font-size: 1.15rem; line-height: 1; cursor: pointer; }
.lang-btn .caret { transition: transform .15s; }
.lang-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }
.lang-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 150px; margin: 0; padding: 6px; list-style: none; border: 1px solid rgba(255, 255, 255, .15); border-radius: 12px; background: #1b1b2b; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); }
.lang-menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: #fff; font: inherit; font-size: .95rem; text-align: left; cursor: pointer; }
.lang-menu button:hover, .lang-menu button:focus-visible { background: rgba(255, 255, 255, .1); }
.lang-menu .flag { font-size: 1.2rem; }
h1 { margin: 0 0 18px; line-height: 1.2; }
h1 .logo { display: block; width: min(300px, 72%); height: auto; margin: 0 0 4px; }
h1 [data-ver="title"] { display: block; font-size: clamp(1.7rem, 3.4vw, 2.2rem); font-weight: 800; background: linear-gradient(45deg, #ff6b81, #ff4757); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.intro { margin: 0 0 24px; color: var(--muted); font-size: 1.05rem; line-height: 1.7; }
.features { list-style: none; padding: 0; margin: 0 0 24px; }
.features li { display: flex; gap: 10px; margin-bottom: 10px; color: var(--soft); }
.features li::before { content: "✓"; color: var(--ok); font-weight: 700; }
.callout { margin-bottom: 24px; padding: 14px 16px; border: 1px solid rgba(255, 165, 0, .3); border-radius: 12px; background: rgba(255, 165, 0, .1); color: #ffa502; font-size: .95rem; line-height: 1.5; }
.cta-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-bottom: 24px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; background: rgba(255, 255, 255, .06); color: #fff; font: inherit; font-size: .95rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.btn.primary { border-color: transparent; background: var(--accent); }
.card { margin-bottom: 20px; }
.card h2 { margin: 0 0 10px; color: var(--soft); font-size: 1rem; }
.card p { margin: 0; color: var(--muted); line-height: 1.5; }
.channels { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.channels a, .channels span { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--frame); color: #fff; font-weight: 700; text-decoration: none; }
.channels svg { width: 22px; height: 22px; }
.channels a { transition: background .15s; }
.channels a:hover, .channels a:focus-visible { background: #46506a; }
.channels [aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.contact { margin: 20px 0 0; color: var(--muted); font-size: .9rem; }
.legal { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; color: var(--muted); font-size: .85rem; }
.linklike { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }

/* 폰 프레임: 안쪽 화면이 정확히 9:16 이 되도록 content-box + 테두리 */
.stage { position: sticky; top: 24px; display: flex; justify-content: center; }
.device-wrapper { display: flex; justify-content: center; }
.device-mockup { position: relative; box-sizing: content-box; width: min(calc(92vw - 2 * var(--bw)), calc((86vh - 2 * var(--bw)) * 9 / 16), 440px); aspect-ratio: 9 / 16; border: var(--bw) solid var(--frame); border-radius: 40px; background: #000; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .7); }
@supports (height: 1dvh) { .device-mockup { width: min(calc(92vw - 2 * var(--bw)), calc((86dvh - 2 * var(--bw)) * 9 / 16), 440px); } }
.notch { position: absolute; top: 0; left: 50%; z-index: 9; width: 34%; height: 22px; border-radius: 0 0 14px 14px; background: var(--frame); transform: translateX(-50%); pointer-events: none; }
.screen { position: relative; width: 100%; height: 100%; background: #000; }
.screen iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
.cutscene { position: absolute; inset: 0; z-index: 4; background: #000; pointer-events: none; }
.cutscene video { display: block; width: 100%; height: 100%; object-fit: cover; }
.overlay { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; background: rgba(8, 8, 16, .82); color: #fff; text-align: center; cursor: pointer; }
.overlay.loading { background: #0c0c14; cursor: default; }
/* 로딩 중에는 게임(game.html) 쪽 진행바가 보이도록 오버레이를 투명하게 하고 클릭도 통과시킨다. 실패하면 불투명으로 돌아온다. */
.screen[data-state="loading"] .overlay.loading:not(.has-game) { background: transparent; pointer-events: none; }
/* 로딩 미니게임(OrbFlap)이 얹히면 오버레이 전체가 터치 영역이고, 스피너·문구는 미니게임이 대신 그린다 */
.overlay.loading.has-game { padding: 0; background: #0b1020; }
.overlay.loading.has-game .spinner, .overlay.loading.has-game #loadingText { display: none; }
.screen[data-state="error"] .spinner { display: none; }
.cover { background: #0c0c14; cursor: default; }
.cover-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.cover-text { position: relative; display: flex; flex-direction: column; gap: 6px; }
.cover-text strong { font-size: 1.4rem; }
.cover-when { margin-top: 10px; font-size: .85rem; opacity: .9; }
.cover-countdown { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.debug-badge { position: fixed; top: 8px; left: 50%; z-index: 1500; max-width: 92vw; padding: 4px 12px; border-radius: 999px; background: #d93a3a; color: #fff; font-size: .78rem; font-weight: 700; transform: translateX(-50%); }
.debug-badge[hidden] { display: none; }
.start-ring { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border: 3px solid var(--lime); border-radius: 50%; color: var(--lime); font-size: 28px; }
.spinner { width: 36px; height: 36px; border: 4px solid rgba(255, 255, 255, .2); border-top-color: var(--lime); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.fs-btn { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 10px); right: 10px; z-index: 7; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: rgba(0, 0, 0, .35); color: var(--lime); cursor: pointer; }
.exit-btn { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 10px); right: 10px; z-index: 8; min-height: 40px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 20px; background: rgba(0, 0, 0, .5); color: #fff; font: inherit; font-size: .85rem; cursor: pointer; }

/* 전체화면(네이티브 :fullscreen 또는 의사 전체화면): 테두리·노치를 숨기고 9:16 을 유지 */
.device-wrapper:fullscreen, .device-wrapper.pseudo-fs { align-items: center; background: #000; }
.device-wrapper.pseudo-fs { position: fixed; inset: 0; z-index: 1000; height: 100vh; height: 100dvh; }
.device-wrapper:fullscreen .device-mockup, .device-wrapper.pseudo-fs .device-mockup { --bw: 0px; width: min(100vw, calc(100vh * 9 / 16)); border: 0; border-radius: 0; box-shadow: none; }
@supports (height: 1dvh) { .device-wrapper:fullscreen .device-mockup, .device-wrapper.pseudo-fs .device-mockup { width: min(100vw, calc(100dvh * 9 / 16)); } }
.device-wrapper:fullscreen .notch, .device-wrapper.pseudo-fs .notch { display: none; }

.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 2000; max-width: 90vw; padding: 12px 18px; border: 1px solid rgba(255, 255, 255, .15); border-radius: 12px; background: rgba(20, 20, 30, .95); transform: translateX(-50%); }

/* 리더보드: 보드 카드 + 등록 모달 */
.btn.small { min-height: 32px; padding: 0 12px; font-size: .85rem; }
.lb-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin-bottom: 10px; }
.card .lb-head h2 { margin: 0; font-size: 1.15rem; }
.lb-login { display: flex; align-items: center; justify-content: flex-end; min-width: 0; min-height: 32px; }
.lb-login-btn { min-height: 32px; color-scheme: light; }
.lb-login { gap: 8px; }
.lb-logout { padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: .78rem; text-decoration: underline; cursor: pointer; }
.lb-logout:hover, .lb-logout:focus-visible { color: var(--soft); }
.lb-login-status { color: var(--soft); font-size: .85rem; line-height: 1.4; text-align: right; }
.card.lb .lb-rules { margin: 0 0 4px; color: var(--soft); font-size: .92rem; word-break: keep-all; }
.card.lb p.lb-fine, .lb-fine { margin: 0 0 12px; color: var(--muted); font-size: .75rem; line-height: 1.4; word-break: keep-all; }
.lb-meta > span { display: flex; flex-direction: column; gap: 2px; }
.card.lb .lb-meta .lb-fine { margin: 0; }
/* 표준 탭: 밑줄 막대 + 선택된 탭 아래 강조선 */
.lb-tabs { display: flex; gap: 2px; margin: 0 0 10px; border-bottom: 1px solid rgba(255, 255, 255, .14); overflow-x: auto; scrollbar-width: none; }
.lb-tabs::-webkit-scrollbar { display: none; }
.lb-tabs button { flex: none; margin-bottom: -1px; padding: 10px 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font: inherit; font-size: .92rem; white-space: nowrap; cursor: pointer; transition: color .15s, border-color .15s; }
.lb-tabs button:hover { color: var(--soft); }
.lb-tabs button[aria-selected="true"] { border-bottom-color: var(--accent); color: #fff; font-weight: 700; }
.lb-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px 6px 0 0; }
.lb-retention { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; padding: 7px 10px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 8px; background: rgba(255, 255, 255, .04); color: var(--muted); font-size: .78rem; line-height: 1.4; word-break: keep-all; }
.lb-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-top: 1px; border: 1px solid currentColor; border-radius: 50%; font: italic 700 .7rem/1 Georgia, serif; }
.lb-close { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; padding: 7px 10px; border: 1px solid rgba(255, 165, 0, .3); border-radius: 8px; background: rgba(255, 165, 0, .07); color: var(--soft); font-size: .82rem; line-height: 1.45; word-break: keep-all; }
.lb-clock { flex: none; font-size: .95rem; line-height: 1.3; }
.lb-close-body { min-width: 0; }
.lb-close-time { font-weight: 700; }
.lb-close-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 2px; }
.lb-close-links a { color: orange; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
/* 순위가 길어져도 카드가 계속 늘어나지 않게: 약 9.5줄까지 보이고(절반 줄이 스크롤 힌트) 넘치면 이 안에서 스크롤 */
.lb-panel { max-height: 296px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent; }
.lb-panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.lb-list { margin: 0; padding: 0; list-style: none; }
.lb-list li { display: grid; grid-template-columns: 2.2em 1fr auto; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); color: var(--soft); font-size: .95rem; }
.lb-list li.empty { display: block; color: var(--muted); }
.lb-list li span:first-child { color: var(--muted); }
.lb-list li span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-list li.me, .lb-list li.me span, .lb-list li.me b { color: orange; font-weight: 700; } /* 내 별칭 */
.lb-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px !important; font-size: .85rem; }
.lb-error { margin: 8px 0 0 !important; color: #ff6b81 !important; font-size: .9rem; }
.lb-modal { position: fixed; inset: 0; z-index: 1600; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(5, 5, 12, .72); }
.lb-modal[hidden] { display: none; }
.lb-dialog { width: 100%; max-width: 420px; padding: 20px; border: 1px solid rgba(255, 255, 255, .15); border-radius: 16px; background: #14141f; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.lb-dialog h2 { margin: 0 0 10px; font-size: 1.15rem; }
.lb-dialog p { margin: 0 0 12px; color: var(--soft); line-height: 1.5; }
.lb-spin { margin: 4px auto 14px; }
.lb-run { margin: 0 0 12px; padding: 10px 12px; list-style: none; border-radius: 10px; background: rgba(255, 255, 255, .05); }
.lb-run li { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; color: var(--soft); font-size: .95rem; }
.lb-run li.hot, .lb-run li.hot b { color: #ffd166; }   /* v002: 이번 판에 최고기록을 깬 줄 */
.lb-note { padding: 10px 12px; border-radius: 10px; background: rgba(255, 165, 0, .1); color: #ffa502 !important; font-size: .9rem; }
.lb-modal[data-state="result"] .lb-note { background: rgba(255, 255, 255, .05); color: var(--soft) !important; font-size: .85rem; word-break: keep-all; } /* 결과 화면의 안내는 경고색이 아니라 차분하게 */
.lb-agree { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; color: var(--soft); font-size: .92rem; line-height: 1.45; cursor: pointer; }
.lb-agree input { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.lb-google { display: flex; justify-content: center; min-height: 44px; margin-bottom: 12px; }
.lb-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
/* v002 공유하기: 전면 팝업에 QR. 흰 바탕과 여백(조용한 영역)이 있어야 스캔이 잘 된다 — 어두운 테마에서도 QR 은 밝은 바탕 위에 둔다. */
.share-dialog { max-width: 460px; text-align: center; }
.share-qr { margin: 4px auto 16px; padding: 34px; width: min(78vw, 340px); box-sizing: border-box; border-radius: 16px; background: #fff; }
.share-qr img { display: block; width: 100%; height: auto; }
.share-dialog .lb-actions { justify-content: center; }
.lb-actions .btn:disabled { opacity: .5; cursor: not-allowed; }

/* v002 아케이드 리더보드(로그인 없이 닉네임만): common/js/arcade-ui.js */
.arc-mine[hidden] { display: none; }
.arc-input-wrap { margin: 0 0 12px; }
.arc-label { display: block; margin: 0 0 6px; color: var(--soft); font-size: .9rem; }
.arc-input { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 10px; background: #0e0e18; color: #fff; font: inherit; font-size: 1.05rem; }
.arc-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.arc-input[aria-invalid="true"] { border-color: #ff6b81; }
.arc-hint { margin: 6px 0 0 !important; }
.arc-error { margin: 6px 0 0 !important; color: #ff6b81 !important; font-size: .9rem; }
.arc-ticket { margin: 0 0 12px; padding: 12px; border: 1px solid rgba(255, 165, 0, .45); border-radius: 12px; background: rgba(255, 165, 0, .07); }
.arc-ticket-title { margin: 0 0 6px; font-weight: 700; color: #ffa502; }
.arc-ticket-code { padding: 8px 10px; border-radius: 8px; background: #0e0e18; color: #fff; font: 700 1.05rem/1.4 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .03em; text-align: center; word-break: break-all; user-select: all; }
.arc-ticket-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.arc-copied { margin: 8px 0 0 !important; color: #7bed9f !important; font-size: .85rem; }
.arc-modal .lb-dialog { max-height: calc(100vh - 32px); overflow-y: auto; }
@media (max-width: 480px) { .arc-ticket-code { font-size: .86rem; letter-spacing: 0; } }   /* 좁은 화면에서 경품권 번호가 한 줄에 들어가게 */

@media (max-width: 899px) {
  .page { grid-template-columns: 1fr; gap: 24px; padding: 16px 16px 40px; }
  .stage { position: static; order: -1; }
}