/* ───────────────────────────────────────────────────────── * 한봇 오락실 — 게임 9종 화면 (/arcade — 스트리머·시청자·비로그인 공용) * 색·라운드는 style.css :root 토큰만 사용한다 (하드코딩 금지 — 과일·타일 색만 게임 고유값) * ───────────────────────────────────────────────────────── */ /* --ac-bh = 판 하나에 내줄 세로 크기. 게임마다 가로:세로 비가 달라서, 이 높이에 비를 곱해 * `.ac-board`의 max-width를 정한다 (판 자체는 늘 width:100%라 가로가 곧 크기를 결정한다). * 여기 값은 스크립트가 재기 전의 임시값이고, 실제 값은 arcade-play.js의 fitBoard()가 * "화면에 남은 높이"를 재서 넣는다 (판이 화면 아래로 넘어가지 않게). */ .ac-wrap { --ac-bh: min(56vh, 640px); display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; } /* ── 게임 고르기 ── */ .ac-games { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 14px; } .ac-game { display: flex; align-items: center; gap: 9px; text-align: left; cursor: pointer; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; color: var(--text-main); font-family: inherit; font-size: 0.86rem; transition: border-color 0.12s, background 0.12s; } .ac-game:hover { border-color: var(--border-strong); background: var(--bg-elev); } .ac-game.on { border-color: var(--brand); background: var(--brand-tint); } .ac-game .ic { width: 1.75rem; height: 1.75rem; flex: none; object-fit: contain; } .ac-game > span:last-child { display: flex; flex-direction: column; min-width: 0; } .ac-game .nm { font-weight: 700; } .ac-game .sb { font-size: 0.72rem; color: var(--text-dim); margin-top: 2px; line-height: 1.4; } .ac-game.on .nm { color: var(--brand); } /* ── 무대 ── */ .ac-stage { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; } .ac-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; } .ac-head .t { font-size: 1rem; font-weight: 800; } .ac-head .t .ic { width: 1.5em; height: 1.5em; vertical-align: -0.4em; margin-right: 0.3em; object-fit: contain; } .ac-head .d { font-size: 0.76rem; color: var(--text-dim); } .ac-desc { font-size: 0.8rem; color: var(--text-sub); line-height: 1.65; margin-bottom: 10px; } .ac-hud { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .ac-stat { background: var(--bg-deep); border: 1px solid var(--border-dim); border-radius: var(--radius); padding: 7px 12px; min-width: 84px; } .ac-stat .l { font-size: 0.68rem; color: var(--text-dim); } .ac-stat .v { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; } .ac-stat.hi .v { color: var(--brand); } /* 판 자리는 게임 크기에 딱 맞춰 좁혔다가 가운데로 모은다 — 그래야 덮개(.ac-cover)가 판만 덮는다. * 곱하는 수는 각 게임의 가로÷세로 비율 * (2048=1 · 사과=1.68 · 지렁이=1.5 · 수박=360/520 · 블록 쌓기=14칸/20칸 · 벽돌깨기=360/480 · 점프=480/320 · 탑 쌓기=360/520 · 지뢰 찾기=9칸/12칸 + 위 막대). */ .ac-board { position: relative; display: flex; justify-content: center; margin: 0 auto; width: 100%; } .ac-board[data-g="g2048"] { max-width: var(--ac-bh); } .ac-board[data-g="apple"] { max-width: calc(var(--ac-bh) * 1.7 - 39px); } /* 사과판은 위쪽 시간 막대 높이만큼 빼 준다 */ .ac-board[data-g="snake"] { max-width: calc(var(--ac-bh) * 1.5); } .ac-board[data-g="suika"] { max-width: calc(var(--ac-bh) * 0.6923); } .ac-board[data-g="blocks"] { max-width: calc(var(--ac-bh) * 0.7); } .ac-board[data-g="brick"] { max-width: calc(var(--ac-bh) * 0.75); } .ac-board[data-g="jump"] { max-width: calc(var(--ac-bh) * 1.5); } .ac-board[data-g="stack"] { max-width: calc(var(--ac-bh) * 0.6923); } .ac-board[data-g="mines"] { max-width: calc((var(--ac-bh) - 44px) * 0.75); } /* 지뢰판 위 '남은 지뢰·깃발' 막대 높이만큼 빼 준다 */ .ac-board canvas { display: block; width: 100%; height: auto; max-width: 100%; border-radius: var(--radius); background: var(--bg-deep); touch-action: none; } .ac-cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(10, 11, 12, 0.86); border-radius: var(--radius); text-align: center; padding: 18px; z-index: 3; } .ac-cover .big { font-size: 1.15rem; font-weight: 800; } .ac-cover .sub { font-size: 0.82rem; color: var(--text-sub); line-height: 1.6; max-width: 320px; } .ac-cover .score { font-size: 2rem; font-weight: 900; color: var(--brand); font-variant-numeric: tabular-nums; } .ac-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .ac-hint { font-size: 0.76rem; color: var(--text-dim); margin-top: 8px; line-height: 1.6; } /* ── 2048 ── * 배경 16칸(.g2048-grid)은 고정해 두고 숫자 타일은 그 위 층(.g2048-layer)에 한 장씩 띄운다. * 타일은 칸 번호(--r·--c)만 바뀌고 자리 이동은 transform 전환이 맡으므로 미끄러지듯 움직인다. */ .g2048 { --gap: 8px; --slide: 0.11s; position: relative; width: 100%; aspect-ratio: 1; background: var(--bg-deep); border-radius: var(--radius); padding: var(--gap); touch-action: none; } /* 숫자 크기는 화면(vw)이 아니라 판 크기(cqw)를 따라간다 — 판이 커지면 숫자도 같이 커져야 칸이 비어 보이지 않는다 */ .g2048-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: var(--gap); width: 100%; height: 100%; container-type: inline-size; } .g2048-layer { position: absolute; inset: var(--gap); container-type: inline-size; pointer-events: none; } .g2048-tile { position: absolute; top: 0; left: 0; width: calc((100% - var(--gap) * 3) / 4); height: calc((100% - var(--gap) * 3) / 4); transform: translate(calc(var(--c) * (100% + var(--gap))), calc(var(--r) * (100% + var(--gap)))); transition: transform var(--slide) ease-out; } .g2048-tile > .g2048-cell { width: 100%; height: 100%; } /* 새로 나온 타일·합쳐져 생긴 타일은 미끄러짐이 끝난 뒤(--slide 만큼 늦춰) 나타난다 */ .g2048-tile.new > .g2048-cell { animation: g2048-appear 0.13s ease-out var(--slide) both; } .g2048-tile.merge > .g2048-cell { animation: g2048-merge 0.19s ease-out var(--slide) both; } @keyframes g2048-appear { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } } @keyframes g2048-merge { 0% { opacity: 0; transform: scale(0.86); } 1% { opacity: 1; } 55% { transform: scale(1.14); } 100% { opacity: 1; transform: scale(1); } } /* 움직임을 줄이도록 설정한 사람에게는 미끄러짐·팝을 끈다 */ @media (prefers-reduced-motion: reduce) { .g2048-tile { transition: none; } .g2048-tile.new > .g2048-cell, .g2048-tile.merge > .g2048-cell { animation: none; } } .g2048-cell { display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: #1a1c1e; color: #0d0e0f; font-weight: 900; font-variant-numeric: tabular-nums; font-size: clamp(0.9rem, 10cqw, 3.4rem); transition: background 0.09s; } .g2048-cell[data-v="0"] { color: transparent; } .g2048-cell[data-v="2"] { background: #dfe3e6; } .g2048-cell[data-v="4"] { background: #d3dbc8; } .g2048-cell[data-v="8"] { background: #f2b179; } .g2048-cell[data-v="16"] { background: #f59563; } .g2048-cell[data-v="32"] { background: #f67c5f; } .g2048-cell[data-v="64"] { background: #f65e3b; color: #fff; } .g2048-cell[data-v="128"] { background: #edcf72; font-size: clamp(0.8rem, 8.6cqw, 2.9rem); } .g2048-cell[data-v="256"] { background: #edcc61; font-size: clamp(0.8rem, 8.6cqw, 2.9rem); } .g2048-cell[data-v="512"] { background: #edc850; font-size: clamp(0.8rem, 8.6cqw, 2.9rem); } .g2048-cell[data-v="1024"] { background: #edc53f; font-size: clamp(0.66rem, 7cqw, 2.4rem); } .g2048-cell[data-v="2048"] { background: var(--brand); font-size: clamp(0.66rem, 7cqw, 2.4rem); } .g2048-cell.big { background: #2f3f38; color: var(--brand); font-size: clamp(0.6rem, 6.3cqw, 2.1rem); } /* ── 사과 게임 ── */ .ap-board { position: relative; width: 100%; background: var(--bg-deep); border-radius: var(--radius); padding: 8px; touch-action: none; user-select: none; } .ap-grid { display: grid; grid-template-columns: repeat(17, 1fr); gap: 2px; container-type: inline-size; } .ap-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: url(/img/arcade/sprites/apple_cell.png) center / 100% no-repeat, radial-gradient(circle, #c9403a 66%, transparent 68%); color: #fff6f4; font-weight: 800; font-size: clamp(0.5rem, 2.9cqw, 1.9rem); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); } .ap-cell.gone { background: transparent; box-shadow: none; color: transparent; } .ap-cell.pick { background: var(--brand); color: var(--brand-ink); } .ap-cell.pick.ok { background: var(--ok); color: #0d0e0f; } .ap-sel { position: absolute; border: 2px solid var(--brand); background: rgba(var(--brand-rgb), 0.12); border-radius: 4px; pointer-events: none; z-index: 2; } .ap-timer { height: 7px; border-radius: 4px; background: var(--bg-elev); overflow: hidden; margin-bottom: 8px; } .ap-timer > span { display: block; height: 100%; background: var(--brand); transition: width 0.2s linear; } /* ── 좁은 화면 ── * 한 줄로 쌓이면 판 크기는 세로가 아니라 가로(칸 너비)가 정하므로, 세로 계산 대신 예전 상한을 그대로 쓴다. */ /* --ac-bhn = 위에 붙은 메뉴 줄을 뺀 화면 높이(arcade-play.js fitBoard) — 가로로 눕힌 휴대폰에서 판이 화면보다 높아지지 않게 함께 막는다 (2026-10-20) */ @media (max-width: 960px) { .ac-wrap { grid-template-columns: 1fr; --ac-bhn: 9999px; } .ac-board[data-g="g2048"] { max-width: min(420px, var(--ac-bhn)); } .ac-board[data-g="apple"] { max-width: min(620px, calc(var(--ac-bhn) * 1.7 - 39px)); } .ac-board[data-g="snake"] { max-width: min(640px, calc(var(--ac-bhn) * 1.5)); } .ac-board[data-g="suika"] { max-width: min(360px, calc(var(--ac-bhn) * 0.6923)); } .ac-board[data-g="blocks"] { max-width: min(340px, calc(var(--ac-bhn) * 0.7)); } .ac-board[data-g="brick"] { max-width: min(340px, calc(var(--ac-bhn) * 0.75)); } .ac-board[data-g="jump"] { max-width: min(520px, calc(var(--ac-bhn) * 1.5)); } .ac-board[data-g="stack"] { max-width: min(360px, calc(var(--ac-bhn) * 0.6923)); } .ac-board[data-g="mines"] { max-width: min(400px, calc((var(--ac-bhn) - 44px) * 0.75)); } } /* ── 순위표 ── */ .ac-side { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; } .ac-side .tab-bar { margin-bottom: 8px; } .ac-rank-row { display: flex; align-items: center; gap: 8px; padding: 7px 2px; border-bottom: 1px solid var(--bg-elev); font-size: 0.84rem; } .ac-rank-row:last-child { border-bottom: none; } .ac-rank-row.me { background: var(--brand-tint); border-radius: var(--radius-sm); } .ac-rank-row .n { width: 26px; color: var(--text-dim); font-variant-numeric: tabular-nums; text-align: right; } .ac-rank-row .n.top { color: var(--brand); font-weight: 800; } .ac-rank-row .who { flex: 1; min-width: 0; } /* 이름 앞 플랫폼 배지 칸 (2026-10-02) — 아이콘 폭이 달라도 이름이 같은 줄에서 시작하게 */ .ac-rank-row .ac-pf { flex: 0 0 30px; display: flex; justify-content: center; } .ac-rank-row .ac-pf .pf-badge { margin-right: 0; } .ac-rank-row .who b { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ac-rank-row .who span { display: block; font-size: 0.7rem; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ac-rank-row .sc { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-main); } .ac-me-line { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 0.82rem; color: var(--text-sub); } .ac-me-line b { color: var(--brand); } /* 내 최근 기록 (2026-10-20) — 순위표 아래 접힌 칸, 새 서버 응답이 있을 때만 보인다 */ .ac-mine { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 0.82rem; } .ac-mine > summary { cursor: pointer; color: var(--text-sub); font-weight: 700; padding: 2px 0; } .ac-mine > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--radius-sm); } .ac-mine-cnt { font-size: 0.74rem; color: var(--text-dim); margin: 6px 0 2px; } .ac-mine-row { display: flex; align-items: center; gap: 8px; padding: 6px 2px; border-bottom: 1px solid var(--bg-elev); } .ac-mine-row:last-child { border-bottom: none; } .ac-mine-row .dt { flex: 0 0 auto; min-width: 52px; color: var(--text-dim); font-size: 0.74rem; font-variant-numeric: tabular-nums; } .ac-mine-row .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-sub); } .ac-mine-row .who span { margin-left: 6px; font-size: 0.7rem; color: var(--text-dim); } .ac-mine-row .sc { font-weight: 800; font-variant-numeric: tabular-nums; } .ac-mine-row .sc.top { color: var(--brand); } /* 덮개 안 보조 안내(키·연습 판)와 이어 하기 숫자 */ .ac-cover .ac-keys { font-size: 0.74rem; color: var(--text-dim); } .ac-cover .big.ac-count { font-size: 2.6rem; color: var(--brand); font-variant-numeric: tabular-nums; } /* ── PC에서 키우기 ── * 판이 커진 만큼 주변 글자·칩도 같이 키운다 (모바일은 지금 크기가 맞아 960px 위에서만 적용). */ @media (min-width: 961px) { .ac-game { padding: 10px 13px; font-size: 0.9rem; } .ac-game .ic { width: 2rem; height: 2rem; } .ac-game .sb { font-size: 0.76rem; } /* 제목·설명·점수판·버튼을 판 위 두 줄로 몰아 놓는다 — * 판 아래에 남는 것이 없어야 판이 화면 끝까지 쓰고도 버튼이 잘리지 않는다. */ .ac-stage { padding: 16px 18px 18px; display: grid; column-gap: 16px; align-items: start; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head hud" "desc hud" "hint act" "board board"; } .ac-head { grid-area: head; margin-bottom: 2px; } .ac-desc { grid-area: desc; margin-bottom: 0; } .ac-hud { grid-area: hud; margin-bottom: 0; justify-self: end; flex-wrap: nowrap; } .ac-hint { grid-area: hint; margin-top: 10px; align-self: center; } .ac-actions { grid-area: act; margin-top: 10px; justify-self: end; } .ac-board { grid-area: board; margin: 12px auto 0; } .ac-head .t { font-size: 1.15rem; } .ac-head .d { font-size: 0.84rem; } .ac-desc { font-size: 0.88rem; } .ac-stat { padding: 9px 14px; min-width: 104px; } .ac-stat .l { font-size: 0.74rem; } .ac-stat .v { font-size: 1.3rem; } .ac-cover .big { font-size: 1.5rem; } .ac-cover .sub { font-size: 0.92rem; max-width: 420px; } .ac-cover .score { font-size: 2.6rem; } .ac-hint { font-size: 0.82rem; } .ap-timer { height: 9px; } .ac-side { padding: 16px; } .ac-rank-row { padding: 8px 2px; font-size: 0.9rem; } .ac-rank-row .n { width: 28px; } .ac-rank-row .who span { font-size: 0.74rem; } .ac-me-line { font-size: 0.88rem; } } /* ── 본문 폭 기준 배치 (시청자 /viewer-arcade · 관리 /arcade 공용, 2026-09-24) ── * 기준은 화면 폭이 아니라 #arcade-root 폭(사이드바를 뺀 실제 본문 폭)이다. * 화면 폭만 보면 PC(사이드바 200px)와 태블릿(사이드바 없음)이 섞여, 1025~1400px PC와 태블릿 가로 화면에서 설명 칸이 한두 글자 폭으로 찌그러졌다. */ #arcade-root { container: vac / inline-size; } #arcade-root .ac-game .nm, #arcade-root .ac-game .sb { word-break: keep-all; } /* 칸이 좁을 때 "점 / 프"처럼 낱말 중간에서 끊기지 않게 */ /* 게임 고르기 — 넓으면 9개 한 줄(1000~1249px는 한 줄 설명을 빼고 이름만), 중간은 5+4, 휴대폰은 아이콘 위·이름 아래로 작게 5+4 * — 고르는 칸이 낮을수록 판이 덜 밀려 내려간다. 고른 게임의 한 줄 설명은 아래 게임 제목 옆에 나온다 */ @container vac (min-width: 1000px) { #arcade-root .ac-games { grid-template-columns: repeat(9, minmax(0, 1fr)); } } @container vac (min-width: 1000px) and (max-width: 1249px) { #arcade-root .ac-game { padding-top: 12px; padding-bottom: 12px; } #arcade-root .ac-game .sb { display: none; } } @container vac (min-width: 560px) and (max-width: 999px) { #arcade-root .ac-games { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @container vac (max-width: 559px) { #arcade-root .ac-games { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; } #arcade-root .ac-game { flex-direction: column; justify-content: center; gap: 4px; padding: 9px 4px; min-height: 64px; text-align: center; } #arcade-root .ac-game > span:last-child { align-items: center; } #arcade-root .ac-game .nm { font-size: 0.74rem; line-height: 1.3; word-break: keep-all; } #arcade-root .ac-game .sb { display: none; } /* 고른 게임의 한 줄 설명은 아래 게임 제목 옆에 나온다 */ /* 점수판 4칸: 3+1로 어긋나던 것을 2×2로 */ #arcade-root .ac-hud { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } #arcade-root .ac-stat { min-width: 0; } #arcade-root .ac-stat .l { font-size: 0.72rem; } } /* PC 배치(화면 961px~)는 "제목·설명 | 점수판"을 옆으로 놓는다. 본문이 좁으면(PC 1025~1500px·태블릿 가로) 점수판을 설명 아래 한 줄로 내리고, * 더 좁으면(PC 1025~1190px) 순위표를 판 아래로 옮긴다. 판 아래는 계속 비워 둬 판 크기 계산(arcade-play.js)이 그대로 맞는다. */ @media (min-width: 961px) { @container vac (max-width: 1149px) { #arcade-root .ac-stage { grid-template-areas: "head act" "desc desc" "hint hint" "hud hud" "board board"; } #arcade-root .ac-actions { margin-top: 0; align-self: center; } #arcade-root .ac-desc { margin-top: 2px; } #arcade-root .ac-hint { margin-top: 6px; } #arcade-root .ac-hud { justify-self: stretch; flex-wrap: wrap; margin-top: 10px; } #arcade-root .ac-stat { flex: 1 1 0; } } @container vac (max-width: 859px) { #arcade-root .ac-wrap { grid-template-columns: minmax(0, 1fr); } } } /* 한 줄 배치(~960px): 칸 너비가 1fr(최소 = 내용 폭)이면 2048처럼 가로:세로 비가 정해진 판의 "지금 높이"가 최소 폭이 되어 * 판이 화면보다 넓게 굳는다(휴대폰 390px에서 14px 가로 넘침) → 최소 폭을 0으로 */ @media (max-width: 960px) { #arcade-root .ac-wrap { grid-template-columns: minmax(0, 1fr); } } /* ══════════ 2026-11-01 고도화 ══════════ */ /* 페이지 안