/* 대전 전용 보강 */ #pzPanel .pz-btns.center { justify-content:center; width:100%; } /* 로비의 세 주 동작은 번역 길이가 서로 달라도 패널 안의 3등분 폭을 넘지 않는다. 좁은 화면에서는 글자 크기를 조금 줄이고, 그래도 긴 단어는 버튼 안에서 줄바꿈한다. */ #pzPanel #obQuickActionRow .pz-btns.center { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; min-width:0; } #pzPanel #obAutoMatchBtn, #pzPanel #obPlayBtn, #pzPanel #obAiGameBtn { width:100%; min-width:0; min-height:64px; padding:7px 8px 8px; font-size:clamp(12px,3.8vw,15px); line-height:1.15; white-space:normal; overflow-wrap:anywhere; hyphens:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; } /* 글자 위 아이콘(2026-10-10, 랜딩 타일과 같은 그림). 버튼 글자색을 따른다. */ #pzPanel .ob-lobby-main .ob-lobby-icon { display:block; width:22px; height:22px; flex:0 0 auto; line-height:0; } #pzPanel .ob-lobby-main .ob-lobby-icon svg { width:100%; height:100%; display:block; } @media (max-width:575.98px) { #pzPanel #obAutoMatchBtn, #pzPanel #obPlayBtn, #pzPanel #obAiGameBtn { min-height:62px; } #pzPanel .ob-lobby-main .ob-lobby-icon { width:20px; height:20px; } } #obChooser,#obAutoMatchBox { margin-top:10px; padding:12px; border:1px solid #d6deea; border-radius:10px; background:#f8fafc; } /* 대기 인원 — 퍼즐 카드의 '플레이중' 닷과 같은 형태로 버튼 우상단에 띄운다. 색은 버튼 글자색(흰색)을 그대로 상속한다. 0명이면 감춘다. */ #pzPanel #obAutoMatchBtn, #obAutoMatchBtn { position:relative; } .ob-automatch-waiters { display:inline-flex; position:absolute; top:3px; right:5px; align-items:center; gap:4px; color:#5eead4; font-size:12px; font-weight:800; line-height:1; white-space:nowrap; pointer-events:none; } /* 대기 상태 표시색(민트) — 닷·숫자 모두. 아바타 상태 닷의 온라인·대국중·퍼즐중·자리비움과 겹치지 않고 빠른 매칭 버튼의 티일 계열과 같은 패밀리다. */ .ob-automatch-waiters::before { content:''; width:7px; height:7px; border-radius:50%; background:currentColor; } .ob-automatch-waiters.is-empty { display:none; } /* 인원이 있을 때만 라벨 오른쪽을 비운다. 버튼 자체 padding 은 건드리지 않아 반응형·다크모드 규칙이 그대로 살고, 라벨이 긴 로케일에서도 뱃지와 안 겹친다. */ #obAutoMatchBtn .ob-automatch-label { display:inline-block; text-align:center; } /* 뱃지 자리를 오른쪽만 비우면 글자가 왼쪽으로 밀린다. 양쪽을 같은 폭으로 비워 라벨이 버튼 정중앙에 오게 하고, 비워둔 오른쪽 자리 위에 뱃지가 얹힌다. */ #obAutoMatchBtn.has-waiters .ob-automatch-label { padding-left:18px; padding-right:18px; } /* 로비 세로 버튼(아이콘 위·글자 아래, 2026-10-10)에서는 인원 닷이 우상단 모서리에 떠서 글자와 겹치지 않는다. 위 좌우 여백을 그대로 두면 좁은 버튼에서 글자가 줄바꿈돼 닷이 뜰 때마다 아이콘·글자가 움직였다. */ #pzPanel #obAutoMatchBtn.has-waiters .ob-automatch-label { padding-left:0; padding-right:0; } #obChooser label { font-size:13px; margin-right:10px; } #obChooser select { font-size:13px; padding:3px 6px; } #obChooser .ob-match-options { display:flex; gap:10px 14px; justify-content:center; flex-wrap:wrap; align-items:center; } #obChooser .ob-match-options label { display:inline-flex; align-items:center; gap:4px; margin-right:0; } #obChooser .ob-match-options label.is-disabled { opacity:.52; } #obChooser .ob-bot-note { margin:9px 0 0; text-align:center; color:#64748b; font-size:12px; line-height:1.5; } html.fs-app-theme-dark #obChooser .ob-bot-note { color:#94a3b8; } #obChooser .ob-match-start { display:flex; justify-content:center; margin-top:10px; } #obChooser .ob-match-start .pz-btn { min-width:96px; } /* 공통 #pzPanel .pz-btn.primary와 다크모드 !important보다 우선해 자동 매칭을 구분한다. */ #pzPanel #obAutoMatchBtn,#pzPanel #obAutoMatchStartBtn { border-color:#0f766e!important; background:#0f766e!important; color:#fff!important; } #pzPanel #obAutoMatchBtn:hover:not(:disabled),#pzPanel #obAutoMatchBtn:focus-visible,#pzPanel #obAutoMatchStartBtn:hover:not(:disabled),#pzPanel #obAutoMatchStartBtn:focus-visible { border-color:#115e59!important; background:#115e59!important; color:#fff!important; } #pzPanel #obAutoMatchBtn:active:not(:disabled),#pzPanel #obAutoMatchStartBtn:active:not(:disabled) { border-color:#134e4a!important; background:#134e4a!important; } html.fs-app-theme-dark #pzPanel #obAutoMatchBtn,html.fs-app-theme-dark #pzPanel #obAutoMatchStartBtn { border-color:#0f766e!important; background:#0f766e!important; color:#fff!important; } html.fs-app-theme-dark #pzPanel #obAutoMatchBtn:hover:not(:disabled),html.fs-app-theme-dark #pzPanel #obAutoMatchBtn:focus-visible,html.fs-app-theme-dark #pzPanel #obAutoMatchStartBtn:hover:not(:disabled),html.fs-app-theme-dark #pzPanel #obAutoMatchStartBtn:focus-visible { border-color:#115e59!important; background:#115e59!important; color:#fff!important; } #obAutoMatchBox fieldset { min-width:0; margin:0; padding:0; border:0; } #obAutoMatchBox .ob-auto-group { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:7px 12px; } #obAutoMatchBox .ob-auto-group + .ob-auto-group { margin-top:9px; } #obAutoMatchBox .ob-auto-label { color:#475569; font-size:13px; font-weight:800; } #obAutoMatchBox label { display:inline-flex; align-items:center; gap:4px; margin:0; font-size:13px; white-space:nowrap; } #obAutoMatchBox label.ob-auto-bots { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; margin:10px 0 10px; white-space:normal; text-align:center; } /* 종류·시간 줄처럼 가운데(2026-10-09) */ #obAutoMatchBox .ob-auto-bots small { color:var(--fs-app-muted,var(--pz-muted,#64748b)); font-size:.85em; } #obAutoMatchBox .ob-auto-status { min-height:18px; margin-top:9px; color:#475569; font-size:12.5px; line-height:1.45; text-align:center; overflow-wrap:anywhere; } #obAutoMatchBotGuide span { display:block; } #obAutoMatchBox .ob-auto-status.is-waiting { color:#1d4ed8; font-weight:700; } #obAutoMatchBox .ob-auto-status.is-error { color:#dc2626; font-weight:700; } #pzPanel #obAutoMatchStartBtn:disabled { opacity:.5; cursor:default; } .ob-auto-waiting-dots { display:inline-block; width:1.2em; white-space:nowrap; text-align:left; } #obAutoMatchBox .ob-auto-waiting-detail { display:inline-block; margin-top:2px; } .ob-auto-waiting-dots > span { opacity:0; } .ob-auto-waiting-dots > span:first-child { opacity:1; } .ob-auto-waiting-dots > span:nth-child(2) { animation:obAutoWaitingDot2 2.1s steps(1,end) infinite; } .ob-auto-waiting-dots > span:nth-child(3) { animation:obAutoWaitingDot3 2.1s steps(1,end) infinite; } @keyframes obAutoWaitingDot2 { 0%,33.32% { opacity:0; } 33.33%,100% { opacity:1; } } @keyframes obAutoWaitingDot3 { 0%,66.65% { opacity:0; } 66.66%,100% { opacity:1; } } @media (prefers-reduced-motion:reduce) { .ob-auto-waiting-dots > span { opacity:1!important; animation:none!important; } } #obAutoMatchBox .ob-match-start { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin-top:10px; } #obAutoMatchBox .ob-match-start .pz-btn { min-width:96px; } html.fs-app-theme-dark #obChooser,html.fs-app-theme-dark #obAutoMatchBox { border-color:var(--fs-app-border); background:var(--fs-app-surface-2); color:var(--fs-app-text); } html.fs-app-theme-dark #obAutoMatchBox .ob-auto-label,html.fs-app-theme-dark #obAutoMatchBox .ob-auto-status { color:var(--fs-app-muted); } html.fs-app-theme-dark #obAutoMatchBox .ob-auto-status.is-waiting { color:#93c5fd; } html.fs-app-theme-dark #obAutoMatchBox .ob-auto-status.is-error { color:#fca5a5; } #obArenaCards { display:flex; flex-direction:column; } /* 우측 리더보드 캡션(주간/총 탭 포함)과 같은 높이·하단 간격을 사용해 두 열의 첫 박스 상단 테두리가 정확히 같은 선에서 시작하게 한다. */ .ob-arena-list-head { display:flex; align-items:center; gap:6px; min-height:29px; margin:0 0 8px; } .ob-arena-list-head[hidden] { display:none!important; } .ob-arena-list-title { display:inline-flex; min-width:0; align-items:center; gap:6px; overflow:hidden; color:#254ead!important; font-size:1.1rem; font-weight:800; line-height:1.25; text-decoration:none!important; text-overflow:ellipsis; white-space:nowrap; } .ob-arena-list-title:link,.ob-arena-list-title:visited { color:#254ead!important; } .ob-arena-list-title:hover,.ob-arena-list-title:focus-visible { color:#0d6efd!important; } .ob-arena-card { margin:0 0 12px; padding:10px; border:1px solid #d6deea; border-radius:10px; background:#f8fafc; cursor:pointer; transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease; } .ob-arena-card[hidden] { display:none!important; } @media(hover:hover){.ob-arena-card:hover{border-color:#93b4f4;box-shadow:0 4px 14px rgba(15,23,42,.08);transform:translateY(-1px)}} .ob-arena-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px; flex-wrap:wrap; } .ob-arena-heading { display:flex; flex:1 1 100%; width:100%; align-items:center; gap:6px; min-width:0; color:#1f2937; } .ob-arena-heading-main { display:flex; flex:1 1 auto; min-width:0; align-items:center; gap:6px; } .ob-arena-head-controls { display:flex; flex:0 0 auto; align-items:center; gap:7px; margin-left:auto; } .ob-arena-title-icon { display:inline-flex; align-items:center; justify-content:center; width:19px; height:19px; color:#d97706; flex:0 0 auto; } .ob-arena-title-icon svg { display:block; width:100%; height:100%; } .ob-arena-title { flex:0 1 auto; min-width:0; overflow:hidden; color:inherit!important; font-size:15px; font-weight:800; text-decoration:none; text-overflow:ellipsis; white-space:nowrap; } .ob-arena-guide-link { display:inline-flex; flex:0 0 18px; width:18px; height:18px; align-items:center; justify-content:center; margin:0; padding:0; border:1px solid currentColor; border-radius:50%; background:transparent; color:#2563eb; font-family:inherit; font-size:11px; font-weight:800; line-height:1; text-decoration:none; cursor:pointer; appearance:none; -webkit-appearance:none; } .ob-arena-guide-link:hover { background:#eff6ff; color:#1d4ed8; text-decoration:none; } .ob-arena-badge { display:inline-flex; flex:0 0 auto; align-items:center; min-height:21px; padding:1px 7px; border-radius:999px; background:#fef3c7; color:#92400e; font-size:11px; font-weight:800; white-space:nowrap; } /* 진행 중: 랜딩 로비 타일의 "Arena" 필(start.php .tile .live)과 같게 .ob-badge-arena 색 + 앞의 점이 천천히 깜박인다(2026-10-11) */ .ob-arena-badge.active { gap:5px; padding-left:6px; background:#fff7ed; color:#c2410c; box-shadow:inset 0 0 0 1px #fed7aa; } .ob-arena-badge.active::before { content:''; display:inline-block; flex:0 0 auto; width:6px; height:6px; border-radius:50%; background:currentColor; animation:fsLiveDot 1.6s ease-in-out infinite; } @keyframes fsLiveDot { 0%,100% { opacity:1; } 50% { opacity:.25; } } @media (prefers-reduced-motion:reduce) { .ob-arena-badge.active::before { animation:none; } } .ob-arena-badge.finished { background:#eef2f7; color:#475569; } .ob-arena-meta { color:#64748b; font-size:12.5px; line-height:1.4; } .ob-arena-metarow { display:flex; align-items:center; justify-content:flex-start; gap:8px; margin:0; } .ob-arena-metarow .ob-arena-meta { flex:0 1 auto; min-width:0; margin-top:0; } /* 종료 카드의 배지 옆 날짜·시각: 메타 줄과 같은 글자색·크기, 폭이 모자라면 이것부터 말줄임(2026-10-05). */ .ob-arena-inline-when { flex:0 100 auto; min-width:0; overflow:hidden; color:#64748b; font-size:12.5px; line-height:1.4; text-overflow:ellipsis; white-space:nowrap; } .ob-arena-inline-when[hidden] { display:none; } .ob-arena-metarow[hidden] { display:none; } /* 종료 카드는 메타 줄을 숨기므로 그 줄과 띄우던 제목 줄 간격(6px)도 빼야 위 여백이 다른 카드(패딩 10px)와 같다. */ .ob-arena-metarow[hidden] + .ob-arena-head { margin-top:0; } /* 상태 줄은 바로 아래 'N명 참가' 토글과 같은 크기(14px/1.35)로 맞춘다. */ .ob-arena-status { margin-top:6px; color:#334155; font-size:14px; font-weight:700; line-height:1.35; } .ob-arena-status:empty { display:none; } .ob-arena-participants-toggle { display:flex; align-items:center; gap:4px; margin:0; padding:0; border:0; background:transparent; color:#2563eb; font-family:inherit; font-size:14px; font-weight:700; line-height:1.35; cursor:pointer; } /* 터치 영역 확대(2026-10-05): 보이는 위치·크기는 그대로 두고 padding 만큼 음수 margin 으로 되돌린다. 오른쪽은 옆 참가 버튼(간격 7px)과 겹치지 않게 4px 만 넓힌다. */ .ob-arena-participants-toggle { position:relative; margin:-10px -4px -10px -12px; padding:10px 4px 10px 12px; -webkit-tap-highlight-color:transparent; } .ob-arena-participants-toggle[hidden] { display:none!important; } .ob-arena-participants-toggle .ob-watchers-icon { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; flex:0 0 auto; color:currentColor; } .ob-arena-participants-toggle .ob-watchers-icon svg { width:18px; height:18px; stroke:currentColor; } /* 글리프(▾)는 폰트마다 실제 크기가 작게 잡혀 잘 안 보였다 → CSS 삼각형으로 크기를 직접 지정. */ .ob-arena-participants-toggle::after { content:''; width:0; height:0; margin-top:2px; border-left:6px solid transparent; border-right:6px solid transparent; border-top:8px solid currentColor; transition:transform .15s ease; } .ob-arena-participants-toggle[aria-expanded="true"]::after { transform:rotate(180deg); } .ob-arena-medalists { display:flex; width:100%; min-width:0; min-height:20px; align-items:center; gap:0; margin-top:6px; padding:0; overflow:visible; } .ob-arena-medalists[hidden] { display:none!important; } .ob-arena-medalist { display:flex; flex:1 1 auto; max-width:none; min-width:0; min-height:20px; align-items:center; gap:3px; color:#254ead; font-size:13px; line-height:1.25; white-space:nowrap; } .ob-arena-medalist-medal { display:inline-flex; width:16px; height:15px; flex:0 0 auto; align-items:center; justify-content:center; font-size:13px; line-height:1; } .ob-arena-medalist .oc-flag { width:18px!important; height:14px!important; margin-right:0!important; } .ob-arena-medalist-name { min-width:0; overflow:hidden; text-overflow:ellipsis; color:inherit; font-weight:500; cursor:pointer; } .ob-arena-medalist-name:hover,.ob-arena-medalist-name:focus-visible { color:#0d6efd; text-decoration:underline; outline:none; } .ob-arena-medalist .ocpv-verified-badge { margin-left:1px!important; } .ob-arena-medalist.is-name-truncated .ocpv-verified-badge { display:none!important; } /* 후원 배지 간격(2026-08-11 일괄 점검): 배지는 닉 **앞** 슬롯이라 자체 margin-right:4px 를 갖는다. gap 을 쓰는 flex 컨테이너에서는 그 마진이 gap 과 합산돼 국기(마진 0)보다 넓어지므로 좌우 모두 0 — 간격은 컨테이너 gap 하나로만 준다(국기와 같은 규칙). 화면별 음수 마진 덧대기 금지. */ .ob-arena-medalist .oc-donor-badge, .ob-room-player .oc-donor-badge, #obRoomUsers .ob-room-user .oc-donor-badge { margin-left:0!important; margin-right:0!important; } .ob-arena-medalist.is-name-truncated .oc-donor-badge { display:none!important; } .ob-arena-actions { display:flex; justify-content:center; gap:7px; margin-top:9px; flex-wrap:wrap; } .ob-arena-head-controls > .ob-arena-actions { flex:0 0 auto; margin:0; flex-wrap:nowrap; } .ob-arena-head-controls > .ob-arena-actions:empty { display:none; } .ob-arena-head-controls > .ob-arena-actions .pz-btn { min-width:52px; padding-left:8px; padding-right:8px; } .ob-arena-actions .pz-btn { display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; min-width:64px; min-height:24px; padding:1px 9px; border:1px solid #cbd5e1; border-radius:7px; background:#fff; color:#334155; appearance:none; -webkit-appearance:none; cursor:pointer; font-family:inherit; font-size:14px; font-weight:700; line-height:1.2; white-space:nowrap; } .ob-arena-actions .pz-btn:hover { background:#f1f5f9; } .ob-arena-actions .pz-btn.primary { border-color:#2563eb; background:#2563eb; color:#fff; } .ob-arena-actions .pz-btn.primary:hover { border-color:#1d4ed8; background:#1d4ed8; } /* 참가자 전원을 보여주되(예: 17명) 카드가 끝없이 늘지 않게 표만 스크롤한다. */ .ob-arena-standings-wrap { position:relative; isolation:isolate; width:calc(100% + 20px); max-width:none; margin:9px -10px 0; max-height:min(52vh,420px); overflow:auto; overscroll-behavior:contain; clip-path:inset(0); background:#fff; } .ob-arena-standings-wrap[hidden] { display:none!important; } .ob-arena-standings { width:100%; min-width:calc(var(--arena-points-width,56px) + 260px); max-width:none; border-collapse:separate; border-spacing:0; table-layout:fixed; font-size:14px; line-height:1.2; } .ob-arena-standings col.rank { width:7%; } .ob-arena-standings col.player { width:auto; } .ob-arena-standings col.points { width:var(--arena-points-width,56px); } .ob-arena-standings col.score { width:12%; } .ob-arena-standings thead { position:sticky; top:0; z-index:2; } .ob-arena-standings thead th { background:#f8fafc; box-shadow:0 1px 0 #e5e7eb; } .ob-arena-standings th,.ob-arena-standings td { min-width:0; padding:6px 7px; overflow:hidden; border-top:1px solid #e5e7eb; vertical-align:middle; line-height:1.2; } .ob-arena-standings th:first-child,.ob-arena-standings td:first-child { text-align:center; font-variant-numeric:tabular-nums; } .ob-arena-rank-medal { display:inline-flex; align-items:center; justify-content:center; font-size:16px; line-height:1; } /* 일시정지 표시: ⏸ 이모지는 플랫폼에 따라 컬러 이모지(주황)로 그려져 color 를 무시한다 — currentColor 막대 2개로 직접 그려 라이트/다크 톤을 CSS 가 소유한다. */ .ob-arena-pause-icon { display:inline-flex; width:100%; align-items:center; justify-content:center; gap:3px; color:#94a3b8; line-height:1; } .ob-arena-pause-icon::before, .ob-arena-pause-icon::after { content:''; width:3.5px; height:11px; border-radius:2px; background:currentColor; } .ob-arena-standings th { color:#64748b; font-size:12px; font-weight:800; } .ob-arena-standings th.ob-arena-player-heading { text-align:center; } .ob-arena-standings tbody tr { background:#fff; } .ob-arena-standings tbody tr:nth-child(even) { background:#f8fafc; } .ob-arena-standings .num { text-align:right; white-space:nowrap; } .ob-arena-standings th:last-child,.ob-arena-standings td:last-child { padding-right:9px; } /* 라운드형(스위스·라운드로빈·단판 탈락)은 게임 칩 열이 없어 점수·MBQ 두 숫자만 남는다. 아레나처럼 우측에 붙이면 모바일에서 두 값이 맞붙어 읽기 어려우므로 폭을 주고 가운데 정렬한다. */ .ob-arena-standings.ob-tn-round col.score { width:56px; } .ob-arena-standings.ob-tn-round col.points { width:64px; } .ob-arena-standings.ob-tn-round th.num,.ob-arena-standings.ob-tn-round td.num { text-align:center; } /* 같은 카드 안의 메달 행(.ob-arena-medalist)과 같은 리듬을 쓴다 — gap 3px · 국기 18x14 · 사진 16px · 13px 글자. 여기만 다른 값을 쓰면 두 줄이 어긋난다. */ .ob-tn-owner { display:inline-flex; align-items:center; gap:3px; vertical-align:middle; } .ob-tn-owner .pz-nick-tip { min-width:0; } .ob-tn-owner .pz-id-text { display:inline-flex; align-items:center; gap:3px; min-width:0; white-space:nowrap; } .ob-tn-owner .oc-flag { width:18px!important; height:14px!important; margin-right:0!important; } /* 사진은 메달 행 높이(20px)에 맞춘 16px — 간격은 셀의 gap(3px)이 만든다. */ .ob-tn-owner .pz-photo { width:16px; height:16px; margin:0; } /* 닉 색은 접속자 명단과 같은 값을 쓴다(그 규칙은 #obOnlineUsersTable 안으로 한정돼 있다). */ .ob-tn-owner [data-battle-user] { color:#254EAD; cursor:pointer; } .ob-tn-owner [data-battle-user]:hover,.ob-tn-owner [data-battle-user]:focus-visible { color:#0d6efd; } html.fs-app-theme-dark .ob-tn-owner [data-battle-user] { color:#93c5fd; } .ob-tn-block-note { margin-left:8px; color:#b45309; font-size:13px; font-weight:700; } html.fs-app-theme-dark .ob-tn-block-note { color:#fbbf24; } .ob-arena-game-points-head { text-align:center; white-space:nowrap; } .ob-arena-game-points { overflow:visible!important; text-align:right; white-space:nowrap; } .ob-arena-perf { display:block; margin-top:3px; white-space:nowrap; text-align:right; color:#94a3b8; font-size:11px; font-weight:600; line-height:1; font-variant-numeric:tabular-nums; } .ob-arena-game-points-seq { display:flex; width:100%; min-width:0; max-width:none; margin-left:auto; align-items:center; justify-content:flex-end; gap:1px; overflow:visible; white-space:nowrap; font-size:13px; font-weight:750; line-height:1; font-variant-numeric:tabular-nums; } .ob-arena-game-point { flex:0 0 auto; } .ob-arena-game-point.p0 { color:#94a3b8; } .ob-arena-game-point.p1 { color:#64748b; } .ob-arena-game-point.p2,.ob-arena-game-point.p3 { color:#65a30d; } .ob-arena-game-point.p4 { color:#d97706; } .ob-arena-total-score { font-weight:800; } .ob-arena-player-cell { display:flex; align-items:center; min-width:0; overflow:hidden; white-space:nowrap; } .ob-arena-photo-wrap { position:relative; display:inline-flex; width:32px; height:32px; margin-right:7px; flex:0 0 auto; } .ob-arena-photo-wrap.ob-player-photo-trigger { margin-right:7px; } .ob-arena-photo-wrap .ob-arena-standing-photo { width:32px; height:32px; margin:0; border:1px solid rgba(148,163,184,.3); border-radius:4px; object-fit:cover; flex:0 0 auto; } .ob-arena-pres-dot.ob-pres-dot { position:absolute; right:-2px; bottom:-2px; z-index:1; width:10px; height:10px; border:2px solid #fff; pointer-events:auto; } .ob-arena-player-main { display:flex; min-width:0; flex:1 1 auto; flex-direction:column; align-items:flex-start; overflow:hidden; } .ob-arena-player-name-line { display:flex; width:100%; min-width:0; align-items:center; line-height:1.2; } .ob-arena-player-name { display:block; min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; color:#254ead; line-height:1.2; cursor:pointer; } .ob-arena-player-name:hover,.ob-arena-player-name:focus-visible { color:#0d6efd; text-decoration:underline; outline:none; } .ob-arena-left-badge { flex:0 0 auto; margin-left:4px; padding:1px 4px; border-radius:999px; background:#e5e7eb; color:#64748b; font-size:10px; font-weight:700; line-height:1.25; } .ob-arena-player-meta { display:flex; max-width:100%; margin-top:1px; align-items:center; overflow:hidden; color:#94a3b8; font-size:14px; font-weight:400; line-height:1.15; text-overflow:ellipsis; white-space:nowrap; } .ob-arena-player-meta .oc-flag { width:20px!important; height:15px!important; margin-right:4px!important; } .ob-arena-standings tbody tr.ob-arena-me { font-weight:700; background:#eff6ff; } html.fs-app-theme-dark .ob-arena-card { background:var(--fs-app-surface); border-color:var(--fs-app-border); } html.fs-app-theme-dark .ob-online-users-table-box { scrollbar-color:var(--fs-app-border) var(--fs-app-surface); } html.fs-app-theme-dark .ob-online-users-table-box::-webkit-scrollbar-track { background:var(--fs-app-surface); } html.fs-app-theme-dark .ob-online-users-table-box::-webkit-scrollbar-thumb { border-color:var(--fs-app-surface); background:var(--fs-app-border); } @media(hover:hover){html.fs-app-theme-dark .ob-arena-card:hover{border-color:#60a5fa;box-shadow:0 4px 14px rgba(0,0,0,.24)}} html.fs-app-theme-dark .ob-arena-heading { color:var(--fs-app-text); } html.fs-app-theme-dark .ob-arena-list-title,html.fs-app-theme-dark .ob-arena-list-title:link,html.fs-app-theme-dark .ob-arena-list-title:visited { color:var(--fs-app-link,#93c5fd)!important; } html.fs-app-theme-dark .ob-arena-list-title:hover,html.fs-app-theme-dark .ob-arena-list-title:focus-visible { color:#bfdbfe!important; } html.fs-app-theme-dark .ob-arena-card .ob-arena-title { color:var(--fs-app-text)!important; } html.fs-app-theme-dark .ob-arena-status { color:var(--fs-app-text); } html.fs-app-theme-dark .ob-arena-badge.registration { background:rgba(245,158,11,.18); color:#fbbf24; } html.fs-app-theme-dark .ob-arena-badge.active { background:rgba(249,115,22,.16); color:#fb923c; box-shadow:inset 0 0 0 1px rgba(251,146,60,.35); } html.fs-app-theme-dark .ob-arena-badge.finished { background:rgba(148,163,184,.15); color:var(--fs-app-muted,#a8b3c5); } html.fs-app-theme-dark .ob-arena-guide-link { color:#93c5fd; } html.fs-app-theme-dark .ob-arena-player-name { color:#93c5fd; } html.fs-app-theme-dark .ob-arena-left-badge { background:rgba(148,163,184,.16); color:var(--fs-app-muted); } html.fs-app-theme-dark .ob-arena-pause-icon { color:var(--fs-app-muted); } html.fs-app-theme-dark .ob-arena-player-meta { color:var(--fs-app-muted); } html.fs-app-theme-dark .ob-arena-pres-dot.ob-pres-dot { border-color:var(--fs-app-surface); } html.fs-app-theme-dark .ob-arena-standings-wrap { background:var(--fs-app-surface); } html.fs-app-theme-dark .ob-arena-inline-when, html.fs-app-theme-dark .ob-arena-meta, html.fs-app-theme-dark .ob-arena-standings th { color:var(--fs-app-muted); background:var(--fs-app-surface); } html.fs-app-theme-dark .ob-arena-participants-toggle { color:#93c5fd; } html.fs-app-theme-dark .ob-arena-medalist { color:#93c5fd; } html.fs-app-theme-dark .ob-arena-standings tbody tr { background:var(--fs-app-surface); } html.fs-app-theme-dark .ob-arena-standings tbody tr:nth-child(even) { background:var(--fs-app-surface-2); } html.fs-app-theme-dark .ob-arena-game-point.p0 { color:#64748b; } html.fs-app-theme-dark .ob-arena-game-point.p1 { color:#94a3b8; } html.fs-app-theme-dark .ob-arena-game-point.p2,html.fs-app-theme-dark .ob-arena-game-point.p3 { color:#84cc16; } html.fs-app-theme-dark .ob-arena-game-point.p4 { color:#f59e0b; } html.fs-app-theme-dark .ob-arena-actions .pz-btn { background:var(--fs-app-surface-2); border-color:var(--fs-app-border); color:var(--fs-app-text); } html.fs-app-theme-dark .ob-arena-actions .pz-btn:hover { background:var(--fs-app-surface-3); } html.fs-app-theme-dark .ob-arena-actions .pz-btn.primary { background:#2563eb; border-color:#2563eb; color:#fff; } html.fs-app-theme-dark .ob-arena-actions .pz-btn.primary:hover { background:#1d4ed8; border-color:#1d4ed8; } html.fs-app-theme-dark .ob-arena-standings th,html.fs-app-theme-dark .ob-arena-standings td { border-color:var(--fs-app-border-soft); } html.fs-app-theme-dark .ob-arena-standings tbody tr.ob-arena-me { background:rgba(96,165,250,.10); } .ob-arena-guide-modal[hidden] { display:none!important; } .ob-arena-guide-modal { position:fixed; inset:0; z-index:2147482500; display:flex; align-items:center; justify-content:center; padding:max(14px,env(safe-area-inset-top)) 12px max(14px,env(safe-area-inset-bottom)); } .ob-arena-guide-modal__backdrop { position:absolute; inset:0; background:rgba(15,23,42,.58); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); } .ob-arena-guide-modal__dialog { position:relative; width:min(720px,100%); height:min(720px,calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); overflow:hidden; border:1px solid #dbe3ef; border-radius:16px; background:#fff; box-shadow:0 24px 70px rgba(15,23,42,.3); } .ob-arena-guide-modal__close { position:absolute; top:9px; right:9px; z-index:2; display:flex; width:38px; height:38px; align-items:center; justify-content:center; margin:0; padding:0 0 3px; border:1px solid #cbd5e1; border-radius:10px; background:rgba(255,255,255,.94); color:#334155; font:400 29px/1 Arial,sans-serif; cursor:pointer; box-shadow:0 2px 8px rgba(15,23,42,.12); } .ob-arena-guide-modal__frame { display:block; width:100%; height:100%; border:0; background:#fff; } body.ob-arena-guide-open { overflow:hidden!important; } html.fs-app-theme-dark .ob-arena-guide-modal__dialog { border-color:var(--fs-app-border); background:var(--fs-app-bg); } html.fs-app-theme-dark .ob-arena-guide-modal__close { border-color:var(--fs-app-border); background:rgba(30,41,59,.94); color:var(--fs-app-text); } html.fs-app-theme-dark .ob-arena-guide-modal__frame { background:var(--fs-app-bg); } @media(max-width:620px){.ob-arena-guide-modal{padding:max(10px,env(safe-area-inset-top)) 8px max(10px,env(safe-area-inset-bottom))}.ob-arena-guide-modal__dialog{height:calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));border-radius:14px}} @media(min-width:561px){.ob-arena-medalists{justify-content:flex-start;gap:10px}.ob-arena-medalist{flex:0 1 auto;font-size:14px}.ob-arena-medalist-medal{width:18px;height:18px;font-size:15px}} @media(max-width:560px){.ob-arena-medalists{gap:0}.ob-arena-medalist{max-width:none;min-height:20px;gap:2px;font-size:13px;line-height:1.25}.ob-arena-medalist .oc-flag{width:18px!important;height:14px!important}} @media(max-width:991px){.ob-arena-standings{font-size:16px}.ob-arena-photo-wrap,.ob-arena-photo-wrap .ob-arena-standing-photo{width:32px;height:32px}} @media(max-width:560px){.ob-arena-standings-wrap{overflow-x:hidden}.ob-arena-standings{min-width:0;max-width:100%;table-layout:auto}.ob-arena-standings col.rank{width:36px}.ob-arena-standings col.player{width:100%}.ob-arena-standings col.points,.ob-arena-standings col.score{width:1%}.ob-arena-standings th,.ob-arena-standings td{padding:5px 3px}.ob-arena-standings th:nth-child(n+3),.ob-arena-standings td:nth-child(n+3){padding-left:1px;padding-right:1px}.ob-arena-standings th:last-child,.ob-arena-standings td:last-child{padding-left:10px;padding-right:6px}.ob-arena-standings th{font-size:11px}.ob-arena-photo-wrap,.ob-arena-photo-wrap.ob-player-photo-trigger{margin-right:4px}.ob-arena-player-main{width:0}.ob-arena-player-name-line{overflow:hidden}.ob-arena-player-name{max-width:none;flex:0 1 auto;white-space:nowrap}.ob-arena-player-cell .oc-flag{width:20px!important;height:15px!important;margin-right:3px!important}.ob-arena-game-points,.ob-arena-total-score{white-space:nowrap}.ob-arena-game-points-seq{display:inline-flex;width:max-content;min-width:max-content;max-width:none;margin-left:0;flex-wrap:nowrap;overflow:visible;white-space:nowrap;font-size:12px}.ob-arena-perf{font-size:10px}.ob-arena-rank-medal{font-size:14px}.ob-arena-player-meta{font-size:14px}} @media(max-width:400px){.ob-arena-standings{font-size:15px}} /* 트레이닝(훈련) 설정 박스 — 게임하기(#obChooser) 박스와 동일한 외곽/폰트 */ #obTrainingBox { margin-top:10px; padding:12px; border:1px solid #d6deea; border-radius:10px; background:#f8fafc; box-sizing:border-box; max-width:100%; overflow-wrap:anywhere; } #obTrainingBox label { font-size:13px; margin-right:10px; } #obTrainingBox select { font-size:13px; padding:3px 6px; } #obTrainingBox .ob-match-options { display:flex; gap:10px 14px; justify-content:center; flex-wrap:wrap; align-items:center; } #obTrainingBox .ob-match-options label { display:inline-flex; align-items:center; gap:4px; margin-right:0; } #obTrainingBox .ob-match-start { display:flex; justify-content:center; margin-top:10px; } #obTrainingBox .ob-match-start .pz-btn { min-width:96px; } #obTrainingBox .ob-tr-moves-wrap { flex:1 1 220px; max-width:280px; } #obTrainingBox #obTrMoves { width:100%; height:30px; box-sizing:border-box; border:1px solid #cbd5e1; border-radius:6px; padding:0 8px; font:16px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; } #obTrainingBox #obTrMoves:focus { border-color:#2563eb; outline:none; box-shadow:0 0 0 3px rgba(37,99,235,.13); } #obTrainingBox .ob-tr-status { margin-top:8px; text-align:center; font-size:13px; font-weight:600; color:#334155; min-height:18px; } #obTrainingBox .ob-tr-status:empty { display:none; } #obTrainingBox .ob-tr-status.is-error { color:#b91c1c; } /* 안내문: 언어별 길이차(독일어·포르투갈어 등)로 박스를 넘치지 않게 — 긴 단어도 강제 줄바꿈 */ #obTrainingBox .ob-tr-note { margin-top:6px; max-width:100%; text-align:center; font-size:12.5px; line-height:1.5; color:#64748b; box-sizing:border-box; word-break:keep-all; overflow-wrap:anywhere; word-wrap:break-word; } #obTrainingBox .ob-tr-note p { margin:0; } #obTrainingBox .ob-tr-note p + p { margin-top:2px; } #obNote { font-size:14px; font-weight:600; color:#374151; margin-top:10px; text-align:center; } #obNote:empty { display:none; } /* 로비 조작부는 방 수와 무관하게 목록 제목 바로 아래에 고정한다. DOM 순서는 기존 JS/접근성 연결을 유지하고 flex order로 시각 순서만 조정한다. */ #obListView { display:flex; flex-direction:column; } /* 게임하기/트레이닝 조작부와 아래 '진행 중인 대국' 제목은 여유 있게 구분한다. .row 자체 여백과 합쳐 축소 전 약 15px 간격을 유지한다. */ /* 퍼즐 공용 패널 폭(380px)을 풀어 버튼 줄·옵션 상자를 위아래 아레나 카드·목록과 같은 폭으로 맞춘다(2026-10-09). */ /* 버튼 줄 위·아래 간격은 각 5px 줄였다(2026-10-10 사용자 요청: 10→5, 13→8). */ #obListView > #pzPanel { order:10; margin-top:5px; margin-bottom:8px; max-width:none; padding:0; } #obListView > .ob-list-head { order:20; margin-bottom:4px; } #obListView > #pzPanel > .row:first-child { margin-top:0; margin-bottom:0; } #obListView > #pzPanel > .row:first-child .pz-btns.center { margin-top:0 !important; } #obListView > #obRoomList { order:30; } #obListView > #obRoomEmpty { order:40; } /* 1열에서 옮겨 온 접속자 목록(2026-10-06, online.php 스크립트): 진행 중 대국 뒤·'대국(24시간)' 앞(35), 진행 중 대국이 없으면 '대국(24시간)' 제목 앞(15). 우측 카드 안에서는 묶음 자체가 배치에 영향이 없다. */ .ob-online-users-block { display:contents; } #obListView > .ob-online-users-block { display:block; order:35; margin-top:20px; } #obListView > .ob-online-users-block.is-before-rooms { order:15; margin-top:0; } /* 바로 아래 '대국(24시간)' 제목이 자기 위 여백(23px)을 가지므로 표 아래 여백은 뺀다. */ #obListView > .ob-online-users-block:not(.is-before-rooms) .ob-online-users-table-frame { margin-bottom:0; } /* 게스트 안내 바로 아래 '게임하기' 줄은 안내의 8px + 버튼줄 12px 이 겹쳐 20px 로 벌어져 보였다 → 8px 하나로. */ #obListView > #pzPanel > .pz-guest-notice + .row .pz-btns.center { margin-top:0 !important; } .pz-guest-notice { margin:0 auto 8px; max-width:640px; padding:10px 12px; border:1px solid #fde68a; border-radius:8px; background:#fffbeb; color:#92400e; font-size:13px; line-height:1.45; } .pz-rank-table tr.is-playing { background:#fff7ed; } /* 라이트 모드 행 교차 배경(index 위젯과 같은 #f9f9f9). 대국중 강조 행은 제외해 유지. */ #obOnlineUsersTable tbody tr:nth-child(even):not(.is-playing), #obLeaderboardTable tbody tr:nth-child(even):not(.is-playing), #obRoomUsers tbody tr:nth-child(even):not(.is-playing) { background-color:#f9f9f9; } #obOnlineUsersTable th, #obLeaderboardTable th { white-space:nowrap; word-break:normal; overflow-wrap:normal; } #obOnlineUsersTable td:first-child { text-align:left; } #obOnlineUsersTable th:first-child { text-align:center; } #obOnlineUsersTable td:first-child { padding-left:10px; } #obLeaderboardTable td:first-child, #obLeaderboardTable th:first-child { text-align:center; } #obLeaderboardTable td:nth-child(2) { text-align:left; padding-left:4px; } #obLeaderboardTable th:nth-child(2) { text-align:center; } #obOnlineUsersTable .pz-player-cell, #obOnlineUsersTable .pz-id-text, #obLeaderboardTable .pz-player-cell, #obLeaderboardTable .pz-id-text { text-align:left; } #obOnlineUsersTable .pz-player-cell { display:flex; align-items:center; min-width:0; width:100%; } #obLeaderboardTable .pz-player-cell { display:flex; align-items:center; min-width:0; width:100%; } #obOnlineUsersTable .pz-nick-tip { min-width:0; overflow:hidden; } #obLeaderboardTable .pz-nick-tip { min-width:0; overflow:hidden; } #obOnlineUsersTable .pz-id-text { display:flex; align-items:center; min-width:0; overflow:hidden; white-space:nowrap; } #obLeaderboardTable .pz-id-text { display:flex; align-items:center; min-width:0; overflow:hidden; white-space:nowrap; } #obOnlineUsersTable .pz-id-text [data-battle-user] { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #obLeaderboardTable .pz-id-text [data-battle-user] { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #obOnlineUsersTable .c-invite { width:46px; } #obOnlineUsersTable td.ob-invite-cell { width:46px; padding-left:6px; padding-right:8px; text-align:right; } /* 비공식 유저: 공용 규칙(_puzzle_panel_style)은 행 전체를 회색 처리하지만, 접속자 명단은 닉네임을 일반 색으로 두고 레이팅(pz-rating-unofficial)만 회색 유지. */ #obOnlineUsersTable[data-rank-mode="users"] tr.pz-row-unofficial, #obOnlineUsersTable[data-rank-mode="users"] tr.pz-row-unofficial .pz-player-cell, #obOnlineUsersTable[data-rank-mode="users"] tr.pz-row-unofficial .pz-id-text { color:inherit; } #obOnlineUsersTable tr.ob-bot-section-start td { border-top:1px solid #cbd5e1; } #obOnlineUsersTable[data-rank-mode="users"] .pz-id-text [data-battle-user] { color:#254EAD; } /* 접속자 명단만 공식/비공식 동일한 닉 색 */ #obOnlineUsersTable[data-rank-mode="users"] .pz-id-text [data-battle-user]:hover, #obOnlineUsersTable[data-rank-mode="users"] .pz-id-text [data-battle-user]:focus, #obLeaderboardTable .pz-id-text [data-battle-user]:hover, #obLeaderboardTable .pz-id-text [data-battle-user]:focus { color:#0d6efd; text-decoration:none; } /* 접속자 상태 닷(Rating 우측 별도 열) — 사이트 톤과 같은 tailwind 계열 색. 대국중 주황은 is-playing 행 배경(#fff7ed)과 동일 계열로 맞춤. */ /* 우측 컬럼들을 오른쪽으로 압축: 닉네임(c-id)이 남는 폭 전부, Rating/Status 는 고정폭 */ #obOnlineUsersTable col.c-id { width:auto; } #obOnlineUsersTable col.c-rt { width:56px; } #obOnlineUsersTable td.num, #obOnlineUsersTable th.num { text-align:right; } #obLeaderboardTable col.c-rank { width:42px; } #obLeaderboardTable col.c-id { width:auto; } #obLeaderboardTable col.c-rt { width:56px; } #obLeaderboardTable col.c-ld { width:58px; } #obLeaderboardTable[data-rendered-scope="weekly"] col.c-ld { width:80px; } #obLeaderboardTable .ob-leaderboard-wld { white-space:nowrap; font-variant-numeric:tabular-nums; } #obLeaderboardTable td.num, #obLeaderboardTable th.num { text-align:right; } #obLeaderboardTable .ob-leaderboard-rank { padding-left:3px; padding-right:3px; color:#64748b; font-variant-numeric:tabular-nums; } .ob-leaderboard-rank-medal { display:inline-flex; align-items:center; justify-content:center; font-size:16px; line-height:1; } #obOnlineUsersTable .c-pres { width:36px; } #obOnlineUsersTable td.ob-pres-cell { text-align:center; padding-left:6px; padding-right:6px; } .ob-pres-dot { display:inline-block; width:11px; height:11px; border-radius:50%; vertical-align:middle; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); } .ob-pres-online { background:#22c55e; } .ob-pres-puzzle { background:#8b5cf6; } .ob-pres-ingame { background:#f97316; } .ob-pres-away { background:#9ca3af; } .ob-direct-invite-btn, .ob-stealth-toggle-btn { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; padding:0; border:1px solid #cbd5e1; border-radius:7px; background:#fff; color:#2563eb; line-height:1; cursor:pointer; flex:0 0 auto; } .ob-direct-invite-btn svg, .ob-stealth-toggle-btn svg { width:16px; height:16px; display:block; } .ob-direct-invite-btn:hover { background:#eff6ff; border-color:#93c5fd; } .ob-direct-invite-btn:active { background:#dbeafe; } .ob-direct-invite-btn:disabled { visibility:hidden; pointer-events:none; } /* 오프라인 대국 신청(2026-10-10): 접속자 표 머리줄 마지막 칸. 버튼은 행의 .ob-direct-invite-btn 그대로, 칸 여백만 행 칸과 맞춘다. 목록 팝업은 room-invite.css 재사용. */ #obOnlineUsersTable th.ob-invite-head { padding:3px 8px 3px 6px; text-align:right; vertical-align:middle; } #obOnlineUsersTable th.ob-invite-head .ob-direct-invite-btn { vertical-align:middle; } /* 일반 대국 신청(파랑)과 구분: 아이콘은 로즈 계열, 테두리는 기존 공용 버튼 색을 유지한다. */ .ob-direct-invite-btn.ob-offline-challenge-btn { color:#be185d; } .ob-direct-invite-btn.ob-offline-challenge-btn:hover { background:#fdf2f8; } .ob-direct-invite-btn.ob-offline-challenge-btn:active { background:#fce7f3; } .ococ-search { flex-shrink:0; width:100%; box-sizing:border-box; min-height:38px; padding:6px 10px; border:1px solid #cbd5e1; border-radius:8px; background:#fff; color:inherit; font:inherit; font-size:15px; } html.fs-app-theme-dark .ococ-search { background:var(--fs-app-surface-2); border-color:var(--fs-app-border); color:var(--fs-app-text); } /* 유저 기록 팝업(.mg-user-popup z 12000~12050)이 이 목록 위에 뜨도록 한 칸 아래에 둔다. 신청 창(.ob-challenge-backdrop 13000)은 목록을 닫고 연다. */ .ocri-backdrop.ococ-backdrop { z-index:11990; } .ocri-dialog .ocri-list .ococ-more { display:block; width:100%; min-height:38px; margin:8px 0 2px; font-size:14px; } .ocri-dialog .ococ-foot { display:block; color:#64748b; font-size:13px; line-height:1.45; } html.fs-app-theme-dark .ocri-dialog .ococ-foot { color:var(--fs-app-muted); } .ob-stealth-toggle-btn:hover { background:#f0fdfa; border-color:#5eead4; color:#0f766e; } .ob-stealth-toggle-btn[aria-pressed="true"] { background:#0f766e; border-color:#0f766e; color:#fff; } .ob-stealth-toggle-btn[aria-pressed="true"]:hover { background:#115e59; border-color:#115e59; } .ob-stealth-toggle-btn:disabled { opacity:.55; pointer-events:none; } .ob-player-photo-trigger { display:inline-flex; align-items:center; flex:0 0 auto; margin-right:5px; line-height:1; cursor:pointer; } .ob-player-photo-trigger .pz-photo { margin-right:0; } .ob-player-photo-tooltip { position:fixed; display:none; pointer-events:none; z-index:99999; padding:4px; background:#fff; border:1px solid #ddd; border-radius:6px; box-shadow:0 2px 8px rgba(0,0,0,.2); } .ob-player-photo-tooltip img { width:100px; height:100px; object-fit:cover; display:block; border-radius:4px; } .ob-player-photo-tooltip img[src*="/flipsight/image/bot/"] { background:#eee; } .ob-player-photo-tooltip img[src*="/flipsight/image/bot/26.svg"] { background:#64748b; } @media (max-width:991px) { #obOnlineUsersTable { font-size:15px; } #obLeaderboardTable { font-size:16px; } #obOnlineUsersTable col.c-rt, #obLeaderboardTable col.c-rt { width:64px; } /* 주간 WLD를 압축해 Rating을 오른쪽으로 옮기고 닉네임에 남는 폭을 준다. */ #obLeaderboardTable col.c-ld { width:66px; } #obLeaderboardTable[data-rendered-scope="weekly"] col.c-ld { width:88px; } #obOnlineUsersTable .pz-photo, #obLeaderboardTable .pz-photo { width:18px; height:18px; } .ob-leaderboard-table-box { --ob-leaderboard-row-height:32px; } .ob-online-users-table-box { --ob-online-users-row-height:38px; } } @media (max-width:400px) { #obOnlineUsersTable, #obLeaderboardTable { font-size:15px; } #obOnlineUsersTable th, #obOnlineUsersTable td, #obLeaderboardTable th, #obLeaderboardTable td { padding-top:4px; padding-bottom:4px; } } @media (min-width:992px) { #obOnlineUsersTable[data-rank-mode="users"] td { padding-top:3px; padding-bottom:3px; } #obOnlineUsersTable[data-rank-mode="users"] .c-pres { width:34px; } #obOnlineUsersTable[data-rank-mode="users"] .c-invite, #obOnlineUsersTable[data-rank-mode="users"] td.ob-invite-cell { width:42px; } #obOnlineUsersTable[data-rank-mode="users"] .ob-pres-dot { width:10px; height:10px; } #obOnlineUsersTable[data-rank-mode="users"] .ob-direct-invite-btn { width:28px; height:28px; border-radius:6px; } #obOnlineUsersTable[data-rank-mode="users"] .ob-stealth-toggle-btn { width:28px; height:28px; border-radius:6px; } #obOnlineUsersTable[data-rank-mode="users"] .ob-direct-invite-btn svg { width:14px; height:14px; } #obOnlineUsersTable[data-rank-mode="users"] .ob-stealth-toggle-btn svg { width:14px; height:14px; } } .ob-challenge-backdrop { position:fixed; inset:0; z-index:13000; display:flex; align-items:center; justify-content:center; box-sizing:border-box; padding:20px; background:rgba(15,23,42,.45); overscroll-behavior:contain; } .ob-challenge-backdrop[hidden] { display:none; } .ob-challenge-modal { width:min(360px,100%); padding:16px; border-radius:10px; background:#fff; box-shadow:0 20px 60px rgba(15,23,42,.3); } .ob-challenge-modal h3 { margin:0 0 14px; text-align:center; font-size:18px; } .ob-challenge-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .ob-challenge-options label { display:flex; flex-direction:column; gap:5px; color:#475569; font-size:12px; font-weight:700; } .ob-challenge-options select { width:100%; min-height:38px; border:1px solid #cbd5e1; border-radius:7px; background:#fff; padding:5px 8px; font:inherit; color:#111827; } .ob-challenge-puzzle-note { margin-top:12px; padding:9px 10px; border:1px solid #bfdbfe; border-radius:7px; background:#eff6ff; color:#1e3a8a; font-size:12px; line-height:1.45; text-align:left; } .ob-challenge-puzzle-note[hidden] { display:none; } .ob-challenge-actions { display:flex; justify-content:center; gap:8px; margin-top:16px; } .ob-challenge-actions button { min-width:88px; min-height:38px; border:1px solid #cbd5e1; border-radius:8px; background:#fff; font-weight:800; cursor:pointer; } .ob-challenge-actions .primary { border-color:#2563eb; background:#2563eb; color:#fff; } #obChallengeNotice,#obArenaNotice { position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 18px); z-index:1450; transform:translateX(-50%); width:min(460px,calc(100vw - 24px)); padding:12px; border:1px solid #bfdbfe; border-radius:10px; background:#fff; box-shadow:0 12px 36px rgba(15,23,42,.24); } #obChallengeNotice[hidden],#obArenaNotice[hidden] { display:none; } #obChallengeNoticeText,#obArenaNoticeText { color:#1f2937; font-size:14px; line-height:1.45; text-align:center; } #obChallengeNoticeActions,#obArenaNoticeActions { display:flex; justify-content:center; gap:8px; margin-top:10px; } #obChallengeNoticeActions button,#obArenaNoticeActions button { min-height:34px; padding:0 14px; border:1px solid #cbd5e1; border-radius:7px; background:#fff; color:#111827; font-weight:800; cursor:pointer; } #obChallengeNoticeActions .primary,#obArenaNoticeActions .primary { border-color:#2563eb; background:#2563eb; color:#fff; } html.fs-app-theme-dark #obChallengeNotice,html.fs-app-theme-dark #obArenaNotice { background:var(--fs-app-surface); border-color:var(--fs-app-border); box-shadow:0 12px 36px rgba(0,0,0,.42); } html.fs-app-theme-dark #obChallengeNoticeText,html.fs-app-theme-dark #obArenaNoticeText { color:var(--fs-app-text); } html.fs-app-theme-dark #obChallengeNoticeActions button,html.fs-app-theme-dark #obArenaNoticeActions button { background:var(--fs-app-surface-2); border-color:var(--fs-app-border); color:var(--fs-app-text); } html.fs-app-theme-dark #obChallengeNoticeActions .primary,html.fs-app-theme-dark #obArenaNoticeActions .primary { background:#2563eb; border-color:#2563eb; color:#fff; } /* 게임방(대국·관전)에서는 보드를 가리지 않게 보드 아래 버튼 줄 밑에 붙인다(2026-10-11, online.page.js placeObArenaNotice). */ #obArenaNotice.ob-arena-notice-inline { position:static; left:auto; bottom:auto; transform:none; z-index:auto; width:auto; max-width:460px; margin:8px auto 0; box-shadow:none; box-sizing:border-box; } html.fs-app-theme-dark #obArenaNotice.ob-arena-notice-inline { box-shadow:none; } .ob-online-users-head { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:29px; flex-wrap:nowrap; } .ob-online-users-head .card-title { flex:1 1 1px; min-width:1px; margin-bottom:0; overflow:hidden; white-space:nowrap; } .ob-leaderboard-head { min-height:29px; } .pz-leaderboard-card .ob-leaderboard-head { margin-bottom:5px; } /* 주간·총 탭 아래 여백(안내 문구 제거 후, 2026-10-09) */ .ob-leaderboard-controls { display:inline-flex; min-width:0; align-items:center; justify-content:flex-end; flex-wrap:nowrap; gap:5px 7px; flex:0 0 auto; margin-left:auto; } .ob-leaderboard-tabs { display:inline-flex; align-items:center; padding:2px; border:1px solid #d1d5db; border-radius:8px; background:#f8fafc; } .ob-leaderboard-tab { min-height:23px; padding:2px 8px; border:0; border-radius:6px; background:transparent; color:#64748b; font-size:12px; font-weight:800; line-height:1.25; cursor:pointer; white-space:nowrap; } .ob-leaderboard-tab:hover { color:#111827; } .ob-leaderboard-tab.is-active { background:#111827; color:#fff; } /* 앱 더보기·대회 목록과 같은 icon_new.gif. 텍스트 N을 다시 그리면 화면마다 모양이 달라진다. */ .ob-event-new-badge { position:relative; top:-1px; display:inline-block; width:12px!important; min-width:12px!important; max-width:12px!important; height:12px!important; min-height:12px!important; max-height:12px!important; margin-left:2px; padding:0!important; border:0!important; vertical-align:middle; object-fit:contain; } .ob-event-new-badge[hidden] { display:none!important; } .ob-arena-heading-main .ob-tn-new-badge { flex:0 0 auto; margin-left:0; } /* 아레나/유저 토너먼트 전환 — 리더보드 주간·총 토글과 같은 룩앤필을 재사용한다(클래스 공유). */ .ob-event-controls { margin-left:auto; } /* 아래 빠른 매칭/방 만들기 버튼과의 간격을 데일리 아레나 카드(.ob-arena-card margin:0 0 12px)와 맞춘다. */ .ob-tournament-panel { margin:0 0 12px; } .ob-tournament-panel[hidden] { display:none!important; } .ob-tournament-toolbar { display:flex; align-items:center; gap:8px; margin:0 0 8px; } /* .pz-btn 은 #pzPanel 하위로만 정의된 클래스라 이 영역에서는 스타일이 붙지 않는다 (2026-08-18: 만들기·취소 버튼이 브라우저 기본 사각 버튼으로 보였다). 전용 클래스로 정의. */ .ob-tn-btn { display:inline-flex; align-items:center; justify-content:center; min-height:30px; padding:3px 13px; border:1px solid #d1d5db; border-radius:8px; background:#fff; color:#334155; font-family:inherit; font-size:14px; font-weight:700; line-height:1.25; white-space:nowrap; cursor:pointer; } .ob-tn-btn:hover:not(:disabled) { border-color:#9aa5b1; color:#111827; } .ob-tn-btn.primary { border-color:#2563eb; background:#2563eb; color:#fff; } .ob-tn-btn.primary:hover:not(:disabled) { border-color:#1d4ed8; background:#1d4ed8; color:#fff; } .ob-tn-btn:disabled { opacity:.5; cursor:not-allowed; } html.fs-app-theme-dark .ob-tn-btn { border-color:var(--fs-app-border,#334155); background:var(--fs-app-surface,#151e2d); color:var(--fs-app-text,#f8fafc); } html.fs-app-theme-dark .ob-tn-btn.primary { border-color:#2563eb; background:#2563eb; color:#fff; } .ob-tn-sim-format { min-height:30px; padding:0 6px; border:1px solid #cbd5e1; border-radius:8px; background:#fff; color:#334155; font-size:13px; font-family:inherit; } html.fs-app-theme-dark .ob-tn-sim-format { border-color:var(--fs-app-border,#334155); background:var(--fs-app-surface,#151e2d); color:var(--fs-app-text,#f8fafc); } .ob-tournament-all { margin-left:auto; color:#2563eb; font-size:13px; font-weight:700; text-decoration:none; } .ob-tournament-list { display:flex; flex-direction:column; } .ob-tournament-list > :last-child { margin-bottom:0; } /* 카드는 아레나 카드(.ob-arena-card) 스타일을 그대로 쓴다 — 링크 색만 상속시킨다. */ .ob-tn-card,.ob-tn-card:link,.ob-tn-card:visited { display:block; color:inherit; text-decoration:none; } .ob-tn-card .ob-arena-badge + .ob-arena-badge { margin-left:4px; } /* 개설자 표기 줄은 강조 대상이 아니다 — 아레나 상태 줄의 굵기만 낮춘다. */ .ob-tn-card .ob-arena-status { font-weight:500; } /* 상태 문장은 아레나 상태 줄(#obArenaStatus)의 원래 값을 그대로 쓴다 — 카드 부제 줄만 500 으로 낮춘 것이라, 상태 문장까지 낮추면 아레나 창과 굵기가 달라진다(2026-08-19). */ .ob-tn-card .ob-arena-status.ob-tn-statusline { font-weight:700; } .ob-tn-card-lock { margin-left:4px; } /* 시뮬(가상 유저) 대회 배지 — 상태 칩보다 약하게, 제목 옆에서 구분만 되게. */ .ob-tn-card-sim { margin-left:4px; padding:1px 5px; border-radius:6px; font-size:11px; font-weight:700; background:var(--oc-chip-bg,#eef1f4); color:var(--oc-muted,#6b7684); vertical-align:middle; } .ob-tournament-empty { padding:12px; border:1px dashed #cbd5e1; border-radius:10px; color:#64748b; font-size:13px; text-align:center; } .ob-tournament-modal__dialog { position:relative; width:min(560px,94vw); max-height:88vh; overflow:auto; padding:14px; border-radius:12px; background:#fff; box-shadow:0 18px 48px rgba(15,23,42,.28); } .ob-tournament-modal__head { display:flex; align-items:center; justify-content:space-between; margin:0 0 10px; font-size:16px; } /* 아레나 안내 모달의 닫기 버튼(.ob-arena-guide-modal__close)은 iframe 위에 absolute 로 얹는 용도라 top/right 오프셋과 하단 padding 이 들어 있다. 헤더 flex 안에 그대로 쓰면 글리프가 위로 밀려 비대칭으로 보인다(2026-08-18) → 전용 클래스로 정중앙 정렬한다. */ .ob-tn-close { display:inline-flex; width:32px; height:32px; align-items:center; justify-content:center; flex:0 0 auto; margin:0; padding:0; border:1px solid #cbd5e1; border-radius:8px; background:#fff; color:#334155; font:400 22px/1 Arial,sans-serif; cursor:pointer; } .ob-tn-close:hover { border-color:#9aa5b1; color:#111827; } html.fs-app-theme-dark .ob-tn-close { border-color:var(--fs-app-border,#334155); background:var(--fs-app-surface,#151e2d); color:var(--fs-app-text,#f8fafc); } .ob-tournament-form { display:grid; grid-template-columns:1fr 1fr; gap:9px; } .ob-tn-field { display:flex; flex-direction:column; gap:4px; min-width:0; color:#64748b; font-size:12px; font-weight:700; } .ob-tn-field--wide { grid-column:1/-1; } .ob-tn-field[hidden] { display:none!important; } .ob-tn-field input, .ob-tn-field select { min-height:34px; padding:0 8px; border:1px solid #cbd5e1; border-radius:8px; background:#fff; color:#111827; font-size:14px; font-family:inherit; } .ob-tn-hint { grid-column:1/-1; margin:2px 0 0; color:#64748b; font-size:12px; line-height:1.5; } .ob-tn-error { grid-column:1/-1; padding:7px 9px; border-radius:8px; background:#fef2f2; color:#b91c1c; font-size:12.5px; font-weight:700; } .ob-tn-error[hidden] { display:none!important; } .ob-tn-actions { grid-column:1/-1; display:flex; justify-content:flex-end; gap:8px; margin-top:4px; } @media(max-width:560px){ .ob-tournament-form { grid-template-columns:1fr; } } html.fs-app-theme-dark .ob-tn-card { border-color:var(--fs-app-border,#334155); background:var(--fs-app-surface,#151e2d); } html.fs-app-theme-dark .ob-tn-card-title { color:var(--fs-app-text,#f8fafc); } html.fs-app-theme-dark .ob-tn-card-meta, html.fs-app-theme-dark .ob-tn-card-sub { color:var(--fs-app-muted,#a8b3c5); } html.fs-app-theme-dark .ob-tournament-modal__dialog { background:var(--fs-app-surface,#151e2d); color:var(--fs-app-text,#f8fafc); } html.fs-app-theme-dark .ob-tn-field input, html.fs-app-theme-dark .ob-tn-field select { border-color:var(--fs-app-border,#334155); background:var(--fs-app-bg,#0b121c); color:var(--fs-app-text,#f8fafc); } html.fs-app-theme-dark .ob-tournament-empty { border-color:var(--fs-app-border,#334155); color:var(--fs-app-muted,#a8b3c5); } .pz-bot-badge { font-size:10px; font-weight:700; line-height:1.2; padding:1px 5px; border-radius:5px; background:#eef2ff; color:#3730a3; margin-left:4px; vertical-align:middle; } #pzMyRecordStats b { color:#111827; } /* 방(room) 로비 */ .ob-list-head { display:flex; align-items:center; justify-content:space-between; min-height:26px; margin-bottom:8px; } .ob-list-head h5 { font-size:1.1rem; margin:0; } .ob-list-recent-btn { flex:0 0 auto; min-height:28px; padding:3px 11px; border:1px solid #d1d5db; border-radius:8px; background:#fff; color:#374151; font-size:12px; font-weight:800; line-height:1.4; cursor:pointer; white-space:nowrap; } .ob-list-recent-btn:hover, .ob-list-recent-btn:focus-visible { background:#f1f5f9; border-color:#94a3b8; } #obRoomList { display:flex; flex-direction:column; gap:5px; } .ob-room-card { display:flex; flex-direction:column; justify-content:center; gap:4px; padding:6px 12px; border:1px solid #d6deea; border-radius:10px; background:#fff; cursor:pointer; transition:background .12s,border-color .12s; } .ob-room-card:hover { background:#f1f5f9; border-color:#94a3b8; } body.ob-room-lobby #obRoomList .ob-room-card { cursor:default; } body.ob-room-lobby #obRoomList .ob-room-card:hover { background:#fff; border-color:#d6deea; } body.ob-room-lobby #obRoomList .ob-room-card.is-current-room { cursor:pointer; border-color:#2563eb; background:#eff6ff; } body.ob-room-lobby #obRoomList .ob-room-card.is-current-room:hover { background:#dbeafe; border-color:#1d4ed8; } .ob-rc-row { display:flex; min-height:16px; min-width:0; align-items:center; justify-content:space-between; gap:8px; } .ob-rc-row .ob-room-side { flex:1 1 0; } .ob-rc-roomline,.ob-rc-gameline { display:flex; flex:0 0 auto; min-width:0; max-width:100%; align-items:center; justify-content:flex-end; gap:4px; white-space:nowrap; } .ob-rc-gameline { gap:3px; } /* 좁은 화면 3줄 카드의 맨 위 줄(2026-10-10). 넓은 화면은 숨긴다. 같은 배지를 넓은 화면용(.ob-rc-desk)·좁은 화면용(.ob-rc-mob)으로 한 벌씩 두고 한쪽만 보인다(묶음은 display:contents 라 줄 안 간격은 그대로). */ .ob-rc-top, .ob-rc-mob { display:none; } .ob-rc-desk { display:contents; } .ob-room-watchers { display:inline-flex; align-items:center; gap:3px; margin-left:0; flex:0 0 auto; color:#374151; font-size:11px; white-space:nowrap; } .ob-room-side { display:flex; width:100%; min-width:0; align-items:center; gap:5px; overflow:hidden; } .ob-room-side .ob-player-photo-trigger { margin-right:0; } .ob-room-side .pz-photo { width:16px; height:16px; margin-right:0; flex:0 0 auto; } .ob-room-player { display:inline-flex; align-items:center; min-width:0; gap:4px; flex:0 1 auto; } .ob-room-player .oc-flag { margin-right:0!important; } .ob-room-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:400; line-height:1.2; color:#254EAD; } .ob-room-name[data-battle-user]:hover,.ob-room-name[data-battle-user]:focus-visible { color:#0d6efd; } .ob-room-side-waiting { overflow:visible; } .ob-room-side-waiting .ob-room-name { min-width:0; } #obRoomList .ob-room-enter { display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; box-sizing:border-box; min-width:0; min-height:0; height:16px; margin:0; padding:0 7px; border:1px solid #0f766e; border-radius:6px; background:#0f766e; color:#fff; font-family:inherit; font-size:11px; font-weight:700; line-height:1; white-space:nowrap; cursor:pointer; } #obRoomList .ob-room-enter:hover { border-color:#115e59; background:#115e59; } #obRoomList .ob-room-enter:focus-visible { outline:2px solid #0f766e; outline-offset:2px; } html.fs-app-theme-dark #obRoomList .ob-room-enter:focus-visible { outline-color:#5eead4; } #obRoomList .ob-room-enter:active { border-color:#134e4a; background:#134e4a; } /* 방 안에서 연 로비는 다른 방으로 이동하지 않는 기존 정책을 따라 입장 유도를 숨긴다. */ body.ob-room-lobby #obRoomList .ob-room-enter { display:none; } .ob-room-player .ob-room-name { min-width:0; } .ob-room-player .ocpv-verified-badge { margin-left:0!important; transform:none!important; align-self:center; } .ob-room-player .pz-bot-badge { margin-left:0; align-self:center; } /* 세로 중앙정렬 보강: 국기·닉·인증 모든 자식 중앙 + 국기 img block(inline baseline 여백 제거) */ .ob-room-player > * { align-self:center; } .ob-room-player .oc-flag { display:block; } .ob-rt { font-size:14px; line-height:1.2; flex:0 0 auto; } /* 리더보드와 동일(크기 14px, weight 는 내부 pz-rt 450/비공식 일반) */ .ob-score { font:13px/1 ui-monospace,Menlo,Consolas,monospace; font-weight:700; color:#111; flex:0 0 auto; padding:0 4px; } .ob-badge { font-size:10px; font-weight:700; line-height:1.2; padding:1px 6px; border-radius:6px; flex:0 0 auto; } .ob-rc-gameline .ob-badge, .ob-rc-top .ob-badge, .ob-recent-fallback-meta-top .ob-badge, .ob-recent-fallback-meta-top .pzh-online-badge { display:inline-flex; align-items:center; box-sizing:border-box; height:14px; min-height:14px; } .ob-badge-playing { background:#fef3c7; color:#92400e; } /* 종료·훈련·아레나·빠른·종류 배지 색은 여기서 정하지 않는다 — 라이트는 puzzle-history-popup.css, 다크는 app-theme.css 한 곳. 같은 값을 여기 또 두면 화면마다 다시 갈라진다(2026-09-19). */ .ob-badge-id { background:#f3f4f6; color:#6b7280; font-variant-numeric:tabular-nums; } .ob-badge-moves { background:transparent; color:#6b7280; padding-left:0; padding-right:2px; font-weight:600; } /* 진행 중 수(방 번호 왼쪽) */ #obRoomEmpty, .ob-room-load-state { text-align:center; color:#9ca3af; font-size:13px; padding:24px 0; } .ob-room-load-state { visibility:hidden; } /* 400ms 넘게 걸릴 때만 JS 가 .show 부여(빠른 로딩 깜빡임 방지) */ .ob-room-load-state.show { visibility:visible; } #ocInlineWrap { position:relative; min-height:425px; } /* iOS 네이티브 WKWebView: opacity 전환 직후 고정 오버레이(Start 팝업)가 합성되면 iframe 레이어가 드롭되고 다크 모드에서 보드가 사라질 수 있어 앱 셸에서만 별도 compositor 레이어를 유지한다. 일반 Safari까지 translateZ(0)를 적용하면 iframe 전체가 낮은 해상도의 한 장으로 고정되어 보드·돌·선수 헤더가 함께 흐려진다. */ #ocInlineWrap #ocviewerFrame { transition:opacity .12s; color-scheme:light dark; } html.fs-embed #ocInlineWrap #ocviewerFrame { transform:translateZ(0); } #ocInlineWrap.ob-loading #ocviewerFrame { opacity:0; } @media (max-width:575.98px) { .ob-room-name,.ob-rt { font-size:15px; } #obRoomList .ob-room-enter { height:18px; font-size:12px; } .ob-rc-row { gap:6px; } /* 카드 안쪽 여백도 대국 결과 카드 좁은 화면(.ob-recent-fallback-row 4px 8px)과 같게(2026-10-10). */ .ob-room-card { padding:4px 8px; } /* 대국 결과 카드(online.php 의 .ob-recent-fallback-meta-info 좁은 화면)와 같은 위 줄: 배지 10px·높이 14px, 아래 선수 줄과 2px(카드 줄 간격 4px − 2px). 오른쪽은 방 번호, 진행 수는 흑 줄·관전 수는 백 줄 오른쪽(.ob-rc-mob, 2026-10-11). */ .ob-rc-top { display:flex; align-items:center; justify-content:space-between; gap:6px; min-width:0; line-height:1; margin-bottom:-2px; } /* 오른쪽 정렬일 때 끝(종류 배지)이 왼쪽 끝에 오도록 순서를 뒤집는다(2026-10-10). 결과 카드도 같다. */ .ob-rc-top-badges { display:flex; flex-direction:row-reverse; justify-content:flex-end; align-items:center; min-width:0; gap:3px; } .ob-rc-desk { display:none; } .ob-rc-mob { display:contents; } .ob-room-name,.ob-rt { line-height:1.15; } /* 대국 결과 카드 좁은 화면 이름·레이팅(15px, 1.15)과 같은 줄 높이(2026-10-10) */ #obBoardView #ocInlineWrap { width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); } #obBoardView #ocInlineWrap #ocviewerFrame { width:100vw !important; max-width:100vw !important; } #obBoardView .ob-board-actions { /* 폰: 버튼 영역도 보드처럼 100vw 풀블리드로 매칭(380px 캡·가운데정렬 해제) */ width:100vw; max-width:none; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); } } /* 576~991(태블릿): 보드판은 가로 전체의 80% — 채팅창·버튼 컨트롤도 같은 폭으로 맞춰 가운데 정렬 */ @media (min-width:576px) and (max-width:991.98px) { #obBoardView #ocInlineWrap #ocviewerFrame { width:80% !important; max-width:80% !important; } #obBoardView .ob-board-actions, #obBoardView #obRoomChat { max-width:80% !important; /* 버튼 영역·채팅 패널을 보드(80%)에 맞춰 가운데 정렬 */ } } /* iPad 앱의 단일열 태블릿 구간에서만 보드를 컬럼 폭까지 키우되 제목줄·버튼을 포함해 세로 화면을 넘지 않게 contain한다. 992px 이상 PC 2열 레이아웃은 기존 자연 크기를 유지하고 이 보정을 전혀 적용하지 않는다. */ @media (min-width:576px) and (max-width:991.98px) { html.fs-embed #obBoardView #ocInlineWrap #ocviewerFrame { width:min(100%, var(--ob-ipad-board-fit-width, calc(89.4118vh - 80.4706px - var(--ob-board-chat-fit-reserve, 0px)))) !important; max-width:100% !important; } html.fs-embed #obBoardView .ob-board-actions, html.fs-embed #obBoardView #obRoomChat { width:100%; max-width:min(100%, var(--ob-ipad-board-fit-width, calc(89.4118vh - 80.4706px - var(--ob-board-chat-fit-reserve, 0px)))) !important; } } /* (대국방 ≥992: 보드 width:100% 는 대국방 레이아웃에서 컬럼을 넘어 우측 패널을 뚫으므로 적용하지 않는다. 대국방 보드는 자기 영역의 기존 자연 크기 유지.) */ /* 로딩 중(보드 준비 전) 스피너 — 빈 보드뷰가 "대기실"처럼 보이지 않게 클릭 즉시 피드백 */ #obBoardLoading { display:none; } #ocInlineWrap.ob-loading #obBoardLoading { display:block; position:absolute; top:50%; left:50%; width:34px; height:34px; margin:-17px 0 0 -17px; border:3px solid rgba(0,0,0,.14); border-top-color:#3b82f6; border-radius:50%; animation:obBoardSpin .7s linear infinite; } @keyframes obBoardSpin { to { transform:rotate(360deg); } } /* 게임방 진입 가림(html.ob-entry-hold, 2026-10-05). 방 주소 진입은 online.php 머리의 인라인 규칙이 첫 페인트부터 걸고, 로비 카드 클릭은 같은 클래스를 이 파일 규칙으로 쓴다. showBoard() 가 떼며 늦으면 4초 뒤 보인다. */ html.ob-entry-hold body { visibility:hidden; animation:obEntryReveal 0s 4s forwards; } @keyframes obEntryReveal { to { visibility:visible; } } html.ob-entry-hold::after { content:""; position:fixed; left:50%; top:45%; width:34px; height:34px; margin:-17px 0 0 -17px; border:3px solid #d1d5db; border-top-color:#2563eb; border-radius:50%; animation:obEntrySpin .8s linear infinite; } @keyframes obEntrySpin { to { transform:rotate(360deg); } } /* 게임 페이지로 넘어가는 동안의 즉시 반응(2026-10-07): 누른 화면을 살짝 덮고 진입 가림과 같은 스피너를 띄운다(online.page.js showGamePageOpening). */ .ob-game-opening { position:fixed; inset:0; z-index:2147483000; background:rgba(255,255,255,.35); } .ob-game-opening[hidden] { display:none; } .ob-game-opening::after { content:""; position:fixed; left:50%; top:45%; width:34px; height:34px; margin:-17px 0 0 -17px; border:3px solid #d1d5db; border-top-color:#2563eb; border-radius:50%; animation:obEntrySpin .8s linear infinite; } html.fs-app-theme-dark .ob-game-opening { background:rgba(15,23,42,.35); } /* 결과 토스트: 보드 중앙에 유지 */ #obBoardView #pzResult { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:3; } #pzResult.ob-result-lobby { position:fixed; left:50%; top:50%; transform:translate(-50%, -50%); z-index:10020; } #pzResult.correct, #pzResult.near, #pzResult.wrong { color:#fff; } #pzResult.pz-hide { display:none; } /* 착석 후 시작 전: 보드 중앙 안내(결과 오버레이 #pzResult z-index:3 보다 아래) */ #obBoardView #obStartPrompt { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:2; box-sizing:border-box; max-width:calc(100% - 24px); padding:8px 18px; text-align:center; font-size:14px; font-weight:600; line-height:1.35; color:#fff; background:rgba(17,24,39,.82); border-radius:6px; box-shadow:0 8px 24px rgba(15,23,42,.22); pointer-events:none; white-space:nowrap; } #obBoardView #obStartPrompt.pz-hide { display:none; } #obBoardView #obReadyCountdownToast { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:4; box-sizing:border-box; width:max-content; max-width:calc(100% - 24px); padding:10px 18px; text-align:center; font-size:14px; font-weight:700; line-height:1.45; color:#fff; background:rgba(17,24,39,.92); border-radius:10px; box-shadow:0 8px 28px rgba(15,23,42,.3); pointer-events:none; white-space:pre-line; } #obBoardView #obReadyCountdownToast.pz-hide { display:none; } #pzResult #pzDelta { display:block; } /* 레이팅 변화는 줄 내려서 표시 */ #pzResultReadyCountdown { margin-top:calc(7px * var(--ob-rs, 1)); padding-top:calc(6px * var(--ob-rs, 1)); border-top:1px solid rgba(255,255,255,.18); color:#fff; font-size:calc(13px * var(--ob-rs, 1)); font-weight:700; line-height:1.4; white-space:pre-line; text-align:center; /* 방 종료·재대국 준비 카운트다운은 결과창 가운데(2026-10-12 사용자 지시) */ } #pzResultReadyCountdown.pz-hide { display:none; } #pzResult .delta-pos { color:#4ade80; font-weight:400; } #pzResult .delta-neg { color:#f87171; font-weight:400; } #pzResult .ob-result-deltas { display:flex; flex-direction:column; gap:calc(2px * var(--ob-rs, 1)); align-items:center; } #pzResult .ob-result-delta-line { white-space:nowrap; } #pzResult small { color:rgba(255,255,255,.82); } #pzResultActions { display:block; } #pzResultActions.pz-hide, #pzResultPlayers.pz-hide, #pzResultStores.pz-hide { display:none; } #pzResult .ob-result-rating-arrow { padding:0 2px; color:rgba(255,255,255,.55); } #pzResult .ob-result-rating.is-up .ob-result-rating-arrow, #pzResult .ob-result-rating.is-down .ob-result-rating-arrow { color:inherit; } #pzResult .ob-result-practice { margin-left:5px; color:rgba(255,255,255,.65); font-size:11px; } #obResultShareMenu { position:fixed; z-index:10060; width:max-content; min-width:160px; max-width:calc(100vw - 16px); padding:6px 0; overflow:hidden; border-radius:10px; background:#fff; color:#1f2937; box-shadow:0 4px 14px rgba(0,0,0,.24); } #obResultShareMenu.pz-hide { display:none; } #obResultShareMenu .ob-result-share-item { display:flex; align-items:center; gap:8px; width:100%; padding:10px 16px; border:0; background:transparent; color:#1f2937; font-size:15px; font-weight:600; line-height:1.4; text-align:left; white-space:nowrap; cursor:pointer; } #obResultShareMenu .ob-result-share-item + .ob-result-share-item { border-top:1px solid #e5e7eb; } #obResultShareMenu .ob-result-share-item:hover { background:#f9fafb; } #obResultShareMenu .ob-result-share-item:disabled { opacity:.5; cursor:wait; } #obResultShareMenu .ob-result-share-icon { width:18px; height:18px; flex:0 0 auto; color:#374151; } #obBoardView .pz-btns { display:flex; gap:6px; justify-content:center; } #obBoardView .ob-board-actions { display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between; gap:6px 8px; max-width:380px; /* 버튼 영역을 보드 폭에 맞춤: ≥992 = 보드 자연폭(≈380px). 태블릿=80%, 폰=100vw 는 아래 브레이크포인트에서 보드와 동일하게. */ margin:10px auto 0; /* 보드처럼 가운데 정렬 */ min-width:0; } #obBoardView .pz-btn { padding:4px 14px; border:1px solid #d1d5db; border-radius:8px; background:#fff; cursor:pointer; font-weight:700; font-size:15px; white-space:nowrap; } #obBoardView .pz-btn:hover { background:#f1f5f9; } #obBoardView .pz-btn:disabled { background:#f3f4f6; color:#9ca3af; cursor:not-allowed; opacity:.72; } #obBoardView .pz-btn:disabled:hover { background:#f3f4f6; } #obWatchers { display:inline-flex; align-items:center; gap:5px; flex:0 0 auto; min-width:0; font-size:12px; color:#374151; white-space:nowrap; } #obWatchers.pz-hide { display:none; } /* 관전 수 이동 다이얼: 하단 액션행에서 대기실 버튼 왼쪽의 남은 폭을 균등 분할한다. */ #obSpecNav { display:flex; align-items:center; gap:6px; width:100%; min-width:0; max-width:none; margin:0; touch-action:manipulation; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; } #obSpecNav.pz-hide, #obSpecNav[hidden] { display:none!important; height:0!important; margin:0!important; overflow:hidden!important; } #obSpecNav .ob-nav-btn { flex:1 1 0; min-width:0; height:34px; padding:0; border:1px solid rgba(0,0,0,0.12); border-radius:10px; background:#fff; color:#222; font-size:16px; font-weight:600; line-height:1; cursor:pointer; touch-action:manipulation; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; } #obSpecNav .ob-nav-btn:hover { background:#f1f5f9; } #obSpecNav .ob-nav-btn:disabled { opacity:.35; cursor:not-allowed; background:#f8fafc; color:#94a3b8; } #obSpecNav .ob-nav-btn:disabled:hover { background:#f8fafc; } #obActionsRight { display:inline-flex; align-items:center; justify-content:flex-end; gap:6px; flex:0 0 auto; min-width:0; max-width:100%; flex-wrap:nowrap; margin-left:auto; } /* 좌측 묶음: 관전 수이동 버튼. 게임 종류/연습 배지는 제목줄 우측에 표시. */ #obActionsLeft { display:inline-flex; align-items:center; justify-content:flex-start; gap:6px; flex:1 1 0; min-width:0; max-width:100%; flex-wrap:nowrap; } #obGameTypeBadge.pz-hide { display:none; } #obRoomNoBadge.pz-hide { display:none; } #obArenaRoomBadge.pz-hide { display:none; } #obPracticeBadge.pz-hide { display:none; } #obWatchers .ob-watchers-icon, .ob-room-watchers .ob-watchers-icon { width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; color:#333; } #obWatchers .ob-watchers-icon svg, .ob-room-watchers .ob-watchers-icon svg { width:18px; height:18px; stroke:currentColor; } @media (min-width:576px) { .ob-room-watchers .ob-watchers-icon, .ob-room-watchers .ob-watchers-icon svg { width:16px; height:16px; } } #obRoomChat .ob-room-tabs #obWatchers { margin-left:2px; } @media (max-width: 420px) { #obBoardView .ob-board-actions { gap:6px; justify-content:space-between; } #obBoardView .pz-btn { padding:4px 14px; border-radius:8px; font-size:15px; } #obActionsLeft, #obActionsRight { gap:6px; } #obWatchers { gap:3px; font-size:11px; } #obWatchers .ob-watchers-icon, .ob-room-watchers .ob-watchers-icon { width:15px; height:15px; } #obWatchers .ob-watchers-icon svg, .ob-room-watchers .ob-watchers-icon svg { width:15px; height:15px; } } @media (max-width:575.98px) { #obBoardView .ob-board-actions { box-sizing:border-box; width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding:0 8px; } #obActionsLeft { flex:1 1 0; max-width:100%; } #obActionsRight { flex:0 1 auto; min-width:0; max-width:100%; flex-wrap:wrap; justify-content:flex-end; row-gap:6px; } #obActionsRight .pz-btn { flex:0 1 auto; min-width:0; } /* 액션행의 실제 버튼 영역(좌우 8px)과 채팅 패널 외곽선을 같은 기준선에 맞춘다. */ body:not(.ob-room-chat-floating):not(.ob-chat-expand) #obBoardView #obRoomChat { box-sizing:border-box; width:calc(100vw - 16px); max-width:calc(100vw - 16px); margin-left:calc(50% - 50vw + 8px); margin-right:calc(50% - 50vw + 8px); } } #obRoomSettings { width:100%; height:180px; overflow-y:auto; padding:10px 12px; background:#fff; font-size:13px; } #obRoomSettings.pz-hide { display:none; } #obRoomSettings .ob-room-personal-settings { display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;margin:0 0 9px;padding:0 0 9px;border-bottom:1px solid #e5e7eb; } #obRoomSettings .ob-room-personal-settings label { display:inline-flex;align-items:center;gap:5px;margin:0;cursor:pointer;font-weight:700; } #obRoomHostBadge { margin-left:auto; display:inline-flex; align-items:center; height:20px; padding:0 7px; border-radius:999px; background:#eef2ff; color:#3730a3; font-size:11px; font-weight:800; } #obRoomHostBadge.pz-hide { display:none; } #obRoomSettings .ob-match-options { display:flex; gap:10px 14px; flex-wrap:wrap; align-items:center; margin:0; justify-content:flex-start; } #obRoomSettings .ob-match-options label { display:inline-flex; align-items:center; gap:4px; margin-right:0; } #obChooser .ob-match-options.ob-has-break, #obRoomSettings .ob-match-options.ob-has-break { row-gap:5px; } .ob-match-options .ob-option-break { flex:0 0 100%; height:0; } #obRoomSettings select { font-size:13px; padding:3px 6px; } #obRoomSettings select:disabled, #obRoomSettings input:disabled { opacity:.55; cursor:not-allowed; } #obRoomSettings #obRoomSettingsApply { display:inline-flex; align-items:center; justify-content:center; height:28px; padding:0 12px; border:1px solid #254EAD; border-radius:8px; background:#254EAD; color:#fff; font-size:13px; font-weight:800; cursor:pointer; } #obRoomSettings #obRoomSettingsApply:hover { background:#1d3e8c; } #obRoomSettings #obRoomSettingsApply:disabled { background:#e5e7eb; border-color:#d1d5db; color:#9ca3af; cursor:not-allowed; } #obRoomChat { width:100%; max-width:560px; margin:10px auto 0; border:1px solid #d6deea; border-radius:10px; background:#fff; display:flex; flex-direction:column; } #obRoomChat.pz-hide { display:none; } #obRoomChat .ob-chat-head { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; font-weight:700; color:#374151; padding:8px 12px; border-bottom:1px solid #eef2f7; } #obRoomChatMinBtn { display:none; width:28px; height:26px; border:1px solid #d1d5db; border-radius:7px; background:#fff; color:#374151; font-size:18px; font-weight:700; line-height:1; align-items:center; justify-content:center; cursor:pointer; } #obRoomChatMinBtn:hover { background:#f1f5f9; } .ob-room-tabs { display:inline-flex; align-items:center; gap:4px; } #obInviteBtn { margin-left:auto; height:28px; padding:0 12px; border:1px solid #254EAD; border-radius:8px; background:#254EAD; color:#fff; font-size:13px; font-weight:800; cursor:pointer; } #obInviteBtn:hover { background:#1d3e8c; } .ob-toast { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%) translateY(12px); background:rgba(17,24,39,.94); color:#fff; padding:11px 18px; border-radius:10px; font-size:14px; font-weight:600; z-index:99999; opacity:0; transition:opacity .25s ease, transform .25s ease; pointer-events:none; max-width:90vw; text-align:center; white-space:pre-line; box-shadow:0 6px 24px rgba(0,0,0,.25); } /* 하단→화면 중앙: 안드 nav bar 에 가리지 않게 */ .ob-toast.show { opacity:1; transform:translate(-50%,-50%) translateY(0); } /* 게임 신고 모달 */ .ob-report-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:100000; display:flex; align-items:center; justify-content:center; } .ob-report-modal { background:#fff; color:#111827; border-radius:12px; width:min(340px, calc(100vw - 40px)); padding:16px 16px 14px; font-size:14px; box-shadow:0 10px 32px rgba(0,0,0,.3); } .ob-report-modal h3 { margin:0 0 10px; font-size:15px; text-align:center; } .ob-report-reasons { margin-bottom:8px; } .ob-report-reason { display:block; padding:5px 2px; cursor:pointer; user-select:none; } .ob-report-reason input { margin-right:6px; } .ob-report-detail { width:100%; box-sizing:border-box; border:1px solid #d1d5db; border-radius:8px; padding:8px; font-size:13px; resize:none; } .ob-report-count { text-align:right; color:#9ca3af; font-size:11px; margin:2px 0 4px; } .ob-report-warning { color:#e11d48; font-size:12px; line-height:1.5; margin:4px 0 12px; } .ob-report-btns { display:flex; gap:8px; justify-content:center; } .ob-report-btns button { min-width:88px; padding:8px 14px; border-radius:999px; border:1px solid #d1d5db; background:#fff; font-size:14px; cursor:pointer; } .ob-report-btns .ob-report-submit { background:#111827; color:#fff; border-color:#111827; } .ob-report-btns button:disabled { opacity:.5; cursor:default; } /* 제출 중 스피너: 메일 발송이 동기라 응답까지 수 초 걸릴 수 있음 */ .ob-report-btns .ob-report-submit.loading { color:transparent; position:relative; opacity:1; } .ob-report-btns .ob-report-submit.loading::after { content:''; position:absolute; inset:0; margin:auto; width:16px; height:16px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:obReportSpin .7s linear infinite; } @keyframes obReportSpin { to { transform:rotate(360deg); } } /* 상대 연결 끊김 카운트다운(중앙 토스트) — 진행 중 + 고의닫기(1001)일 때만 */ #obOppToast { position:fixed; left:50%; top:46%; transform:translate(-50%,-50%); background:rgba(17,24,39,.94); color:#fff; padding:12px 20px; border-radius:12px; font-size:15px; font-weight:700; line-height:1.5; white-space:pre-line; z-index:100000; opacity:0; visibility:hidden; transition:opacity .2s ease; pointer-events:none; max-width:90vw; text-align:center; box-shadow:0 8px 28px rgba(0,0,0,.3); } #obOppToast.show { opacity:1; visibility:visible; } .ob-room-tab { height:28px; padding:0 10px; border:1px solid #d1d5db; border-radius:8px; background:#fff; color:#374151; font-size:13px; font-weight:800; cursor:pointer; } .ob-room-tab.is-active { background:#111827; border-color:#111827; color:#fff; } #obRoomChatLog, #obRoomUsers { box-sizing:border-box; height:180px; overflow-y:auto; padding:8px 12px; font-size:13px; line-height:1.5; border-top:1px solid #eef2f7; } #obRoomChatLog { font-size:14px; } #obRoomSettings { overflow-y:auto; box-sizing:border-box; } #obRoomChatLog.pz-hide, #obRoomUsers.pz-hide, #obRoomChatForm.pz-hide, #obRoomSettings.pz-hide { display:none; } /* 유저·설정 탭은 채팅 탭(로그+입력창) 높이로 고정해 채팅창 크기가 탭마다 바뀌지 않게 한다(setRoomChatTab). 확장 모드에서는 고정을 풀어 채팅 탭처럼 --ob-chat-expand-h 로 커진다(2026-09-27: 인라인 !important 가 확장 높이를 이겨 유저·설정 탭만 확대되지 않던 문제). */ body:not(.ob-chat-expand) #obRoomUsers.ob-room-tab-locked, body:not(.ob-chat-expand) #obRoomSettings.ob-room-tab-locked { height:var(--ob-room-tab-h) !important; max-height:var(--ob-room-tab-h) !important; } #obRoomChatLog .ob-cm { margin:2px 0; } #obRoomChatLog.ob-bot-chat-off .ob-cm.is-bot-chat { display:none; } #obRoomChatLog .ob-cm.is-system { color:#6b7280; font-size:13px; } #obRoomChatLog .ob-cm .nick { font-weight:700; color:#254EAD; margin-right:6px; cursor:pointer; } /* 채팅 본문 URL 자동 링크(2026-09-12): 웹은 새 탭, 앱은 시스템 브라우저(OC_APP.openExternal). */ #obRoomChatLog .ob-cm .msg a.ob-chat-link { color:#0d6efd; text-decoration:underline; word-break:break-all; overflow-wrap:anywhere; } html.fs-app-theme-dark #obRoomChatLog .ob-cm .msg a.ob-chat-link { color:#7cb3ff; } #obRoomChatLog .ob-cm .nick:hover,#obRoomChatLog .ob-cm .nick:focus-visible { color:#0d6efd; text-decoration:underline; outline:none; } #obRoomChatLog .ob-cm .t { color:#9ca3af; font-size:12px; margin-left:6px; white-space:nowrap; } #obRoomChatLog .ob-cm .ob-cm-tr { border:0; background:none; padding:0; margin-left:6px; font:inherit; font-size:12px; color:#6b7280; text-decoration:underline; cursor:pointer; white-space:nowrap; } html.fs-app-theme-dark #obRoomChatLog .ob-cm .ob-cm-tr { color:#9ca3af; } #obRoomChatLog .ob-cm .ob-cm-tr-wait { margin-left:6px; font-size:12px; color:#9ca3af; white-space:nowrap; } #obRoomChatLog .ob-cm .ob-cm-tr-wait i { font-style:normal; display:inline-block; animation:ob-cm-tr-dot 1.2s infinite ease-in-out both; } #obRoomChatLog .ob-cm .ob-cm-tr-wait i:nth-child(2) { animation-delay:.2s; } #obRoomChatLog .ob-cm .ob-cm-tr-wait i:nth-child(3) { animation-delay:.4s; } @keyframes ob-cm-tr-dot { 0%,80%,100% { opacity:.25; transform:translateY(0); } 40% { opacity:1; transform:translateY(-2px); } } @media (prefers-reduced-motion: reduce) { #obRoomChatLog .ob-cm .ob-cm-tr-wait i { animation:none; opacity:.6; } } /* 채팅 줄 아이콘 세로 중앙 정렬: 높이별 오프셋(중심 = baseline-4px 근사) */ #obRoomChatLog .ob-cm .ob-chat-photo { vertical-align:-5px !important; } #obRoomChatLog .ob-cm .oc-flag { vertical-align:-3.5px !important; } #obRoomChatLog .ob-cm .ocpv-verified-badge { margin-left:-2px !important; margin-right:6px; vertical-align:-2px; } /* 후원 배지는 닉 앞(인라인 흐름) — 간격은 국기와 같은 4px(자체 margin-right)로 두고 세로만 보정. 배지 높이가 체크(.9em)보다 1.111배 커서 같은 중심을 맞추려면 체크(-2px)보다 조금 더 내린다. */ #obRoomChatLog .ob-cm .oc-donor-badge { vertical-align:-3px; } #obRoomChatForm { position:relative; display:flex; flex-direction:column; gap:6px; padding:8px 12px; } .ob-chat-compose-row { display:flex; align-items:center; gap:6px; min-width:0; } .ob-chat-tool { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border:1px solid #d1d5db; border-radius:9px; background:#fff; color:#374151; cursor:pointer; } .ob-chat-tool:hover { background:#f8fafc; } .ob-chat-tool:disabled { opacity:.45; cursor:not-allowed; } .ob-chat-tool svg { width:18px; height:18px; display:block; } #obRoomChatEmojiBtn { font-size:20px; line-height:1; } .ob-chat-input-shell { position:relative; flex:1 1 auto; min-width:0; } #obRoomChatInput { display:block; width:100%; min-width:0; height:32px; box-sizing:border-box; padding:0 40px 0 8px; border:1px solid #d1d5db; border-radius:8px; font-size:14px; } #obRoomChatSend { position:absolute; z-index:1; right:3px; top:50%; transform:translateY(-50%) scale(.82); display:inline-flex; align-items:center; justify-content:center; width:27px; height:27px; padding:0; border:0; border-radius:7px; background:#254EAD; color:#fff; cursor:pointer; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .12s ease, transform .12s ease, visibility 0s linear .12s; } #obRoomChatSend.is-visible { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(-50%) scale(1); transition-delay:0s; } #obRoomChatSend:disabled { opacity:.45; cursor:not-allowed; } #obRoomChatSend svg { width:16px; height:16px; display:block; } #obRoomChatSend.is-loading svg { visibility:hidden; } #obRoomChatSend.is-loading::after { content:''; position:absolute; width:13px; height:13px; border:2px solid rgba(255,255,255,.42); border-top-color:#fff; border-radius:50%; animation:obChatSpin .65s linear infinite; } @keyframes obChatSpin { to { transform:rotate(360deg); } } #obRoomChatFile { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; } #obRoomChatPreview { display:flex; align-items:center; gap:8px; width:max-content; max-width:100%; padding:5px; border:1px solid #dbe3ef; border-radius:9px; background:#f8fafc; } #obRoomChatPreview[hidden] { display:none; } #obRoomChatPreviewImg { display:block; width:56px; height:56px; border-radius:7px; object-fit:cover; background:#e5e7eb; } #obRoomChatCaptionNote { max-width:230px; font-size:12px; color:#b91c1c; overflow-wrap:anywhere; } #obRoomChatPreviewRemove { width:28px; height:28px; border:0; border-radius:50%; background:#e5e7eb; color:#374151; font-size:20px; line-height:1; cursor:pointer; } /* 작성기 높이를 늘리지 않고 입력창 아래의 채팅 로그 위에 겹쳐 뜨는 팝오버로 표시한다. */ #obRoomChatEmojiPicker { position:absolute; z-index:5; top:calc(100% - 2px); left:12px; right:12px; box-sizing:border-box; display:grid; grid-template-columns:repeat(8, minmax(28px,1fr)); gap:2px; max-height:132px; overflow-y:auto; padding:6px; border:1px solid #dbe3ef; border-radius:9px; background:#fff; box-shadow:0 8px 22px rgba(15,23,42,.18); } #obRoomChatEmojiPicker[hidden] { display:none; } #obRoomChatEmojiPicker button { display:flex; align-items:center; justify-content:center; min-width:0; height:30px; padding:0; border:0; border-radius:6px; background:transparent; font-size:20px; cursor:pointer; } #obRoomChatEmojiPicker button:hover,#obRoomChatEmojiPicker button:focus-visible { background:#eef2ff; outline:none; } #obRoomChatLog .ob-chat-image-wrap { display:block; margin:4px 0 2px; } #obRoomChatLog .ob-chat-image-open { display:block; max-width:min(230px, 78%); padding:0; border:0; border-radius:9px; background:#eef2f7; overflow:hidden; cursor:zoom-in; } #obRoomChatLog .ob-chat-image-open img { display:block; width:auto; max-width:100%; max-height:180px; object-fit:cover; } #obChatImageLightbox { position:fixed; inset:0; z-index:100100; display:flex; align-items:center; justify-content:center; padding:28px; background:rgba(0,0,0,.82); } #obChatImageLightbox[hidden] { display:none; } #obChatImageLightbox img { display:block; max-width:100%; max-height:100%; object-fit:contain; } #obChatImageLightboxClose { position:absolute; top:max(12px, env(safe-area-inset-top)); right:12px; width:40px; height:40px; border:1px solid rgba(255,255,255,.5); border-radius:50%; background:rgba(0,0,0,.45); color:#fff; font-size:28px; line-height:1; cursor:pointer; } html.fs-app-theme-dark .ob-chat-tool, html.fs-app-theme-dark #obRoomChatEmojiPicker { border-color:var(--fs-app-border); background:var(--fs-app-surface-2); color:var(--fs-app-text); } html.fs-app-theme-dark .ob-chat-tool:hover, html.fs-app-theme-dark #obRoomChatEmojiPicker button:hover, html.fs-app-theme-dark #obRoomChatEmojiPicker button:focus-visible { background:var(--fs-app-surface-3, #334155); } html.fs-app-theme-dark #obRoomChatInput { border-color:var(--fs-app-border); background:var(--fs-app-surface); color:var(--fs-app-text); } html.fs-app-theme-dark #obRoomChatPreview { border-color:var(--fs-app-border); background:var(--fs-app-surface-2); } html.fs-app-theme-dark #obRoomChatPreviewRemove { background:var(--fs-app-surface-3, #334155); color:var(--fs-app-text); } #obRoomUsers .ob-room-user { display:flex; align-items:center; gap:3px; padding:4px 0; border-bottom:1px solid #f1f5f9; } /* 실제 사진만 미리보기 span 으로 감싸므로 그 공용 여백(5px)도 지워 no image 줄과 간격을 맞춘다(로비 .ob-room-side 와 같은 방식). */ #obRoomUsers .ob-room-user .oc-flag, #obRoomUsers .ob-room-user .ob-room-user-photo, #obRoomUsers .ob-room-user .ob-player-photo-trigger { margin-right:0 !important; } #obRoomUsers .ob-room-user .ocpv-verified-badge { margin-left:0 !important; } #obRoomUsers .ob-room-user:last-child { border-bottom:0; } #obRoomUsers .ob-room-user-name { font-weight:700; color:#111827; } /* 닉네임 클릭 = 유저 레코드 팝업 → 클릭 가능함을 커서로 표시(유저 탭 + 채팅 닉 공통) */ #obRoomUsers .ob-room-user-name[data-battle-user], #obRoomChatLog .nick[data-battle-user] { cursor:pointer; } #obRoomUsers .ob-room-user-rating { margin-left:auto; white-space:nowrap; font-weight:700; } #obRoomUsers .ob-room-user-badge { display:inline-flex; align-items:center; height:20px; padding:0 6px; border-radius:999px; background:#eef2ff; color:#3730a3; font-size:11px; font-weight:800; } #obRoomUsers .ob-room-user-badge.ready { background:#dcfce7; color:#15803d; } #obRoomUsers .ob-room-user-badge.host { background:#fef3c7; color:#92400e; } /* 방 채팅 모바일 플로팅용 viewport 변수 */ :root { --ob-vvh: 100vh; --ob-chat-keyboard: 0px; --ob-chat-open-h: 260px; --ob-chat-top: 8px; --ob-chat-bottom: 8px; --ob-chat-log-h: 180px; --ob-chat-expand-bottom:calc(env(safe-area-inset-bottom, 0px) + 8px); } @media (max-width: 768px) { #obRoomChatInput { font-size:16px; } html.fs-embed body:not(.ob-room-chat-floating) #obBoardView #obRoomChatLog, html.fs-embed body:not(.ob-room-chat-floating) #obBoardView #obRoomUsers, html.fs-embed body:not(.ob-room-chat-floating) #obBoardView #obRoomSettings, html.fs-online-app body:not(.ob-room-chat-floating) #obBoardView #obRoomChatLog, html.fs-online-app body:not(.ob-room-chat-floating) #obBoardView #obRoomUsers, html.fs-online-app body:not(.ob-room-chat-floating) #obBoardView #obRoomSettings { height:var(--ob-chat-log-h, 180px); max-height:var(--ob-chat-log-h, 180px); -webkit-overflow-scrolling:touch; overscroll-behavior:contain; } /* 채팅 탭 확장(모바일): 바닥 고정 팝업 — 키보드가 뜨면 --ob-chat-kb 만큼 위로, 로그 높이는 --ob-chat-expand-h */ #obChatExpandBackdrop { display:none; position:fixed; inset:0; background:rgba(15,23,42,.35); z-index:1190; } body.ob-chat-expand #obChatExpandBackdrop { display:block; } body.ob-chat-expand #obRoomChat { position:fixed; left:8px; right:8px; width:auto; max-width:none; margin:0; bottom:calc(var(--ob-chat-expand-bottom, 8px) + var(--ob-chat-kb, 0px)); z-index:1200; background:#fff; border-radius:12px; box-shadow:0 10px 34px rgba(15,23,42,.35); } /* 키보드 상단에는 틈 없이 붙이고 하단 모서리를 펴서 뒤쪽 둥근 패널이 비치지 않게 한다. */ body.ob-chat-expand.ob-chat-keyboard-open #obRoomChat { border-radius:12px 12px 0 0; } body.ob-chat-expand #obRoomChatLog, body.ob-chat-expand #obRoomUsers, body.ob-chat-expand #obRoomSettings { height:var(--ob-chat-expand-h, 55dvh) !important; max-height:var(--ob-chat-expand-h, 55dvh) !important; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; } /* Android adjustResize 중에는 JS 높이 계산을 쓰지 않는다. iframe이 단계적으로 줄어도 패널 상단/하단은 고정하고 가운데 로그 영역만 flex로 자동 축소한다. */ body.ob-chat-expand.ob-chat-android-keyboard #obRoomChat { top:40px; bottom:0; height:auto; max-height:none; } body.ob-chat-expand.ob-chat-android-keyboard #obRoomChat .ob-chat-head, body.ob-chat-expand.ob-chat-android-keyboard #obRoomChatForm { flex:0 0 auto; } body.ob-chat-expand.ob-chat-android-keyboard #obRoomChatLog, body.ob-chat-expand.ob-chat-android-keyboard #obRoomUsers, body.ob-chat-expand.ob-chat-android-keyboard #obRoomSettings { flex:1 1 auto; min-height:0; height:auto !important; max-height:none !important; } body.ob-chat-expand { overflow:hidden; } body.ob-room-chat-floating #obBoardView { padding-bottom:calc(38dvh + env(safe-area-inset-bottom) + 28px); } body.ob-room-chat-focused { overflow:hidden; } body.ob-room-chat-floating #obRoomChat { position:fixed; left:8px; right:8px; bottom:calc(var(--ob-chat-keyboard, 0px) + env(safe-area-inset-bottom) + 8px); z-index:1060; box-sizing:border-box; width:auto; max-width:none; height:var(--ob-chat-open-h, 260px); min-height:190px; max-height:min(420px, calc(var(--ob-vvh, 100vh) - 76px)); margin:0; border-radius:14px; box-shadow:0 18px 42px rgba(15,23,42,.28); } body.ob-room-chat-focused #obRoomChat { top:var(--ob-chat-top, 8px); bottom:calc(var(--ob-chat-bottom, 8px) + env(safe-area-inset-bottom)); height:auto; min-height:0; max-height:none; } body.ob-room-chat-floating #obRoomChatMinBtn { display:inline-flex; flex:0 0 auto; } body.ob-room-chat-floating #obRoomChat .ob-chat-head { padding:9px 12px; font-size:14px; } body.ob-room-chat-floating #obRoomChatLog, body.ob-room-chat-floating #obRoomUsers, body.ob-room-chat-floating #obRoomSettings { flex:1 1 auto; min-height:0; height:auto; padding:8px 12px; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; } body.ob-room-chat-floating #obRoomChatForm { flex:0 0 auto; padding:8px 10px; background:#fff; border-radius:0; } body.ob-room-chat-floating #obRoomChatEmojiPicker { left:10px; right:10px; } body.ob-room-chat-floating #obRoomChatInput { height:36px; font-size:16px; } body.ob-room-chat-floating .ob-chat-tool { width:36px; height:36px; } } /* iPad 네이티브 앱: 인라인 게임방 레이아웃은 태블릿용 그대로 유지하되, 채팅 영역을 탭했을 때만 폰과 같은 하단 고정 확장 팝업을 사용한다. */ @media (min-width: 769px) and (max-width: 991.98px) { html.fs-online-app body:not(.ob-chat-expand):not(.ob-room-chat-floating) #obBoardView #obRoomChatLog, html.fs-online-app body:not(.ob-chat-expand):not(.ob-room-chat-floating) #obBoardView #obRoomUsers, html.fs-online-app body:not(.ob-chat-expand):not(.ob-room-chat-floating) #obBoardView #obRoomSettings { height:var(--ob-chat-log-h, 180px); max-height:var(--ob-chat-log-h, 180px); -webkit-overflow-scrolling:touch; overscroll-behavior:contain; } html.fs-online-app #obChatExpandBackdrop { display:none; position:fixed; inset:0; background:rgba(15,23,42,.35); z-index:1190; } html.fs-online-app body.ob-chat-expand #obChatExpandBackdrop { display:block; } html.fs-online-app body.ob-chat-expand #obRoomChat { position:fixed; left:50%; right:auto; width:calc(100vw - 16px); max-width:720px; margin:0; transform:translateX(-50%); bottom:calc(var(--ob-chat-expand-bottom, 8px) + var(--ob-chat-kb, 0px)); z-index:1200; background:#fff; border-radius:12px; box-shadow:0 10px 34px rgba(15,23,42,.35); } html.fs-online-app body.ob-chat-expand.ob-chat-keyboard-open #obRoomChat { border-radius:12px 12px 0 0; } html.fs-online-app body.ob-chat-expand #obRoomChatLog, html.fs-online-app body.ob-chat-expand #obRoomUsers, html.fs-online-app body.ob-chat-expand #obRoomSettings { height:var(--ob-chat-expand-h, 55dvh) !important; max-height:var(--ob-chat-expand-h, 55dvh) !important; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; } html.fs-online-app body.ob-chat-expand { overflow:hidden; } } /* 후원 배너: 로비 전용(게임방 모드 숨김). 웹·앱 공통 노출, on/off 는 data/fs_donate_banner_off.flag. 두 열 중 어느 쪽이 더 길어도 마지막 박스와 배너 사이는 row gutter(16px) 하나만 남긴다. */ body:not(.fs-room-mode) .pz-container > .row > .pz-col-rank, body.ob-room-lobby .pz-container > .row > .pz-col-rank { padding-bottom:0 !important; } /* 상단 여백은 부트스트랩 거터(--bs-gutter-y)에 맡기지 않고 고정값으로 둔다 — 행마다 거터가 달라 앱/웹에서 간격이 들쭉날쭉했다(2026-08-12: 20px 로 지정). */ #obDonateBanner { margin-top:20px; margin-bottom:10px; } #obDonateBanner .ob-donate-body { display:flex; align-items:center; justify-content:space-between; gap:8px 16px; flex-wrap:wrap; } #obDonateBanner .ob-donate-text { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 320px; color:#475569; font-size:13.5px; line-height:1.55; word-break:keep-all; overflow-wrap:anywhere; } html:not([lang^="ko"]) #obDonateBanner .ob-donate-text { word-break:normal; } #obDonateBanner .ob-donate-text b { color:#1f2937; font-weight:800; } #obDonateBanner .ob-donate-link { display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; min-height:36px; padding:0 14px; border:1px solid #fcd34d; border-radius:9px; background:#fffbeb; color:#92400e!important; font-size:13.5px; font-weight:800; text-decoration:none!important; white-space:nowrap; } #obDonateBanner .ob-donate-link:hover { background:#fef3c7; } #obDonateBanner .ob-donate-link .ob-donate-icon { display:inline-flex; width:12px; height:17px; flex:0 0 auto; } /* 배지 글리프 비율 0.706 */ body.fs-room-mode:not(.ob-room-lobby) #obDonateBanner { display:none !important; } html.fs-app-theme-dark #obDonateBanner .ob-donate-text { color:var(--fs-app-muted,#a8b3c5); } html.fs-app-theme-dark #obDonateBanner .ob-donate-text b { color:var(--fs-app-text,#f8fafc); } html.fs-app-theme-dark #obDonateBanner .ob-donate-link { background:rgba(245,158,11,.16); border-color:rgba(245,158,11,.45); color:#fcd34d!important; } html.fs-app-theme-dark #obDonateBanner .ob-donate-link:hover { background:rgba(245,158,11,.26); } /* 관전 제한 안내는 줄바꿈 가능한 칸으로 표시해 좁은 화면·긴 번역에서도 생략하지 않는다. */ body #obRoomChatInput.is-compose-blocked { padding-right:8px; text-overflow:ellipsis; } .ob-chat-spectator-note { display:none; } body .ob-chat-compose-row.is-arena-blocked .ob-chat-tool { display:none; } body .ob-chat-compose-row.is-arena-blocked #obRoomChatInput, body .ob-chat-compose-row.is-arena-blocked #obRoomChatSend { display:none!important; } body .ob-chat-compose-row.is-arena-blocked .ob-chat-spectator-note { display:block; box-sizing:border-box; width:100%; min-height:32px; margin:0; padding:6px 8px; border:1px solid #d1d5db; border-radius:8px; background:#f8fafc; color:#64748b; font-size:13px; line-height:1.5; white-space:normal; overflow-wrap:anywhere; } html.fs-app-theme-dark .ob-chat-compose-row.is-arena-blocked .ob-chat-spectator-note { border-color:var(--fs-app-border); background:var(--fs-app-surface); color:var(--fs-app-muted,#a8b3c5); } /* 로비의 참가 인원은 상세 링크 카드의 요약 값이다. */ .ob-arena-participants-count{display:inline-flex;align-items:center;gap:4px;color:inherit;font-size:14px;font-weight:700;white-space:nowrap}.ob-arena-participants-count[hidden]{display:none}.ob-arena-participants-count .ob-watchers-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex:0 0 auto;color:currentColor}.ob-arena-participants-count .ob-watchers-icon svg{width:18px;height:18px;stroke:currentColor} html.fs-app-theme-dark .ob-arena-participants-count{color:var(--fs-app-text,#f8fafc)} /* 참가 상태의 자세한 안내는 대회 상세에서만 표시한다. */ .ob-arena-card[data-arena-card] [data-arena-role="status"], .ob-tn-card[data-tn-card] .ob-tn-statusline, .ob-tn-card[data-tn-card] .ob-tn-block-note{display:none!important} /* 유저 토니 인원은 날짜·시간 줄의 오른쪽에 둔다. */ .ob-tn-card[data-tn-card] .ob-arena-metarow .ob-arena-meta{flex:1 1 auto} .ob-tn-card[data-tn-card] .ob-arena-metarow .ob-arena-participants-count{margin-left:auto;flex:0 0 auto} /* 클릭 없이 목록을 스크롤하고, 경계에서는 페이지로 이어지는 브라우저 기본 동작을 사용한다. */ #obOnlineUsersTableBox{overflow-y:auto;overscroll-behavior:auto}