/* OPRN 스토어 3차 개편(2026-10-24) — 두 제품, 두 얼굴. app.css 위에 얹는다(기준 문서 DESIGN.md 「3차」).
   PLAY  (play.*)  : 밤하늘 남색 + 하늘색 강조 + 초록 플레이 단추. 영상이 주인공인 소비자 진열대.
   ASSETS(store.*) : 작업대 갈색 + 금색 강조 + 체크무늬 그림 받침. 그림을 뜯어보는 제작자 시장.
   플레이 화면(.play-shell)의 iframe·조작 껍데기는 여기서 건드리지 않는다(모바일 플레이 작업과 나눔). */

/* ── 두 제품의 토큰 ── */
body.p-play {
  --bg: #070b16; --bg-2: #0d1427; --bg-3: #142038; --bg-4: #1d2a48;
  --line: #19233f; --line-2: #2a3a64;
  --text: #eef2ff; --text-2: #bcc6e4; --muted: #7f8bb0;
  --gold: #63c9ff; --gold-ink: #031321; --gold-soft: rgba(99, 201, 255, .14);
  --acc: #63c9ff; --acc-2: #8f7dff;
  --go: #3fdb86; --go-2: #19b866; --go-ink: #03210f;
  --glass: rgba(16, 24, 46, .62); --glass-line: rgba(160, 190, 255, .14);
  background:
    radial-gradient(1100px 520px at 78% -6%, rgba(88, 110, 255, .2), transparent 70%),
    radial-gradient(900px 480px at 8% 0%, rgba(40, 170, 255, .1), transparent 70%),
    #070b16;
  background-attachment: fixed;
}
body.p-store {
  --bg: #14120e; --bg-2: #1c1914; --bg-3: #26221b; --bg-4: #332d23;
  --line: #2b261e; --line-2: #3f382c;
  --text: #f4efe4; --text-2: #d3cab8; --muted: #9b907c;
  --gold: #f3b648; --gold-ink: #1c1405; --gold-soft: rgba(243, 182, 72, .14);
  --acc: #f3b648; --acc-2: #ff8f5a;
  --go: #3fdb86; --go-2: #19b866; --go-ink: #03210f;
  --glass: rgba(30, 26, 20, .7); --glass-line: rgba(255, 220, 160, .12);
  --checker: repeating-conic-gradient(#1d1a14 0% 25%, #221e17 0% 50%) 0 0 / 16px 16px;
  background: radial-gradient(1000px 420px at 85% -8%, rgba(243, 182, 72, .1), transparent 70%), #14120e;
  background-attachment: fixed;
}
body.p-play, body.p-store { overflow-x: clip; }
.p-play :focus-visible, .p-store :focus-visible { outline: 3px solid var(--acc); outline-offset: 3px; border-radius: 6px; }
html.pad :focus-visible { box-shadow: 0 0 0 6px color-mix(in srgb, var(--acc) 35%, transparent); }
.p-play h1, .p-play h2, .p-store h1, .p-store h2 { letter-spacing: -.02em; font-weight: 800; }

/* ── 머리: 유리 + 두 제품 전환 ── */
.p-play .top, .p-store .top { background: color-mix(in srgb, var(--bg) 70%, transparent); border-bottom: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); }
.top-row { gap: 14px; }
.brand-word { display: flex; flex-direction: row !important; align-items: center; gap: 6px; }
.brand-word b { font-family: "Galmuri11", var(--sans); font-size: 16px; letter-spacing: .04em; color: var(--text); }
.brand-word i { font-style: normal; font-weight: 800; font-size: 11px; letter-spacing: .12em; padding: 3px 7px; border-radius: 5px; background: var(--acc); color: var(--gold-ink); }
.p-store .brand-word i { background: transparent; color: var(--acc); box-shadow: inset 0 0 0 1.5px var(--acc); }
.sw { display: inline-flex; flex: none; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--glass-line); }
.sw a { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--text-2); transition: background-color .2s, color .2s; }
.sw a .ico { width: 13px; height: 13px; }
.sw a:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.sw a.on { color: var(--gold-ink); background: var(--acc); }
.sw .sw-play.on { background: #63c9ff; color: #031321; }
.sw .sw-store.on { background: #f3b648; color: #1c1405; }
.p-play .pnav.on, .p-store .pnav.on { background: rgba(255, 255, 255, .06); box-shadow: inset 0 -2px 0 var(--acc); }
.p-play .top .search input[type=search], .p-store .top .search input[type=search] { background: rgba(255, 255, 255, .05); border-color: var(--glass-line); }
.p-play .top .search input[type=search]:focus, .p-store .top .search input[type=search]:focus { border-color: var(--acc); background: rgba(255, 255, 255, .08); }
.avatar.xs { width: 26px; height: 26px; font-size: 12px; }
.p-play .avatar { background: linear-gradient(135deg, var(--acc), var(--acc-2)); color: #061024; }
.p-play .cats a.on, .p-store .cats a.on { border-bottom-color: var(--acc); }
@media (max-width: 1100px) { .hide-md { display: none !important; } .primary .pnav:nth-child(3) { display: none; } }

/* ── 단추 ── */
.button { transition: background-color .15s, border-color .15s, transform .15s, box-shadow .2s; }
.button.play { background: linear-gradient(180deg, var(--go), var(--go-2)); color: var(--go-ink); box-shadow: 0 6px 20px rgba(40, 210, 120, .28), inset 0 1px 0 rgba(255, 255, 255, .35); }
.button.play:hover { background: linear-gradient(180deg, #5cf09c, #22c873); box-shadow: 0 10px 28px rgba(40, 210, 120, .4), inset 0 1px 0 rgba(255, 255, 255, .4); transform: translateY(-1px); }
.button.glass { background: rgba(255, 255, 255, .08); color: var(--text); border-color: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.button.glass:hover { background: rgba(255, 255, 255, .14); }
.button.glass.on { border-color: var(--acc); color: var(--acc); }
.button.store { background: linear-gradient(180deg, #f6c463, #e09a2a); color: #1c1405; }
.p-play .button:not(.play):not(.glass):not(.ghost):not(.store):not(.google):not(.danger) { background: var(--acc); color: var(--gold-ink); }
.p-play .button:not(.play):not(.glass):not(.ghost):not(.store):not(.google):not(.danger):hover { background: #8ad8ff; }
.p-store .button:not(.play):not(.glass):not(.ghost):not(.store):not(.google):not(.danger):hover { background: #f7c76a; }

/* ── 자리표시(그림이 오는 동안) ── */
.sk { background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .07) 50%, transparent 75%) var(--bg-2) !important; background-size: 220% 100% !important; animation: shimmer 1.3s linear infinite; }
.sk img { opacity: 0; }
.gc-media img, .ac-bed img, .kt-art img, .hs-frame img, .ht-art img, .abench-art img, .mthumb img, .upcov img { transition: opacity .35s ease; }
@keyframes shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* ── 줄 머리 ── */
.row-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.row-head h2 { font-size: 22px; }
.row-sub { margin: 0; font-size: 13px; color: var(--muted); }
.row-head .see-all { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--acc); }
.row-head .see-all .ico { width: 12px; height: 12px; transition: transform .2s; }
.row-head .see-all:hover .ico { transform: translateX(3px); }

/* ════════════════ PLAY ════════════════ */

/* 히어로: 흐린 바탕은 화면 끝까지, 무대는 16:9 */
.hero3 { position: relative; isolation: isolate; margin-top: -8px; }
.hero3-slides { position: relative; }
.hs { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7.2fr); gap: 36px; align-items: center; min-height: 440px; padding: 18px 0 8px; }
.hs[hidden] { display: none; }
.hs.is-on { animation: hsIn .6s cubic-bezier(.2, .7, .2, 1); }
@keyframes hsIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.hs-bg { position: absolute; z-index: -1; top: -120px; bottom: -60px; left: calc(50% - 50vw); right: calc(50% - 50vw); overflow: hidden; pointer-events: none; }
.hs-bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(48px) saturate(1.5) brightness(.5); transform: scale(1.15); opacity: .85; }
.hs-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 11, 22, .2) 0%, rgba(7, 11, 22, .1) 50%, #070b16 100%), linear-gradient(90deg, rgba(7, 11, 22, .85) 0%, rgba(7, 11, 22, .2) 55%, transparent 100%); }
.hs-copy { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.hs-genre { margin: 0; font-size: 14px; font-weight: 700; color: var(--acc); }
.hs-copy h1 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.08; text-shadow: 0 4px 30px rgba(0, 0, 0, .5); }
.hs-copy h1 a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.hs-sum { margin: 0; font-size: 17px; color: var(--text-2); max-width: 46ch; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hs-actions { margin: 8px 0 0; display: flex; gap: 10px; flex-wrap: wrap; }
.hs-fine { margin: 0; font-size: 13px; color: var(--muted); }
.p-play .pill { background: rgba(255, 255, 255, .06); border-color: var(--glass-line); color: var(--text-2); }
.hs-stage { display: block; min-width: 0; }
.hs-frame { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08); transform: perspective(1400px) rotateY(-4deg); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.hs-stage:hover .hs-frame { transform: perspective(1400px) rotateY(0); }
.hs-frame img, .hs-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.hs-frame video { opacity: 0; transition: opacity .6s ease; }
.hs-frame.is-playing video { opacity: 1; }
.hero3-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; margin-top: 18px; max-width: 980px; margin-left: auto; }
.ht { position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px; border-radius: 12px; border: 1px solid var(--glass-line); background: var(--glass); color: var(--text-2); font: inherit; text-align: left; cursor: pointer; overflow: hidden; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: border-color .2s, background-color .2s, color .2s; }
.ht:hover { color: var(--text); border-color: var(--line-2); }
.ht.is-on { color: var(--text); border-color: color-mix(in srgb, var(--acc) 60%, transparent); background: rgba(40, 70, 130, .45); }
.ht-art { display: block; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #000; }
.ht-art img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; display: block; }
.ht-name { font-size: 13px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ht-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .06); }
.ht-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--acc), var(--acc-2)); }
.ht.is-on .ht-bar i { width: 0; }
@keyframes htbar { from { width: 0; } to { width: 100%; } }
.hero3-pause { position: absolute; right: 0; top: 18px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--glass-line); background: var(--glass); color: var(--text); cursor: pointer; display: grid; place-items: center; z-index: 2; }
.hero3-pause .pz { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.hero3-pause.is-paused .pz { width: 0; height: 0; border: 0; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.hero3.empty { padding: 60px 0; }

/* 게임 카드 + 가로 줄 */
.rail { position: relative; }
.rail-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 18px) / 4); gap: 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 16px 6px 22px; margin: -16px -6px -22px; scroll-padding-inline: 6px; }
.rail-track::-webkit-scrollbar { display: none; }
.rail-track > * { scroll-snap-align: start; }
.rail-btn { position: absolute; z-index: 5; top: calc(50% - 40px); width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--glass-line); background: rgba(10, 16, 32, .78); color: var(--text); display: grid; place-items: center; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); transition: transform .15s, background-color .15s; }
.rail-btn:hover { background: var(--bg-4); transform: scale(1.06); }
.rail-btn.prev { left: -18px; } .rail-btn.prev .ico { transform: scaleX(-1); }
.rail-btn.next { right: -18px; }
.rail-btn[hidden] { display: none; }
.gc { position: relative; display: flex; flex-direction: column; border-radius: 14px; background: var(--bg-2); box-shadow: 0 0 0 1px var(--line); transition: transform .28s cubic-bezier(.2, .7, .2, 1), box-shadow .28s; will-change: transform; min-width: 0; }
.gc:hover, .gc:focus-visible, .gc.is-live { transform: translateY(-6px) scale(1.04); z-index: 3; box-shadow: 0 0 0 1px color-mix(in srgb, var(--acc) 55%, transparent), 0 26px 60px rgba(0, 0, 0, .65), 0 0 40px rgba(99, 201, 255, .12); }
.gc:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--acc), 0 26px 60px rgba(0, 0, 0, .65); }
.gc-media { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 14px 14px 0 0; overflow: hidden; background: #000; }
.gc-media img, .gc-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; display: block; }
.gc-media video { opacity: 0; transition: opacity .4s; }
.gc-media.is-playing video { opacity: 1; }
.gc-has-video { position: absolute; right: 8px; top: 8px; z-index: 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(5, 10, 20, .7); color: var(--text); transition: opacity .2s; }
.gc-has-video .ico { width: 11px; height: 11px; }
.gc.is-live .gc-has-video { opacity: 0; }
.gc-pop { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 30px 12px 10px; display: flex; flex-direction: column; gap: 6px; background: linear-gradient(180deg, transparent, rgba(4, 8, 18, .92) 45%); opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; pointer-events: none; }
.gc:hover .gc-pop, .gc:focus-visible .gc-pop, .gc.is-live .gc-pop { opacity: 1; transform: none; }
.gc-sum { font-size: 12.5px; line-height: 1.45; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gc-stats { display: flex; gap: 12px; font-size: 12px; color: var(--text-2); }
.gc-stats > span { display: inline-flex; align-items: center; gap: 4px; }
.gc-stats .ico { width: 11px; height: 11px; }
.gc-body { display: flex; flex-direction: column; gap: 6px; padding: 11px 13px 13px; min-width: 0; }
.gc-title { font-weight: 750; font-size: 15px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gc-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.gc-meta span { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .06); color: var(--text-2); white-space: nowrap; }
.p-play .ggrid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px 18px; }

/* 장르 타일 */
.genre-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.gt { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-height: 96px; padding: 14px 16px; border-radius: 14px; overflow: hidden; isolation: isolate; background: linear-gradient(135deg, #2b3f8f, #151f44); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); transition: transform .2s, box-shadow .2s; }
.gt::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120px 80px at 85% 15%, rgba(255, 255, 255, .22), transparent 70%); }
.gt:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 14px 30px rgba(0, 0, 0, .4); }
.gt b { font-size: 17px; }
.gt small { font-size: 12px; color: rgba(255, 255, 255, .72); }
.gt-rpg { background: linear-gradient(135deg, #3d5bd9, #1a2563); }
.gt-adventure { background: linear-gradient(135deg, #1f9d8a, #0f3b3f); }
.gt-romance { background: linear-gradient(135deg, #e0658f, #5a1d3c); }
.gt-monster { background: linear-gradient(135deg, #46b04a, #173d1c); }
.gt-puzzle { background: linear-gradient(135deg, #a46cf0, #2f1b5a); }
.gt-horror { background: linear-gradient(135deg, #8a2b2b, #1c0b0b); }
.gt-mystery { background: linear-gradient(135deg, #5a6a8a, #1a2030); }
.gt-action { background: linear-gradient(135deg, #f08a3c, #5a2410); }
.gt-simulation { background: linear-gradient(135deg, #3cb6d8, #10394a); }
.gt-touch { background: linear-gradient(135deg, #2a3350, #121829); }
.gt-short { background: linear-gradient(135deg, #3a3150, #16121f); }

/* 업데이트·제작자 판, 건너가기 띠 */
.p-play .block.two { gap: 18px; }
.panel { padding: 20px; border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-line); }
.panel .side-h { margin-bottom: 2px; }
.panel .row-sub { margin-bottom: 14px; }
.p-play .uplist li, .p-play .crlist li { background: rgba(255, 255, 255, .03); border-color: var(--glass-line); }
.p-play .uplist li:hover, .p-play .crlist li:hover { background: rgba(255, 255, 255, .06); }
.cross { margin-top: 56px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 28px; padding: 28px 32px; border-radius: 18px; overflow: hidden; }
.cross h2 { font-size: 22px; line-height: 1.35; max-width: 30ch; }
.cross p { margin: 14px 0 0; }
.cross-assets { background: linear-gradient(120deg, #2a2112 0%, #1a150d 60%), #1a150d; border: 1px solid rgba(243, 182, 72, .3); }
.cross-assets h2 { color: #f7e9cc; }
.cross-art { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cross-art img { width: 100%; aspect-ratio: 1; object-fit: cover; image-rendering: pixelated; border-radius: 8px; background: repeating-conic-gradient(#1d1a14 0% 25%, #221e17 0% 50%) 0 0 / 12px 12px; box-shadow: 0 0 0 1px rgba(243, 182, 72, .2); }
.cross-play { grid-template-columns: minmax(0, 1fr); background: radial-gradient(600px 220px at 85% 50%, rgba(99, 201, 255, .25), transparent 70%), linear-gradient(120deg, #0f1a38, #070b16); border: 1px solid rgba(99, 201, 255, .3); }
.cross-play h2 { color: #e3eeff; }
.p-play .mkcta { border-color: var(--glass-line); background: linear-gradient(120deg, rgba(99, 201, 255, .1), rgba(143, 125, 255, .08)); }

/* 게임 찾기 */
.p-play .find-head h1, .p-store .results-head h1 { font-size: 30px; }
.p-play .find-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.p-play .bigsearch { flex: 1; min-width: 280px; background: var(--glass); border-color: var(--glass-line); border-radius: 14px; }
.p-play .bigsearch:focus-within { border-color: var(--acc); }
details.facets { position: sticky; top: 88px; display: block; }
.facets-toggle { display: none; }
.facets-body { display: grid; gap: 22px; padding: 18px; border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-line); }
.facets-done { display: none !important; }
.fg h3 { font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--text); font-weight: 750; margin-bottom: 8px; }
.flist { display: grid; gap: 2px; }
.flist a { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; font-size: 14px; color: var(--text-2); }
.flist a:hover { background: rgba(255, 255, 255, .05); color: var(--text); }
.flist a.on { color: var(--text); background: color-mix(in srgb, var(--acc) 12%, transparent); }
.flist i { font-style: normal; font-size: 12px; color: var(--muted); }
.ck { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--line-2); display: inline-block; position: relative; }
.ck.on { background: var(--acc); border-color: var(--acc); }
.ck.on::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid var(--gold-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.fchips .static { display: inline-flex; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--gold-soft); color: var(--acc); border: 1px solid var(--acc); }
.soon { margin: 0; padding: 8px 10px; border-radius: 8px; border: 1px dashed var(--line-2); }
.rbar { justify-content: space-between; }
.sorts { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--glass-line); }
.sorts a { padding: 6px 12px; border-radius: 9px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.sorts a:hover { color: var(--text); }
.sorts a.on { background: var(--acc); color: var(--gold-ink); }
.actives { margin: -4px 0 16px; }
.xchip { background: color-mix(in srgb, var(--acc) 14%, transparent); color: var(--text); border: 1px solid color-mix(in srgb, var(--acc) 40%, transparent); }

/* 게임 화면 */
.game-detail main { position: relative; }
.gd-backdrop { position: absolute; z-index: -1; top: -100px; left: calc(50% - 50vw); right: calc(50% - 50vw); height: 760px; overflow: hidden; pointer-events: none; }
.gd-backdrop img { width: 100%; height: 100%; object-fit: cover; filter: blur(56px) saturate(1.4) brightness(.42); transform: scale(1.2); }
.gd-backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 11, 22, .1), #070b16 92%); }
.gd-title { font-size: clamp(28px, 3.2vw, 42px); margin: 2px 0 16px; text-shadow: 0 4px 24px rgba(0, 0, 0, .5); }
.gd-top { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.mviewer { min-width: 0; }
.mv-stage { position: relative; margin: 0; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 24px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08); display: grid; place-items: center; }
.mv-stage img, .mv-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.mv-stage [hidden] { display: none; }
.mthumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
.mthumb { position: relative; flex: none; width: 128px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; padding: 0; border: 2px solid transparent; background: #000; cursor: pointer; opacity: .62; transition: opacity .2s, border-color .2s; }
.mthumb:hover { opacity: 1; }
.mthumb.is-on { opacity: 1; border-color: var(--acc); }
.mthumb img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; display: block; }
.mthumb-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, .3); }
.mthumb-play .ico { width: 18px; height: 18px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6)); }
.capsule { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.capsule-art { aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; }
.capsule-art img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; display: block; }
.capsule-sum { margin: 0; font-size: 14px; color: var(--text-2); line-height: 1.55; }
.cfacts { margin: 0; display: grid; gap: 6px; font-size: 13px; }
.cfacts div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; }
.cfacts dt { color: var(--muted); }
.cfacts dd { margin: 0; color: var(--text); }
.cfacts dd a { color: var(--acc); }
.muted-dd { color: var(--muted) !important; }
.p-play .gtags a { background: rgba(99, 201, 255, .1); color: #9fdcff; }
.playbar { margin: 22px 0 8px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 18px 16px 24px; border-radius: 16px; background: linear-gradient(90deg, rgba(99, 201, 255, .16), rgba(143, 125, 255, .1) 60%, rgba(63, 219, 134, .12)); border: 1px solid var(--glass-line); }
.playbar-copy { display: flex; flex-direction: column; min-width: 0; }
.playbar-copy b { font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.playbar-copy span { font-size: 13px; color: var(--muted); }
.playbar-act { display: flex; align-items: center; gap: 10px; flex: none; }
.playbar .button.xl { min-width: 210px; }
.gd-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
.gd-main .block { margin-top: 32px; }
.gd-main .text-block h2 { margin-bottom: 10px; font-size: 20px; }
.gd-side { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 16px; margin-top: 32px; padding: 20px; border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-line); }
.gd-side .author-card { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 14px; border-top: 1px solid var(--glass-line); }
.author-card .creator-link span:last-child { display: flex; flex-direction: column; min-width: 0; }
.author-card small { font-size: 12px; color: var(--muted); }
.reviews .review-empty { display: flex; gap: 18px; align-items: center; padding: 20px 22px; border-radius: 14px; border: 1px dashed var(--line-2); background: rgba(255, 255, 255, .02); }
.review-empty b { display: block; font-size: 16px; }
.review-empty p { margin: 4px 0 0; color: var(--text-2); font-size: 14px; max-width: 60ch; }
.re-meter { display: flex; gap: 4px; flex: none; }
.re-meter i { width: 10px; height: 26px; border-radius: 3px; border: 1.5px solid var(--line-2); }
.p-play .game-versions .game-version { background: var(--glass); border-color: var(--glass-line); }
.p-play .creator-head { background: var(--glass); border-color: var(--glass-line); }

/* ════════════════ ASSETS ════════════════ */
.abench { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-rows: auto auto; gap: 14px 40px; align-items: center; padding: 26px 0 8px; }
.abench-copy { grid-row: span 2; display: flex; flex-direction: column; gap: 16px; }
.abench-copy h1 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.1; }
.abench-copy .lead { margin: 0; max-width: 46ch; }
.asearch { display: flex; align-items: center; gap: 10px; max-width: 560px; padding: 6px 6px 6px 16px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg-2); }
.asearch:focus-within { border-color: var(--acc); }
.asearch input { flex: 1; min-width: 0; height: 42px; border: 0; background: none; color: var(--text); font: inherit; font-size: 16px; }
.asearch input:focus { outline: none; }
.abench-facts { list-style: none; margin: 4px 0 0; padding: 0; display: flex; gap: 26px; flex-wrap: wrap; }
.abench-facts li { display: flex; flex-direction: column; }
.abench-facts b { font-size: 22px; font-weight: 800; color: var(--acc); }
.abench-facts span { font-size: 13px; color: var(--muted); }
.abench-feature { position: relative; display: block; border-radius: 16px; overflow: hidden; background: var(--checker); box-shadow: 0 0 0 1px var(--line-2), 0 24px 60px rgba(0, 0, 0, .45); }
.abench-art { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.abench-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; image-rendering: pixelated; display: block; transition: transform 6s ease; }
.abench-feature:hover .abench-art img { transform: scale(1.35); }
.abench-cap { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.abench-cap small { font-size: 12px; color: var(--acc); font-weight: 700; }
.abench-cap b { font-size: 17px; }
.abench-more { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.abench-more a { display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--checker); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .2s, transform .2s; }
.abench-more a:hover { box-shadow: 0 0 0 2px var(--acc); transform: translateY(-2px); }
.abench-more img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; display: block; }
.kind-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.kt { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: var(--bg-2); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .2s, transform .2s; }
.kt:hover { box-shadow: 0 0 0 2px var(--acc); transform: translateY(-2px); }
.kt-art { display: block; aspect-ratio: 2 / 1; background: var(--checker); overflow: hidden; }
.kt-art img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; display: block; }
.kt-label { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 12px; }
.kt-label small { color: var(--muted); font-size: 12px; }
.tagcloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tagcloud a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line-2); font-size: 14px; font-weight: 600; color: var(--text-2); }
.tagcloud a:hover { border-color: var(--acc); color: var(--text); }
.tagcloud i { font-style: normal; font-size: 12px; color: var(--muted); }

/* 에셋 카드: 체크무늬 받침, 올려 두면 그림을 훑거나(타일셋) 걷는다(걷기 칩) */
.agrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 16px; }
.ac { position: relative; display: flex; flex-direction: column; border-radius: 12px; background: var(--bg-2); box-shadow: 0 0 0 1px var(--line); overflow: hidden; transition: box-shadow .2s, transform .2s; min-width: 0; }
.ac:hover, .ac:focus-visible { box-shadow: 0 0 0 2px var(--acc), 0 18px 40px rgba(0, 0, 0, .45); transform: translateY(-3px); }
.ac:focus-visible { outline: none; }
.ac-bed { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--checker); overflow: hidden; }
.ac-bed img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; display: block; transition: transform .5s ease, opacity .3s; }
.ac[data-kind="tileset"]:hover .ac-bed img { object-fit: cover; animation: acpan 7s ease-in-out infinite alternate; }
@keyframes acpan { from { transform: scale(1.9) translate(18%, 18%); } to { transform: scale(1.9) translate(-18%, -18%); } }
.ac[data-kind="face"]:hover .ac-bed img, .ac[data-kind="picture"]:hover .ac-bed img { transform: scale(1.12); }
.ac-walk { position: absolute; inset: 0; margin: auto; width: 192px; max-width: 92%; height: auto; image-rendering: pixelated; opacity: 0; transition: opacity .25s; }
.ac-bed.is-walking .ac-walk { opacity: 1; }
.ac-bed.is-walking img { opacity: .08; }
.ac-body { display: flex; flex-direction: column; gap: 4px; padding: 11px 13px 12px; flex: 1; min-width: 0; }
.ac-title { font-weight: 700; font-size: 15px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ac-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12.5px; color: var(--muted); }
.ac-foot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.ac-foot .lic { padding: 1px 7px; border-radius: 5px; border: 1px solid var(--line-2); font-size: 11.5px; font-weight: 700; color: var(--text-2); }
.ac-foot .price { margin-left: auto; font-size: 13px; }
.ac-foot .dl { display: inline-flex; align-items: center; gap: 3px; }
.ac-foot .dl .ico { width: 11px; height: 11px; }
.agrid.arow, .p-play .grid.arow { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

/* 에셋 찾기 */
.browse3 { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; }
.p-store .results-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 18px; }
.p-store .chip.on { background: var(--acc); color: var(--gold-ink); border-color: var(--acc); }
.p-store .toggle { margin-top: 4px; }

/* 에셋 화면 */
.p-store .gallery .main { background: var(--checker); box-shadow: 0 0 0 1px var(--line-2); border-radius: 14px; }
.p-store .gallery .thumb { background: var(--checker); }
.p-store .info .get { background: var(--glass); border: 1px solid var(--glass-line); }
.preview3 .pv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px 12px; border-radius: 12px 12px 0 0; background: var(--bg-2); border: 1px solid var(--line-2); border-bottom: 0; font-size: 14px; }
.pv-bar select { max-width: 280px; height: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--bg-3); color: var(--text); font: inherit; font-size: 13px; }
.pv-group { display: inline-flex; align-items: center; gap: 4px; }
.pv-group[hidden] { display: none; }
.pv-btn { min-width: 34px; height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--bg-3); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.pv-btn:hover { border-color: var(--acc); }
.pv-btn.on { background: var(--acc); color: var(--gold-ink); border-color: var(--acc); }
.pv-group output { min-width: 34px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.pv-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.pv-check input { accent-color: var(--acc); width: 16px; height: 16px; }
.pv-info { margin-left: auto; font-variant-numeric: tabular-nums; }
.pv-stage { position: relative; min-height: 220px; max-height: 72vh; overflow: auto; padding: 12px; border-radius: 0 0 12px 12px; background: var(--checker); border: 1px solid var(--line-2); display: grid; place-items: start center; }
.pv-stage canvas { image-rendering: pixelated; display: block; max-width: none; }
.pv-msg { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; }
.pv-msg[hidden] { display: none; }
.empty-art { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: var(--checker); color: var(--muted); }
.empty-art .ico { width: 28px; height: 28px; }
.p-store .empty { border-color: var(--line-2); }
.p-store .creator { background: linear-gradient(120deg, rgba(243, 182, 72, .1), rgba(255, 143, 90, .06)); border-color: rgba(243, 182, 72, .3); }

/* ── 아래 탭(휴대폰) ── */
.p-play .tabbar, .p-store .tabbar { background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); border-top-color: var(--glass-line); }
.p-play .tab.on, .p-store .tab.on { color: var(--acc); }

/* ── 크기별 ── */
@media (max-width: 1180px) {
  .rail-track { grid-auto-columns: calc((100% - 2 * 18px) / 3); }
  .hero3-tabs { max-width: none; }
}
@media (max-width: 980px) {
  .hs { grid-template-columns: minmax(0, 1fr); gap: 18px; min-height: 0; padding-top: 4px; }
  .hs-stage { order: -1; }
  .hs-frame { transform: none !important; }
  .gd-top, .gd-cols { grid-template-columns: minmax(0, 1fr); }
  .gd-side { position: static; }
  .cross { grid-template-columns: minmax(0, 1fr); }
  .abench { grid-template-columns: minmax(0, 1fr); }
  .abench-copy { grid-row: auto; }
  .browse3, .find { grid-template-columns: minmax(0, 1fr); }
  details.facets { position: static; }
  .facets-toggle { display: inline-flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--glass-line); background: var(--glass); font-weight: 700; font-size: 14px; }
  .facets-toggle::-webkit-details-marker { display: none; }
  .facets-toggle b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--acc); color: var(--gold-ink); font-size: 12px; display: inline-grid; place-items: center; }
  details.facets[open] .facets-body { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; max-height: 78vh; overflow: auto; border-radius: 20px 20px 0 0; background: var(--bg-2); padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -20px 60px rgba(0, 0, 0, .6); animation: sheetUp .28s cubic-bezier(.2, .7, .2, 1); }
  details.facets[open]::before { content: ""; position: fixed; inset: 0; z-index: 59; background: rgba(0, 0, 0, .55); }
  .facets-done { display: inline-flex !important; width: 100%; }
  @keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
}
@media (max-width: 860px) {
  .sw a { padding: 0 11px; }
  .rail-track { grid-auto-columns: 46%; }
  .rail-btn { display: none !important; }
}
@media (max-width: 720px) {
  .top-row { flex-wrap: nowrap; }
  .sw a span { display: none; }
  .sw a { width: 38px; justify-content: center; padding: 0; }
  .brand-word b { font-size: 14px; }
  .hs-copy h1 { font-size: 26px; }
  .hs-sum { font-size: 14.5px; -webkit-line-clamp: 2; }
  .hs-actions .button.play { flex: 1; }
  .hs-bg { top: -90px; }
  .hero3-tabs { display: flex; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 0 16px 2px; gap: 8px; }
  .hero3-tabs::-webkit-scrollbar { display: none; }
  .ht { flex: 0 0 62%; grid-template-columns: 64px minmax(0, 1fr); }
  .hero3-pause { top: 10px; right: 10px; }
  .rail-track { grid-auto-columns: 78%; gap: 12px; margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
  .gc:hover { transform: none; }
  .p-play .ggrid { grid-template-columns: minmax(0, 1fr); }
  .row-head h2 { font-size: 19px; }
  .playbar { flex-direction: column; align-items: stretch; padding: 16px; }
  .playbar-act { flex-direction: row-reverse; }
  .playbar-act .button.xl { flex: 1; min-width: 0; }
  .mthumb { width: 96px; }
  .cross { padding: 22px; margin-top: 40px; }
  .abench-facts { gap: 18px; }
  .agrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ac-body { padding: 9px 10px 10px; }
  .ac-title { font-size: 14px; }
  .ac-foot .dl { display: none; }
  .kind-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reviews .review-empty { flex-direction: column; align-items: flex-start; }
  .p-store .shelf .agrid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; }
  .p-store .shelf .agrid::-webkit-scrollbar { display: none; }
  .p-store .shelf .ac { flex: 0 0 62%; scroll-snap-align: start; }
}

@media (prefers-reduced-motion: reduce) {
  .p-play *, .p-store * { animation: none !important; transition: none !important; }
  .hs-frame { transform: none; }
  .gc:hover, .ac:hover { transform: none; }
}
/* 게임이 적을 때 줄을 빈칸 없이 채운다 */
.rail-track:has(> :nth-child(3):last-child) { grid-auto-columns: calc((100% - 2 * 18px) / 3); }
.rail-track:has(> :nth-child(2):last-child) { grid-auto-columns: calc((100% - 18px) / 2); }
@media (max-width: 860px) { .rail-track:has(> :nth-child(3):last-child), .rail-track:has(> :nth-child(2):last-child) { grid-auto-columns: 46%; } }
@media (max-width: 720px) { .rail-track:has(> :nth-child(3):last-child), .rail-track:has(> :nth-child(2):last-child) { grid-auto-columns: 78%; } }
/* 2차 검토 반영 */
.top .search:focus-within .search-ico { color: var(--acc); }
.top .search input[type=search]:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
.sheet-head { display: none; }
.mthumbs { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); padding-right: 40px; }
.p-store .fchips a i { font-style: normal; font-size: 11px; color: var(--muted); }
@media (max-width: 980px) {
  details.facets[open] .sheet-head { display: flex; align-items: center; justify-content: space-between; position: sticky; top: -22px; margin: -22px -18px 0; padding: 14px 18px; background: var(--bg-2); border-bottom: 1px solid var(--line); z-index: 1; }
  details.facets[open] .sheet-head b { font-size: 17px; }
  .facets-done { position: sticky; bottom: 0; }
}
@media (max-width: 720px) {
  .sw a span { display: inline; }
  .sw a { width: auto; padding: 0 10px; height: 30px; font-size: 13px; }
  .sw a .ico { display: none; }
  .brand-word i { display: none; }
  .lang-menu { display: none; }
  .top-row { gap: 8px; }
  .p-store .cats { display: none; }
  .playbar { position: sticky; bottom: calc(66px + env(safe-area-inset-bottom)); z-index: 20; background: color-mix(in srgb, var(--bg-2) 88%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 -10px 30px rgba(0, 0, 0, .45); flex-direction: row; align-items: center; padding: 10px 12px; }
  .playbar-copy { display: none; }
  .playbar-act { flex: 1; flex-direction: row; }
  .playbar-act .button.xl { height: 48px; font-size: 16px; }
  .capsule-art { display: none; }
  .gd-title { margin-bottom: 10px; }
  .gtags a, .p-store .tags a { padding: 7px 12px; }
  .mthumb { width: 104px; }
  .uplist li, .crlist li { min-height: 56px; }
}
@media (max-width: 360px) { .brand-word b { display: none; } }
.gtags a, .p-store .tags a, .tagcloud a, .flist a, .fchips a, .actives a, .gc a, .cross p a.button, .mkcta p a, .hs-actions a, .playbar a { text-decoration: none; }
/* 3차 검토 반영 */
.detail > *, .info, .preview3, .pv-bar label { min-width: 0; }
.pv-bar select { max-width: 100%; }
.text-block .pre, .info .summary, .info h1 { overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .game-detail .playbar { position: fixed; left: 8px; right: 8px; bottom: calc(66px + env(safe-area-inset-bottom)); margin: 0; }
  body.game-detail main { padding-bottom: 96px; }
  .sorts { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .sorts::-webkit-scrollbar { display: none; }
  .sorts a { flex: none; white-space: nowrap; }
  .rbar { flex-direction: column; align-items: flex-start; }
  .fchips a, .tagcloud a, .flist a, .crumbs a, .ac-foot .lic { min-height: 36px; display: inline-flex; align-items: center; }
  .pv-bar { gap: 8px; }
  .pv-info { margin-left: 0; flex-basis: 100%; }
}
@media (max-width: 720px) {
  .hide-sm { display: none !important; }
  .upcov { width: 84px; }
  .uplist .button.small { width: 40px; padding: 0; }
  .uplist small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}