/* ========================================================================== 오늘도 같이 · 프리미엄 테마 (가장 마지막에 불러 전체 톤을 정한다) - 창: 짙은 남색 옻칠 패널 + 가는 금선 2중 액자, 세리프 제목, 절제된 모서리(12px) - 텍스트: 상아색 본문, 금빛 강조, 숫자는 Outfit - 움직임: 튕기는 팝업 대신 짧은 페이드·슬라이드 ========================================================================== */ .rpg-game { /* 창 밖(HUD·월드 위 요소)에서 쓰는 기본값 */ --m-cell: #fffdf7; --m-cell2: #f6efdf; --m-hi: #fff7e1; --m-track: #efe5cc; --m-chip: #232b3d; --h-display: "Noto Serif KR", "Noto Sans KR", serif; --t-gold: #d9b56a; --t-gold-hi: #f2d79a; --t-gold-deep: #9c7a3c; } /* ---------- 창 안의 색 토큰을 어두운 패널용으로 ---------- */ #rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) { --m-paper: linear-gradient(180deg, #1b2233 0%, #141a28 100%); --m-cell: rgba(255, 255, 255, .045); --m-cell2: rgba(255, 255, 255, .03); --m-hi: rgba(217, 181, 106, .12); --m-track: rgba(255, 255, 255, .1); --m-chip: #2a3348; --m-edge: rgba(217, 181, 106, .22); --m-ink: #ece6d6; --m-ink-soft: #a8a392; --paper: #1b2233; --paper-2: rgba(255, 255, 255, .045); --paper-edge: rgba(217, 181, 106, .22); --ink: #ece6d6; --ink-soft: #a8a392; --b-ink: #ece6d6 !important; --b-ink-soft: #a8a392 !important; --b-title: #f2d79a !important; --b-cell: rgba(255, 255, 255, .045) !important; color: var(--m-ink) !important; } /* ---------- 창 액자 ---------- */ #rpg-app .rpg-game.rpg-game .rpg-modal-wrap:not(.cinema-viewer):not(.village-playing):not(.cinema-window) { background: radial-gradient(ellipse at center, rgba(6, 9, 16, .45), rgba(4, 6, 12, .78)) !important; backdrop-filter: blur(5px) saturate(.85) !important; } #rpg-app .rpg-game.rpg-game .rpg-modal-wrap:not(.cinema-viewer):not(.village-playing):not(.cinema-window) > .rpg-modal:not(.midnight-cafe) { background: var(--m-paper) !important; border-radius: 12px !important; box-shadow: inset 0 0 0 1px rgba(242, 215, 154, .55), inset 0 0 0 5px #141a28, inset 0 0 0 6px rgba(217, 181, 106, .18), 0 0 0 1px rgba(0, 0, 0, .6), 0 30px 80px rgba(0, 0, 0, .6) !important; scrollbar-color: rgba(217, 181, 106, .45) transparent; } #rpg-app .rpg-game.rpg-game .rpg-modal-wrap[data-pop] > .rpg-modal { animation: theme-in .22s cubic-bezier(.2, .8, .2, 1) both !important; } @keyframes theme-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } } /* 모서리 장식(액자 네 귀의 금빛 꺾쇠) */ #rpg-app .rpg-game.rpg-game .rpg-modal-wrap:not(.cinema-viewer):not(.village-playing):not(.cinema-window) > .rpg-modal:not(.midnight-cafe)::before { content: ""; position: absolute; inset: 9px; pointer-events: none; z-index: 4; border-radius: 6px; background: linear-gradient(var(--t-gold), var(--t-gold)) top left / 18px 1.5px, linear-gradient(var(--t-gold), var(--t-gold)) top left / 1.5px 18px, linear-gradient(var(--t-gold), var(--t-gold)) top right / 18px 1.5px, linear-gradient(var(--t-gold), var(--t-gold)) top right / 1.5px 18px, linear-gradient(var(--t-gold), var(--t-gold)) bottom left / 18px 1.5px, linear-gradient(var(--t-gold), var(--t-gold)) bottom left / 1.5px 18px, linear-gradient(var(--t-gold), var(--t-gold)) bottom right / 18px 1.5px, linear-gradient(var(--t-gold), var(--t-gold)) bottom right / 1.5px 18px; background-repeat: no-repeat; opacity: .8; } /* ---------- 머리글 ---------- */ #rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) > header { background: linear-gradient(180deg, #1b2233 72%, rgba(27, 34, 51, 0)) !important; } #rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) > header::after { background: linear-gradient(90deg, transparent, rgba(217, 181, 106, .5) 15%, rgba(217, 181, 106, .5) 85%, transparent) !important; } #rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) h2 { font: 700 24px/1.3 var(--h-display) !important; letter-spacing: .02em; color: var(--t-gold-hi) !important; text-shadow: 0 1px 0 rgba(0, 0, 0, .5) !important; } #rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) > header h2::before { width: 8px !important; height: 8px !important; border-radius: 1px !important; background: var(--t-gold) !important; box-shadow: 0 0 0 3px rgba(217, 181, 106, .18) !important; } #rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) > header small { color: var(--t-gold) !important; letter-spacing: .18em; font-size: 11px !important; font-weight: 700; opacity: .85; } #rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) :is(h3, h4) { font-family: var(--h-display) !important; color: var(--m-ink) !important; } #rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) :is(b, strong) { color: inherit; } #rpg-app .rpg-game.rpg-game .rpg-modal .x { width: 34px !important; height: 34px !important; background: transparent !important; color: var(--t-gold-hi) !important; box-shadow: inset 0 0 0 1px rgba(217, 181, 106, .5) !important; font-size: 18px !important; } #rpg-app .rpg-game.rpg-game .rpg-modal .x:is(:hover, :focus-visible) { background: rgba(217, 181, 106, .14) !important; transform: none; } /* ---------- 버튼 ---------- */ #rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) .rpg-btn:not(.gold):not(.ghost) { background: rgba(255, 255, 255, .04) !important; color: var(--t-gold-hi) !important; border-radius: 8px !important; box-shadow: inset 0 0 0 1px rgba(217, 181, 106, .45) !important; } #rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) .rpg-btn:not(.gold):not(.ghost):is(:hover, :focus-visible) { background: rgba(217, 181, 106, .12) !important; } #rpg-app .rpg-game.rpg-game .rpg-modal .rpg-btn.gold, #rpg-app .rpg-game.rpg-game button.rpg-btn.gold { background: linear-gradient(180deg, #ecd08f, #c9a256 55%, #a9843f) !important; color: #1d1608 !important; border-radius: 8px !important; box-shadow: inset 0 1px 0 rgba(255, 245, 210, .7), inset 0 -1px 0 rgba(90, 60, 10, .4), 0 4px 14px rgba(0, 0, 0, .35) !important; letter-spacing: .02em; } #rpg-app .rpg-game.rpg-game .rpg-modal .rpg-btn:active { transform: translateY(1px) !important; } #rpg-app .rpg-game.rpg-game .rpg-modal .menu-quit { color: var(--m-ink-soft) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12) !important; } /* ---------- 카드·칸 ---------- */ #rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) :is(.product, .shop-row, .cell, .now-list li, .quests li, .smith-row, .stylist-grid article, .emote-grid article, .gacha-book article, .gear-slot, .bus-ticket, .raffle-card, .skill-evolution, .daily-sheet li, .outing-cards button, .menu-grid button, .qb-cards article, .gr-stat, .gr-skills article, .eb-card, .npc-line) { background: var(--m-cell) !important; color: var(--m-ink) !important; border-radius: 10px !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07) !important; border-color: rgba(255, 255, 255, .07) !important; } #rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) :is(.menu-grid button, .qb-cards article, .gr-stat, .eb-card, .product):is(:hover, :focus-visible) { box-shadow: inset 0 0 0 1px rgba(217, 181, 106, .6), 0 8px 20px rgba(0, 0, 0, .3) !important; transform: translateY(-2px); } #rpg-app .rpg-game.rpg-game .rpg-modal .menu-grid button span { background: radial-gradient(circle at 50% 35%, rgba(217, 181, 106, .2), rgba(217, 181, 106, .04)) !important; box-shadow: inset 0 0 0 1px rgba(217, 181, 106, .3) !important; border-radius: 12px !important; } #rpg-app .rpg-game.rpg-game .rpg-modal .menu-grid { --ic-ink: #f2d79a; --ic-fill: #2f3a55; --ic-accent: #d9b56a; --ic-light: #fff; } #rpg-app .rpg-game.rpg-game .rpg-modal :is(input:not([type]), input[type="text"], input[type="search"], input[type="number"], input[type="password"], select, textarea) { background: rgba(0, 0, 0, .28) !important; color: var(--m-ink) !important; border: 1px solid rgba(217, 181, 106, .3) !important; border-radius: 8px !important; box-shadow: none !important; } #rpg-app .rpg-game.rpg-game .rpg-modal :is(input, textarea)::placeholder { color: rgba(236, 230, 214, .4) !important; } #rpg-app .rpg-game.rpg-game .rpg-modal select option { background: #1b2233; color: #ece6d6; } #rpg-app .rpg-game.rpg-game .rpg-modal :is(fieldset) { border-color: rgba(217, 181, 106, .25) !important; background: rgba(255, 255, 255, .02) !important; border-radius: 10px !important; } #rpg-app .rpg-game.rpg-game .rpg-modal :is(legend, label) { color: var(--m-ink-soft) !important; } #rpg-app .rpg-game.rpg-game .rpg-modal a { color: var(--t-gold-hi) !important; } #rpg-app .rpg-game.rpg-game .rpg-modal hr { border-color: rgba(217, 181, 106, .2); } #rpg-app .rpg-game.rpg-game .rpg-modal :is(small, .rpg-fine) { color: var(--m-ink-soft) !important; } #rpg-app .rpg-game.rpg-game .rpg-modal .npc-line { color: #e2dccb !important; font-style: italic; } #rpg-app .rpg-game.rpg-game .rpg-modal .npc-line::before { background: var(--t-gold) !important; } #rpg-app .rpg-game.rpg-game .rpg-modal kbd { background: #2a3348 !important; color: var(--t-gold-hi) !important; box-shadow: inset 0 0 0 1px rgba(217, 181, 106, .4) !important; border-radius: 4px !important; } /* ---------- 이미 어두운 카드는 테두리로 구분 ---------- */ #rpg-app .rpg-game.rpg-game .rpg-modal :is(.qb-main, .gr-hero, .fashion-runway, .mini-banner, .daily-streak, .cinema-passport-card, .live-now, .pos-bar) { background: linear-gradient(160deg, #26304a, #1a2132) !important; box-shadow: inset 0 0 0 1px rgba(217, 181, 106, .4), 0 10px 24px rgba(0, 0, 0, .3) !important; border-radius: 12px !important; } #rpg-app .rpg-game.rpg-game .rpg-modal .qb-main::after { display: none; } #rpg-app .rpg-game.rpg-game .rpg-modal :is(.qb-tag, .qb-state) { border-radius: 4px !important; } #rpg-app .rpg-game.rpg-game .rpg-modal.quest .qb-main h3.qb-title, #rpg-app .rpg-game.rpg-game .gr-info > b { font-family: var(--h-display) !important; font-weight: 700 !important; } #rpg-app .rpg-game.rpg-game .rpg-modal .gr-stat h3 b { color: var(--acc) !important; } #rpg-app .rpg-game.rpg-game .rpg-modal .gr-ico { background: rgba(255, 255, 255, .05) !important; border-radius: 10px !important; } #rpg-app .rpg-game.rpg-game .rpg-modal .qb-track li span { background: #1b2233 !important; color: var(--m-ink-soft) !important; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .18) !important; } #rpg-app .rpg-game.rpg-game .rpg-modal .qb-track li.open span { color: var(--m-ink) !important; box-shadow: 0 0 0 1.5px rgba(217, 181, 106, .5) !important; } #rpg-app .rpg-game.rpg-game .rpg-modal .qb-track li.done span { background: linear-gradient(180deg, #ecd08f, #b38d45) !important; color: #1d1608 !important; box-shadow: none !important; } #rpg-app .rpg-game.rpg-game .rpg-modal .qb-track li.now span { background: #141a28 !important; color: var(--t-gold-hi) !important; box-shadow: 0 0 0 2px var(--t-gold), 0 0 14px rgba(217, 181, 106, .6) !important; } #rpg-app .rpg-game.rpg-game .rpg-modal .qb-track ol::before { background: rgba(255, 255, 255, .12) !important; } #rpg-app .rpg-game.rpg-game .rpg-modal .qb-cards article.got .qb-art { background: radial-gradient(circle at 50% 40%, #4a4030, #2a2418) !important; } #rpg-app .rpg-game.rpg-game .rpg-modal .qb-cards article.got { box-shadow: inset 0 0 0 1px var(--t-gold), 0 6px 16px rgba(0, 0, 0, .3) !important; } #rpg-app .rpg-game.rpg-game .rpg-modal .eb-face, #rpg-app .rpg-game.rpg-game .rpg-modal .eb-card em { background: rgba(255, 255, 255, .06) !important; } #rpg-app .rpg-game.rpg-game .rpg-modal .eb-card em { color: var(--m-ink-soft) !important; } #rpg-app .rpg-game.rpg-game .rpg-modal .eb-card.st-busy em { background: rgba(217, 181, 106, .15) !important; color: var(--t-gold-hi) !important; } /* ---------- 결과 화면 ---------- */ #rpg-app .rpg-game.rpg-game .rpg-modal-wrap:not(.cinema-viewer):not(.village-playing):not(.cinema-window) > .rpg-modal.mission-result.arc { background: radial-gradient(ellipse 80% 45% at 50% 20%, rgba(217, 181, 106, .18), transparent 70%), var(--m-paper) !important; } #rpg-app .rpg-game.rpg-game .rpg-modal.mission-result.arc .arc-head h2 { font-size: 28px !important; } #rpg-app .rpg-game.rpg-game .arc-grade { font-family: var(--h-display) !important; font-weight: 900 !important; box-shadow: 0 0 0 4px #141a28, 0 0 0 5px rgba(217, 181, 106, .6), 0 12px 28px rgba(0, 0, 0, .4) !important; } #rpg-app .rpg-game.rpg-game .arc-grade.g-S { box-shadow: 0 0 0 4px #141a28, 0 0 0 5px var(--t-gold-hi), 0 0 40px rgba(217, 181, 106, .7) !important; } #rpg-app .rpg-game.rpg-game .arc-stars i { color: rgba(255, 255, 255, .14) !important; } #rpg-app .rpg-game.rpg-game .arc-stars i.on { color: var(--t-gold-hi) !important; text-shadow: 0 0 14px rgba(217, 181, 106, .8) !important; } #rpg-app .rpg-game.rpg-game .arc-score b { color: var(--m-ink) !important; } #rpg-app .rpg-game.rpg-game .arc-goal { background: rgba(217, 181, 106, .1) !important; box-shadow: inset 0 0 0 1px rgba(217, 181, 106, .35); color: var(--m-ink) !important; border-radius: 8px !important; } #rpg-app .rpg-game.rpg-game .arc-ms { background: var(--m-cell) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07) !important; } #rpg-app .rpg-game.rpg-game .arc-unlock { color: var(--t-gold-hi) !important; } /* ---------- NPC 대화창 · 타이틀 · HUD에도 같은 서체와 금선 ---------- */ #rpg-app .npc-conversation { border-radius: 12px !important; box-shadow: inset 0 0 0 1px rgba(242, 215, 154, .5), inset 0 0 0 5px rgba(20, 26, 40, .9), inset 0 0 0 6px rgba(217, 181, 106, .18), 0 24px 60px rgba(0, 0, 0, .55) !important; } #rpg-app .npc-conversation header strong { font: 700 16px/1.3 var(--h-display) !important; border-radius: 4px !important; background: linear-gradient(180deg, #ecd08f, #b38d45) !important; color: #1d1608 !important; box-shadow: 0 4px 12px rgba(0, 0, 0, .35) !important; } #rpg-app .npc-conversation > div button { border-radius: 8px !important; } #rpg-app .rpg-game.rpg-game .rpg-zone { font-family: var(--h-display) !important; font-weight: 700 !important; letter-spacing: .06em !important; font-size: 22px !important; } #rpg-app .rpg-game.rpg-game .rpg-banner:not(.live-notice), #rpg-app .rpg-game .zone-title b { font-family: var(--h-display) !important; font-weight: 700 !important; letter-spacing: .04em; } #rpg-app .rpg-game.rpg-game :is(.rpg-tracker, .rpg-chat, .rpg-minimap) { border-radius: 10px !important; } #rpg-app .rpg-game.rpg-game .rpg-menu button { border-radius: 10px !important; } #rpg-app .rpg-title2 .title-menu .rpg-btn { border-radius: 8px !important; font-family: var(--h-display) !important; font-weight: 700 !important; font-size: 19px !important; letter-spacing: .04em; } #rpg-app .rpg-title2 .title-logo small { font-family: var(--h-display); } #rpg-app .rpg-game .cutin-text b { font-family: var(--h-display) !important; font-weight: 900 !important; } /* ---------- 필담 배틀 카드: 어두운 패널 위의 한지 카드 ---------- */ #rpg-app .rpg-game.rpg-game .duel2 .d2-card { background: linear-gradient(180deg, #f3ead6, #e6d9bb) !important; color: #2a2116 !important; border-radius: 8px !important; } #rpg-app .rpg-game.rpg-game .duel2 .d2-card :is(b, i) { color: #2a2116 !important; } #rpg-app .rpg-game.rpg-game .duel2 .d2-card b { font-family: var(--h-display) !important; font-weight: 700; } #rpg-app .rpg-game.rpg-game .duel2 .d2-grind { background: linear-gradient(180deg, #d9cdb0, #c8baa0) !important; } #rpg-app .rpg-game.rpg-game .duel2 .d2-tip { color: var(--m-ink-soft) !important; } #rpg-app .rpg-game.rpg-game .duel2 canvas { border-radius: 8px !important; box-shadow: 0 0 0 1px rgba(217, 181, 106, .5), 0 10px 26px rgba(0, 0, 0, .4) !important; } @media (prefers-reduced-motion: reduce) { #rpg-app .rpg-game.rpg-game .rpg-modal-wrap[data-pop] > .rpg-modal { animation: none !important; } } /* ---------- 예전 밝은 카드 정리 (대비 검사로 찾은 곳) ---------- */ /* UI 목록·카드 → 어두운 패널 */ #rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) :is(.viewing-options > button, .cinema-ranking li, .gacha-sets article, .keys-grid section, .looks-tabs button, .look-card, .view-pref label, .tree-stats span, .tree-log li, .map-places button, .goods-group, .ticket-strip, .pity-gauge, .live-reserve-pick label, .lucky-card, .raffle-source, .le-stage) { background: var(--m-cell) !important; color: var(--m-ink) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08) !important; border-color: rgba(255, 255, 255, .08) !important; } #rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) :is(.viewing-options > button, .cinema-ranking li, .gacha-sets article, .keys-grid section, .looks-tabs button, .look-card, .view-pref label, .tree-stats span, .tree-log li, .map-places button, .goods-group, .ticket-strip, .pity-gauge, .live-reserve-pick label, .lucky-card, .raffle-source, .le-stage) :is(b, strong, span, em, h3, p, li, td) { color: inherit; } #rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) :is(.look-card.on, .looks-tabs button[aria-selected=true], .looks-tabs button[aria-pressed=true], .viewing-options > button[aria-pressed=true]) { box-shadow: inset 0 0 0 1.5px var(--t-gold) !important; background: rgba(217, 181, 106, .1) !important; color: var(--t-gold-hi) !important; } #rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) :is(td, th) { background: rgba(255, 255, 255, .04) !important; color: var(--m-ink) !important; border-color: rgba(255, 255, 255, .08) !important; } #rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) :is(.pity-bar, .tree-stats i.bar, label i.bar) { background: rgba(255, 255, 255, .1) !important; } #rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) .village-map-canvas { background: #263043 !important; box-shadow: inset 0 0 0 1px rgba(217, 181, 106, .3) !important; } #rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) .map-places button b { background: rgba(217, 181, 106, .2) !important; color: var(--t-gold-hi) !important; } #rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) .village-map-legend :is(span, small), #rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) .map-legend span { color: var(--m-ink-soft) !important; } #rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) .screen-preview.mini-preview { background: #263043 !important; } #rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) :is(.qb-state, .qb-goal span) { color: #1d1608 !important; } #rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) .qb-main.st-active .qb-state, #rpg-app .rpg-game.rpg-game .rpg-modal .qb-main.st-locked .qb-state { color: #d9d2bf !important; } #rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) .qb-tabs button { background: var(--m-cell) !important; color: var(--m-ink-soft) !important; border-color: rgba(255, 255, 255, .1) !important; } #rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) .qb-tabs button[aria-pressed=true] { background: rgba(217, 181, 106, .14) !important; color: var(--t-gold-hi) !important; border-color: var(--t-gold) !important; } #rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) details > summary { color: var(--m-ink) !important; } /* 시작 안내 카드(.ticket): 어두운 패널 위 상아색 글 */ #rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) .ticket { background: var(--m-cell) !important; color: var(--m-ink) !important; box-shadow: inset 0 0 0 1px rgba(217, 181, 106, .25) !important; border-radius: 10px !important; } #rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) .ticket :is(p, b, small, span) { color: inherit !important; } #rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) .ticket > b { color: var(--t-gold-hi) !important; font-family: var(--h-display); } #rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) .ticket small { color: var(--m-ink-soft) !important; } /* 종이 소품(승차권·팻말·책장·스크린 미리보기)은 밝은 종이 그대로 + 짙은 글 */ #rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) :is(.ticket-card, .tree-how.plaque, .tree-page) { color: #2a2116 !important; } #rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) :is(.ticket-card, .tree-how.plaque, .tree-page) :is(b, strong, small, span, em, p) { color: #2a2116 !important; } #rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) :is(.ticket-card, .tree-how.plaque, .tree-page) small { color: #5a4a36 !important; } #rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) .ticket-stub b { color: #fff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); } #rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) .bus-ticket .t-stub :is(small, b) { color: #fff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); } #rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) .col-card .ring span { color: #2a2116 !important; } #rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) .gacha-fast-pull + *, #rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) [class*=pity] span { color: #ff9db1 !important; } #rpg-app .rpg-game.rpg-game .rpg-modal .rpg-btn.gold :is(small, span, b) { color: rgba(29, 22, 8, .78) !important; } #rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) .showtime-board small { color: #f2ead6 !important; } #rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) .bus-ticket .t-stub small { color: rgba(10, 30, 28, .85) !important; text-shadow: none; } #rpg-app .rpg-game.rpg-game .rpg-modal.menu-sheet .menu-grid button { --ic-ink: #f2d79a !important; --ic-fill: #34405c !important; --ic-accent: #d9b56a !important; --ic-light: #fff4d6 !important; } #rpg-app .rpg-game.rpg-game .rpg-modal.menu-sheet .menu-grid button svg * { stroke: var(--ic-ink); } #rpg-app .rpg-game.rpg-game .rpg-modal.quest .qb-tabs button[aria-pressed=true] { box-shadow: inset 0 0 0 1px var(--t-gold) !important; outline: none; } /* ========================================================================== 밤 편의점 2 · 야간 근무 ========================================================================== */ #rpg-app .store2 { display: grid; gap: 12px; color: var(--m-ink); } #rpg-app .store2.shake { animation: s2-shake .3s; } #rpg-app .store2 .s2-top { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 8px; } #rpg-app .store2 :is(.s2-clock, .s2-stat) { padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); display: grid; align-content: center; } #rpg-app .store2 small { font-size: 11px !important; letter-spacing: .08em; color: var(--m-ink-soft) !important; } #rpg-app .store2 .s2-stat b, #rpg-app .store2 .s2-clock b { font: 800 22px/1.1 var(--h-num); color: var(--m-ink); } #rpg-app .store2 .s2-stat em { font-style: normal; font-size: 12px; color: var(--m-ink-soft); } #rpg-app .store2 .s2-stat:has([data-served]) { grid-template-columns: auto auto; justify-content: start; column-gap: 4px; align-items: baseline; } #rpg-app .store2 .s2-stat:has([data-served]) small { grid-column: 1 / -1; } #rpg-app .store2 .s2-clock i { display: block; height: 5px; margin-top: 4px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; } #rpg-app .store2 .s2-clock u { display: block; height: 100%; background: linear-gradient(90deg, #9c7a3c, #f2d79a); } #rpg-app .store2.rush .s2-clock { box-shadow: inset 0 0 0 1px #e9506f, 0 0 16px rgba(233, 80, 111, .35); } #rpg-app .store2.rush .s2-clock u { background: linear-gradient(90deg, #a3324d, #ff8fae); } #rpg-app .store2 [data-hearts] b { display: flex; gap: 2px; font-size: 22px; } #rpg-app .store2 [data-hearts] i { font-style: normal; color: rgba(255, 255, 255, .15); } #rpg-app .store2 [data-hearts] i.on { color: #ff8fae; text-shadow: 0 0 10px rgba(255, 143, 174, .6); } #rpg-app .store2 .s2-floor { position: relative; min-height: 236px; padding: 44px 14px 14px; border-radius: 12px; background: radial-gradient(ellipse at 50% 0%, rgba(255, 230, 170, .1), transparent 60%), linear-gradient(180deg, #202a3e, #171e2d); box-shadow: inset 0 0 0 1px rgba(217, 181, 106, .25); } #rpg-app .store2.rush .s2-floor { box-shadow: inset 0 0 0 1px rgba(233, 80, 111, .55), inset 0 0 40px rgba(233, 80, 111, .12); } #rpg-app .store2 .s2-queue { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } #rpg-app .rpg-game.rpg-game .store2 .s2-guest { position: relative; display: grid; justify-items: center; align-content: start; gap: 5px; min-height: 176px; padding: 12px 8px 22px !important; cursor: pointer; text-align: center; border: 0 !important; border-radius: 12px !important; background: rgba(255, 255, 255, .05) !important; color: var(--m-ink) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1) !important; transition: transform .12s ease, box-shadow .12s ease; } #rpg-app .rpg-game.rpg-game .store2 .s2-guest:hover { transform: translateY(-3px); } #rpg-app .rpg-game.rpg-game .store2 .s2-guest.on { background: rgba(217, 181, 106, .12) !important; box-shadow: inset 0 0 0 2px #f2d79a, 0 0 24px rgba(217, 181, 106, .35) !important; transform: translateY(-4px); } #rpg-app .rpg-game.rpg-game .store2 .s2-guest.danger { animation: s2-pulse .7s ease-in-out infinite; } #rpg-app .store2 .s2-face { font-size: 38px; line-height: 1; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .4)); } #rpg-app .store2 .s2-name { display: grid; gap: 1px; } #rpg-app .store2 .s2-name b { font-size: 13.5px; } #rpg-app .store2 .s2-name small { font-size: 10.5px !important; letter-spacing: 0; color: #f2d79a !important; } #rpg-app .store2 .t-rush .s2-name small { color: #ffb08a !important; } #rpg-app .store2 .t-fan .s2-name small { color: #ff9db1 !important; } #rpg-app .store2 .t-picky .s2-name small { color: #b9c6ff !important; } #rpg-app .store2 .s2-order { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; } #rpg-app .store2 .s2-order i { font-style: normal; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: rgba(0, 0, 0, .3); font-size: 18px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); } #rpg-app .store2 .s2-order i.got { background: rgba(143, 227, 196, .2); box-shadow: inset 0 0 0 1px #8fe3c4; opacity: .55; } #rpg-app .store2 .s2-pat { position: absolute; left: 10px; right: 10px; bottom: 9px; height: 5px; border-radius: 3px; background: rgba(0, 0, 0, .35); overflow: hidden; } #rpg-app .store2 .s2-pat u { display: block; height: 100%; background: #8fe3c4; transition: width .1s linear; } #rpg-app .store2 .s2-tipb { position: absolute; right: 6px; top: 6px; font-style: normal; font: 800 10px/1.6 var(--h-num); padding: 0 6px; border-radius: 4px; background: rgba(217, 181, 106, .18); color: #f2d79a; } #rpg-app .store2 .s2-empty { grid-column: 1 / -1; text-align: center; color: var(--m-ink-soft); padding: 60px 0; margin: 0; } #rpg-app .store2 .s2-pop { position: absolute; left: 12px; right: 12px; top: 8px; height: 28px; display: flex; justify-content: center; align-items: center; gap: 6px; pointer-events: none; z-index: 3; overflow: hidden; } #rpg-app .store2 .s2-float { flex: none; padding: 3px 12px; border-radius: 6px; font-weight: 800; font-size: 13px; white-space: nowrap; background: rgba(10, 14, 24, .85); color: #fbf5e6; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); animation: s2-float 1.3s ease forwards; } #rpg-app .store2 .s2-float.coin { color: #f2d79a; box-shadow: inset 0 0 0 1px #d9b56a; font-family: var(--h-num); font-size: 15px; } #rpg-app .store2 .s2-float.combo { color: #8fe3c4; } #rpg-app .store2 .s2-float.bad { color: #ff9db1; box-shadow: inset 0 0 0 1px #e9506f; } #rpg-app .store2 .s2-float.warn { color: #ffd08a; } #rpg-app .store2 .s2-count { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; font: 900 64px/1 var(--h-display); color: #f2d79a; text-shadow: 0 4px 20px rgba(0, 0, 0, .6); } #rpg-app .store2 .s2-count:empty { display: none; } #rpg-app .store2 .s2-shelf { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; } #rpg-app .store2 .s2-slot { position: relative; display: grid; gap: 4px; } #rpg-app .rpg-game.rpg-game .store2 .s2-item { position: relative; display: grid; justify-items: center; gap: 2px; padding: 10px 4px 8px !important; cursor: pointer; border: 0 !important; border-radius: 10px !important; background: linear-gradient(180deg, #2a3450, #1f273a) !important; color: var(--m-ink) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 3px 0 rgba(0, 0, 0, .35) !important; transition: transform .08s ease; } #rpg-app .rpg-game.rpg-game .store2 .s2-item:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1) !important; } #rpg-app .rpg-game.rpg-game .store2 .s2-slot.want .s2-item { box-shadow: inset 0 0 0 2px #f2d79a, 0 0 16px rgba(217, 181, 106, .35), 0 3px 0 rgba(0, 0, 0, .35) !important; } #rpg-app .rpg-game.rpg-game .store2 .s2-slot.out .s2-item { opacity: .45; filter: grayscale(.7); } #rpg-app .rpg-game.rpg-game .store2 .s2-item:disabled { opacity: .5; cursor: wait; } #rpg-app .store2 .s2-item kbd { position: absolute; left: 6px; top: 6px; font: 800 10px/1 var(--h-num) !important; padding: 3px 5px; } #rpg-app .store2 .s2-item > span:first-of-type { font-size: 28px; line-height: 1.1; } #rpg-app .store2 .s2-item b { font-size: 12px; } #rpg-app .store2 .s2-pips { display: flex; gap: 3px; margin-top: 2px; } #rpg-app .store2 .s2-pips i { width: 9px; height: 5px; border-radius: 2px; background: rgba(255, 255, 255, .12); } #rpg-app .store2 .s2-pips i.on { background: #8fe3c4; } #rpg-app .store2 .s2-slot:has(.s2-pips i.on:only-of-type) .s2-pips i.on, #rpg-app .store2 .s2-slot.out .s2-pips i { background: #e9506f; } #rpg-app .rpg-game.rpg-game .store2 .s2-fill { min-height: 28px; border: 0 !important; border-radius: 6px !important; background: rgba(255, 255, 255, .05) !important; color: var(--m-ink-soft) !important; font: 700 11.5px/1 var(--h-body) !important; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08) !important; } #rpg-app .rpg-game.rpg-game .store2 .s2-slot.out .s2-fill:not(:disabled) { color: #ffd08a !important; box-shadow: inset 0 0 0 1px #d9b56a !important; } #rpg-app .rpg-game.rpg-game .store2 .s2-fill:disabled { opacity: .45; cursor: default; } #rpg-app .store2 .s2-busybar { position: absolute; left: 4px; right: 4px; bottom: 34px; height: 4px; border-radius: 2px; background: rgba(0, 0, 0, .4); overflow: hidden; } #rpg-app .store2 .s2-busybar u { display: block; height: 100%; background: #f2d79a; } #rpg-app .store2 .s2-tip { margin: 0; text-align: center; font-size: 12.5px; color: var(--m-ink-soft); } @keyframes s2-in { from { opacity: 0; transform: translateY(10px); } } @keyframes s2-pulse { 50% { box-shadow: inset 0 0 0 2px #e9506f, 0 0 18px rgba(233, 80, 111, .5) !important; } } @keyframes s2-float { 0% { opacity: 0; transform: translateY(6px); } 12% { opacity: 1; transform: none; } 82% { opacity: 1; } 100% { opacity: 0; } } @keyframes s2-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } @media (max-width: 720px) { #rpg-app .store2 .s2-top { grid-template-columns: repeat(4, 1fr); } #rpg-app .store2 .s2-clock { grid-column: 1 / -1; } #rpg-app .store2 .s2-queue { grid-template-columns: repeat(3, 1fr); } #rpg-app .store2 .s2-shelf { grid-template-columns: repeat(3, 1fr); } } @media (prefers-reduced-motion: reduce) { #rpg-app .store2 :is(.s2-guest, .s2-float), #rpg-app .store2.shake { animation: none !important; } } #rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) .ticket::before, #rpg-app .rpg-game.rpg-game .rpg-modal:not(.midnight-cafe) .ticket::after { display: none !important; } #rpg-app .rpg-game.rpg-game .store2 .s2-guest.enter { animation: s2-in .3s ease both; } /* ---------- 야간 근무 · 3D 디오라마 배치 ---------- */ #rpg-app .store2.dio { gap: 8px; } #rpg-app .store2.dio .s2-stage { position: relative; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: #151b2a; box-shadow: inset 0 0 0 1px rgba(217, 181, 106, .35), 0 10px 30px rgba(0, 0, 0, .4); } #rpg-app .store2.dio .s2-stage > canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; } #rpg-app .store2.dio.rush .s2-stage { box-shadow: inset 0 0 0 2px rgba(233, 80, 111, .7), inset 0 0 60px rgba(233, 80, 111, .25), 0 10px 30px rgba(0, 0, 0, .4); } /* 위 HUD: 작은 유리 알약 */ #rpg-app .store2.dio .s2-hud-top { position: absolute; left: 10px; top: 10px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 4; pointer-events: none; } #rpg-app .store2.dio .s2-pill { display: grid; align-content: center; min-width: 74px; padding: 5px 12px; border-radius: 999px; background: rgba(12, 16, 26, .72); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(217, 181, 106, .35); } #rpg-app .store2.dio .s2-pill small { font-size: 9.5px !important; letter-spacing: .08em; color: #b8b19e !important; line-height: 1.2; } #rpg-app .store2.dio .s2-pill b { font: 800 17px/1.15 var(--h-num); color: #fbf5e6; } #rpg-app .store2.dio .s2-pill.clock { min-width: 140px; border-radius: 12px; } #rpg-app .store2.dio .s2-pill.clock i { display: block; height: 4px; margin-top: 3px; border-radius: 2px; background: rgba(255, 255, 255, .12); overflow: hidden; } #rpg-app .store2.dio .s2-pill.clock u { display: block; height: 100%; background: linear-gradient(90deg, #9c7a3c, #f2d79a); } #rpg-app .store2.dio.rush .s2-pill.clock { box-shadow: inset 0 0 0 1px #e9506f, 0 0 14px rgba(233, 80, 111, .5); } #rpg-app .store2.dio.rush .s2-pill.clock u { background: linear-gradient(90deg, #a3324d, #ff8fae); } #rpg-app .store2.dio .s2-pill.goal { grid-template-columns: auto auto; column-gap: 3px; align-items: baseline; } #rpg-app .store2.dio .s2-pill.goal small { grid-column: 1 / -1; } #rpg-app .store2.dio .s2-pill.goal em { font-style: normal; font-size: 11px; color: #b8b19e; } #rpg-app .store2.dio [data-hearts] b { display: flex; gap: 1px; font-size: 16px; } #rpg-app .store2.dio [data-hearts] i { font-style: normal; color: rgba(255, 255, 255, .15); } #rpg-app .store2.dio [data-hearts] i.on { color: #ff8fae; } /* 머리 위 말풍선 */ #rpg-app .store2.dio .s2-bubbles { position: absolute; inset: 0; z-index: 3; pointer-events: none; } #rpg-app .rpg-game.rpg-game .store2.dio .s2-bubble { position: absolute; transform: translate(-50%, -100%); pointer-events: auto; cursor: pointer; display: grid; justify-items: center; gap: 4px; padding: 6px 9px 9px !important; border: 0 !important; border-radius: 12px !important; background: rgba(255, 250, 240, .96) !important; color: #2a2116 !important; box-shadow: 0 0 0 1.5px rgba(120, 90, 40, .35), 0 6px 14px rgba(0, 0, 0, .35) !important; transition: box-shadow .12s, transform .12s; } #rpg-app .rpg-game.rpg-game .store2.dio .s2-bubble::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: inherit; transform: translateX(-50%) rotate(45deg); box-shadow: 1.5px 1.5px 0 rgba(120, 90, 40, .35); } #rpg-app .rpg-game.rpg-game .store2.dio .s2-bubble.on { box-shadow: 0 0 0 3px #f2d79a, 0 0 22px rgba(242, 215, 154, .8), 0 6px 14px rgba(0, 0, 0, .35) !important; transform: translate(-50%, -100%) scale(1.08); z-index: 2; } #rpg-app .rpg-game.rpg-game .store2.dio .s2-bubble.danger { animation: s2-dpulse .6s ease-in-out infinite; } #rpg-app .rpg-game.rpg-game .store2.dio .s2-bubble.walking { opacity: .75; } #rpg-app .store2.dio .s2-who { display: flex; align-items: center; gap: 4px; font-size: 15px; line-height: 1; } #rpg-app .store2.dio .s2-who b { font: 800 11px/1 var(--h-body); color: #2a2116; } #rpg-app .store2.dio .s2-who em { font-style: normal; font: 900 9.5px/1.5 var(--h-num); padding: 0 5px; border-radius: 4px; background: #2a2116; color: #f2d79a; } #rpg-app .store2.dio .t-rush .s2-who em { background: #c4502a; color: #fff; } #rpg-app .store2.dio .t-fan .s2-who em { background: #d94a7a; color: #fff; } #rpg-app .store2.dio .t-picky .s2-who em { background: #5a6aa8; color: #fff; } #rpg-app .store2.dio .s2-order { display: flex; gap: 2px; } #rpg-app .store2.dio .s2-order i { width: 24px; height: 24px; font-size: 16px; border-radius: 6px; background: #efe5cc; box-shadow: none; display: grid; place-items: center; font-style: normal; } #rpg-app .store2.dio .s2-order i.got { background: #b9e8d4; opacity: .5; } #rpg-app .store2.dio .s2-bubble .s2-pat { position: static; width: 100%; height: 5px; border-radius: 3px; background: rgba(0, 0, 0, .12); overflow: hidden; } #rpg-app .store2.dio .s2-bubble .s2-pat u { display: block; height: 100%; background: #3fae86; } /* 아래 HUD: 둥근 상품 버튼 */ #rpg-app .store2.dio .s2-hud-bottom { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 10px; z-index: 4; padding: 8px 12px 6px; border-radius: 16px; background: rgba(12, 16, 26, .7); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(217, 181, 106, .3); } #rpg-app .store2.dio .s2-btn { position: relative; display: grid; justify-items: center; gap: 2px; } #rpg-app .rpg-game.rpg-game .store2.dio .s2-item { position: relative; width: 58px; height: 58px; padding: 0 !important; display: grid; place-items: center; cursor: pointer; border: 0 !important; border-radius: 50% !important; background: radial-gradient(circle at 50% 35%, #fff8e6, #e9dcbc) !important; box-shadow: 0 0 0 2px #9c7a3c, 0 4px 0 #6b5428, 0 6px 12px rgba(0, 0, 0, .4) !important; transition: transform .08s; } #rpg-app .rpg-game.rpg-game .store2.dio .s2-item > span { font-size: 28px; line-height: 1; } #rpg-app .rpg-game.rpg-game .store2.dio .s2-item:active { transform: translateY(3px); box-shadow: 0 0 0 2px #9c7a3c, 0 1px 0 #6b5428 !important; } #rpg-app .rpg-game.rpg-game .store2.dio .s2-btn.want .s2-item { box-shadow: 0 0 0 3px #f2d79a, 0 0 18px rgba(242, 215, 154, .9), 0 4px 0 #6b5428 !important; animation: s2-want 1s ease-in-out infinite; } #rpg-app .rpg-game.rpg-game .store2.dio .s2-btn.out .s2-item { filter: grayscale(.9) brightness(.6); } #rpg-app .rpg-game.rpg-game .store2.dio .s2-item:disabled { filter: brightness(.6); cursor: wait; } #rpg-app .store2.dio .s2-item kbd { position: absolute; left: -2px; top: -2px; min-width: 17px; height: 17px; padding: 0 3px; display: grid; place-items: center; font: 900 10px/1 var(--h-num) !important; border-radius: 5px !important; } #rpg-app .store2.dio .s2-stock { position: absolute; right: -3px; bottom: -3px; min-width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; font-style: normal; font: 900 11px/1 var(--h-num); background: #2a3348; color: #8fe3c4; box-shadow: 0 0 0 1.5px #141a28; } #rpg-app .store2.dio .s2-btn.out .s2-stock { background: #c0453b; color: #fff; } #rpg-app .store2.dio .s2-btn > small { font-size: 10px !important; color: #d9d2bf !important; letter-spacing: 0; white-space: nowrap; } #rpg-app .rpg-game.rpg-game .store2.dio .s2-fill { position: absolute; right: -10px; top: -8px; width: 22px; height: 22px; min-height: 0; padding: 0 !important; border-radius: 50% !important; font-size: 13px !important; font-weight: 900 !important; background: #2a3348 !important; color: #f2d79a !important; box-shadow: 0 0 0 1.5px #d9b56a !important; cursor: pointer; } #rpg-app .rpg-game.rpg-game .store2.dio .s2-btn.out .s2-fill:not(:disabled) { background: #d9b56a !important; color: #1d1608 !important; animation: s2-want .8s ease-in-out infinite; } #rpg-app .rpg-game.rpg-game .store2.dio .s2-fill:disabled { opacity: 0; pointer-events: none; } #rpg-app .rpg-game.rpg-game .store2.dio .s2-btn.busy .s2-fill { opacity: 1; } /* 알림 · 카운트다운 */ #rpg-app .store2.dio .s2-pop { position: absolute; left: 0; right: 0; top: 64px; height: auto; display: flex; justify-content: center; gap: 6px; z-index: 5; pointer-events: none; } #rpg-app .store2.dio .s2-count { z-index: 6; font-size: 72px; } #rpg-app .store2.dio .s2-tip { font-size: 12px; } @keyframes s2-dpulse { 50% { box-shadow: 0 0 0 3px #e9506f, 0 0 18px rgba(233, 80, 111, .8) !important; } } @keyframes s2-want { 50% { transform: translateY(-3px); } } @media (max-width: 720px) { #rpg-app .store2.dio .s2-stage { aspect-ratio: 3 / 4; } #rpg-app .store2.dio .s2-hud-bottom { gap: 4px; padding: 6px; width: calc(100% - 16px); justify-content: space-between; } #rpg-app .rpg-game.rpg-game .store2.dio .s2-item { width: 44px; height: 44px; } #rpg-app .rpg-game.rpg-game .store2.dio .s2-item > span { font-size: 22px; } #rpg-app .store2.dio .s2-btn > small { display: none; } #rpg-app .store2.dio .s2-pill { min-width: 0; padding: 4px 9px; } #rpg-app .store2.dio .s2-pill.clock { min-width: 110px; } } @media (prefers-reduced-motion: reduce) { #rpg-app .store2.dio :is(.s2-bubble, .s2-item, .s2-fill) { animation: none !important; } } #rpg-app .store2.dio .s2-hud-top { right: auto; } /* ---------- 포스기 ---------- */ #rpg-app .store2.dio .s2-main { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 10px; align-items: stretch; } #rpg-app .store2.dio .s2-pos { display: grid; grid-template-rows: auto 1fr auto; gap: 10px; padding: 12px; border-radius: 14px; background: linear-gradient(180deg, #3a3f4c, #262a34); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), inset 0 0 0 1px rgba(0, 0, 0, .5), 0 10px 26px rgba(0, 0, 0, .45); } #rpg-app .store2.dio .s2-pos header { display: flex; justify-content: space-between; align-items: baseline; padding: 0 2px; } #rpg-app .store2.dio .s2-pos header b { font: 900 14px/1 var(--h-num); letter-spacing: .2em; color: #8fe3c4; } #rpg-app .store2.dio .s2-pos header small { color: #d9d2bf !important; font-size: 12px !important; letter-spacing: 0; } #rpg-app .store2.dio .s2-pos-screen { display: grid; grid-template-rows: 1fr auto; min-height: 170px; padding: 10px 12px; border-radius: 8px; background: linear-gradient(180deg, #0f1f1a, #0b1713); box-shadow: inset 0 0 0 2px #050a08, inset 0 0 24px rgba(143, 227, 196, .08); font-family: "Outfit", "Noto Sans KR", monospace; color: #b9f5dd; } #rpg-app .store2.dio .s2-pos-screen.idle { place-items: center; text-align: center; } #rpg-app .store2.dio .s2-pos-screen.idle p { margin: 0; font-size: 18px; font-weight: 800; } #rpg-app .store2.dio .s2-pos-screen.idle small { color: #6fae95 !important; } #rpg-app .store2.dio .s2-pos-screen ul { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; gap: 3px; max-height: 150px; overflow: auto; } #rpg-app .store2.dio .s2-pos-screen li { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: #b9f5dd !important; animation: pos-line .2s ease; } #rpg-app .store2.dio .s2-pos-screen li b { font-weight: 700; color: #e9fff6; } #rpg-app .store2.dio .s2-pos-screen li.empty { color: #5f9a83 !important; justify-content: center; padding-top: 30px; animation: none; } #rpg-app .store2.dio .s2-pos-sum { display: flex; justify-content: space-between; align-items: baseline; padding-top: 6px; margin-top: 6px; border-top: 1px dashed rgba(143, 227, 196, .35); } #rpg-app .store2.dio .s2-pos-sum span { font-size: 12px; color: #6fae95; } #rpg-app .store2.dio .s2-pos-sum b { font: 900 24px/1 var(--h-num); color: #e9fff6; text-shadow: 0 0 8px rgba(143, 227, 196, .6); } #rpg-app .store2.dio .s2-pos-act { display: grid; gap: 8px; } #rpg-app .store2.dio .s2-pos-hint { margin: 0; font-size: 12.5px; color: #d9d2bf; text-align: center; } #rpg-app .store2.dio .s2-pos-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } #rpg-app .rpg-game.rpg-game .store2.dio .s2-pk { position: relative; min-height: 44px; padding: 6px 8px !important; border: 0 !important; border-radius: 8px !important; cursor: pointer; background: linear-gradient(180deg, #f4efe2, #d8cfba) !important; color: #23252c !important; font: 800 14px/1.1 var(--h-body) !important; box-shadow: inset 0 1px 0 #fff, 0 3px 0 #8a826f, 0 5px 8px rgba(0, 0, 0, .35) !important; transition: transform .06s; } #rpg-app .rpg-game.rpg-game .store2.dio .s2-pk:active { transform: translateY(3px); box-shadow: inset 0 1px 0 #fff, 0 0 0 #8a826f !important; } #rpg-app .rpg-game.rpg-game .store2.dio .s2-pk.total { background: linear-gradient(180deg, #7fe0b8, #3fae86) !important; color: #06281c !important; box-shadow: inset 0 1px 0 #c8ffe9, 0 3px 0 #1f6e52, 0 5px 8px rgba(0, 0, 0, .35) !important; min-height: 48px; font-size: 15px !important; } #rpg-app .rpg-game.rpg-game .store2.dio .s2-pk:disabled { filter: grayscale(.6) brightness(.7); cursor: not-allowed; } #rpg-app .store2.dio .s2-pk kbd { margin-left: 4px; font: 800 10px/1 var(--h-num) !important; padding: 2px 4px; border-radius: 3px !important; background: rgba(0, 0, 0, .7) !important; color: #fff !important; box-shadow: none !important; } #rpg-app .store2.dio .s2-pos-cash { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; padding: 8px 10px; border-radius: 8px; background: rgba(0, 0, 0, .25); } #rpg-app .store2.dio .s2-pos-cash dt { font-size: 12px; color: #b8b19e; } #rpg-app .store2.dio .s2-pos-cash dd { margin: 0; text-align: right; font: 800 15px/1.3 var(--h-num); color: #fbf5e6; } #rpg-app .store2.dio .s2-pos-cash dd.hidden { color: #ffb08a; font-family: var(--h-body); font-size: 13px; } #rpg-app .store2.dio .s2-pos-cash dd.given { font-size: 18px; } #rpg-app .store2.dio .s2-pos-cash dd.given.ok { color: #8fe3c4; } #rpg-app .store2.dio .s2-pos-cash dd.given.over { color: #ff9db1; } #rpg-app .store2.dio .s2-coins { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } #rpg-app .rpg-game.rpg-game .store2.dio .s2-pk.coin { display: grid; justify-items: center; gap: 3px; min-height: 52px; font: 900 14px/1 var(--h-num) !important; } #rpg-app .rpg-game.rpg-game .store2.dio .s2-pk.c5000 { background: linear-gradient(180deg, #ffd9a0, #e8a85a) !important; } #rpg-app .rpg-game.rpg-game .store2.dio .s2-pk.c1000 { background: linear-gradient(180deg, #bfe3ff, #7cb5e6) !important; } #rpg-app .rpg-game.rpg-game .store2.dio .s2-pk.c500, #rpg-app .rpg-game.rpg-game .store2.dio .s2-pk.c100 { border-radius: 50% !important; aspect-ratio: 1; min-height: 0; background: radial-gradient(circle at 40% 35%, #f4f4f4, #b8bcc4) !important; } #rpg-app .store2.dio .s2-pk.coin kbd { margin: 0; } #rpg-app .store2.dio .s2-paywith { font: 800 11.5px/1.3 var(--h-body); padding: 2px 8px; border-radius: 5px; background: #2a2116; color: #f2d79a; } @keyframes pos-line { from { opacity: 0; transform: translateX(-6px); } } @media (max-width: 900px) { #rpg-app .store2.dio .s2-main { grid-template-columns: 1fr; } #rpg-app .store2.dio .s2-pos-screen { min-height: 120px; } } #rpg-app .rpg-game.rpg-game .rpg-modal .store2.dio .s2-pos header b { color: #8fe3c4 !important; font-family: var(--h-num) !important; } /* ========================================================================== 포스기 1인칭: 계산대 위(물건·스캐너·돈) + 모니터 + 키보드 + 돈통 ========================================================================== */ #rpg-app .rpg-game.rpg-game .rpg-modal-wrap:not(.cinema-viewer):not(.village-playing):not(.cinema-window) > .rpg-modal.place.mini.store { width: min(1320px, 100%) !important; } #rpg-app .store2.dio.pos .s2-main { grid-template-columns: minmax(0, 1fr) 540px; gap: 12px; } #rpg-app .store2.dio.pos .s2-left { display: grid; gap: 8px; align-content: start; } #rpg-app .store2.dio.pos .s2-stage { aspect-ratio: 16 / 10.5; } /* 매장 아래 진열대 재고 띠 */ #rpg-app .store2.dio.pos .s2-hud-bottom { gap: 6px; padding: 6px 10px; align-items: center; } #rpg-app .store2.dio.pos .s2-shelf-label { font-size: 10.5px; font-weight: 800; color: #b8b19e; letter-spacing: .08em; margin-right: 2px; } #rpg-app .rpg-game.rpg-game .store2.dio.pos .s2-stockchip { position: relative; display: grid; justify-items: center; gap: 3px; min-width: 50px; padding: 4px 6px 5px !important; border: 0 !important; border-radius: 8px !important; background: rgba(255, 255, 255, .06) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1) !important; cursor: pointer; color: #fbf5e6 !important; } #rpg-app .rpg-game.rpg-game .store2.dio.pos .s2-stockchip:disabled { cursor: default; } #rpg-app .store2.dio.pos .s2-stockchip > span { font-size: 20px; line-height: 1; } #rpg-app .store2.dio.pos .s2-stockchip i { display: flex; gap: 2px; } #rpg-app .store2.dio.pos .s2-stockchip i b { width: 7px; height: 4px; border-radius: 1px; background: rgba(255, 255, 255, .15); } #rpg-app .store2.dio.pos .s2-stockchip i b.on { background: #8fe3c4; } #rpg-app .store2.dio.pos .s2-stockchip.low i b.on { background: #e6b04a; } #rpg-app .rpg-game.rpg-game .store2.dio.pos .s2-stockchip.out { box-shadow: inset 0 0 0 1.5px #e9506f, 0 0 12px rgba(233, 80, 111, .4) !important; animation: s2-want .8s ease-in-out infinite; } #rpg-app .store2.dio.pos .s2-stockchip em { position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); white-space: nowrap; font-style: normal; font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 4px; background: #c0453b; color: #fff; } #rpg-app .store2.dio.pos .s2-stockchip.busy em { background: #d9b56a; color: #1d1608; } /* 계산대 위 */ #rpg-app .store2.dio.pos .s2-counter { position: relative; display: grid; grid-template-columns: 1fr 96px; gap: 8px; min-height: 112px; } #rpg-app .store2.dio.pos .s2-mat { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 10px), linear-gradient(180deg, #8a8f99, #6d727c); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .4); } #rpg-app .store2.dio.pos .s2-mat.empty { justify-content: center; color: #e9e4d4; font-size: 13px; font-weight: 700; } #rpg-app .store2.dio.pos .s2-goods { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; } #rpg-app .rpg-game.rpg-game .store2.dio.pos .s2-good { position: relative; display: grid; justify-items: center; gap: 2px; width: 74px; padding: 6px 4px 4px !important; border: 0 !important; border-radius: 6px !important; cursor: pointer; background: linear-gradient(180deg, #fffdf6, #efe7d4) !important; color: #2a2116 !important; box-shadow: 0 3px 0 #a99f88, 0 6px 10px rgba(0, 0, 0, .35) !important; transform: rotate(var(--r, -2deg)); transition: transform .1s; animation: s2-in .25s ease both; } #rpg-app .rpg-game.rpg-game .store2.dio.pos .s2-good:nth-child(2n) { --r: 2deg; } #rpg-app .rpg-game.rpg-game .store2.dio.pos .s2-good:nth-child(3n) { --r: -1deg; } #rpg-app .rpg-game.rpg-game .store2.dio.pos .s2-good:hover:not(:disabled) { transform: translateY(-4px) rotate(0); box-shadow: 0 0 0 2px #ff3b3b, 0 0 16px rgba(255, 59, 59, .55), 0 6px 10px rgba(0, 0, 0, .35) !important; } #rpg-app .rpg-game.rpg-game .store2.dio.pos .s2-good:disabled { cursor: default; opacity: .85; } #rpg-app .store2.dio.pos .s2-good > span { font-size: 26px; line-height: 1.1; } #rpg-app .store2.dio.pos .s2-good b { font-size: 10.5px; } #rpg-app .store2.dio.pos .s2-good .bc { width: 46px; height: 12px; background: repeating-linear-gradient(90deg, #222 0 1px, transparent 1px 2px, #222 2px 4px, transparent 4px 5px, #222 5px 6px, transparent 6px 8px); } #rpg-app .store2.dio.pos .s2-good.out em { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 900; color: #fff; background: rgba(192, 69, 59, .82); border-radius: 6px; } #rpg-app .store2.dio.pos .s2-done { margin: 0; color: #fbf5e6; font-weight: 700; font-size: 13.5px; } #rpg-app .store2.dio.pos .s2-done b { color: #8fe3c4; } #rpg-app .store2.dio.pos .s2-bag { display: flex; flex-wrap: wrap; gap: 2px; max-width: 90px; padding: 6px; min-height: 40px; border-radius: 8px; background: rgba(255, 255, 255, .85); box-shadow: inset 0 0 0 2px #d8d0bc; font-size: 15px; } #rpg-app .store2.dio.pos .s2-bag::before { content: "봉투"; flex-basis: 100%; font-size: 9px; font-weight: 800; color: #8a7f68; } #rpg-app .store2.dio.pos .s2-money { flex: none; display: grid; place-items: center; animation: money-in .35s cubic-bezier(.2, 1.4, .4, 1) both; } #rpg-app .store2.dio.pos .s2-money.card { width: 96px; height: 60px; border-radius: 8px; background: linear-gradient(135deg, #2b4a8a, #5a3a9a); box-shadow: 0 6px 12px rgba(0, 0, 0, .4); color: #fff; transform: rotate(-6deg); } #rpg-app .store2.dio.pos .s2-money.card i { position: absolute; width: 18px; height: 14px; margin: -14px 0 0 -46px; border-radius: 3px; background: linear-gradient(135deg, #f2d79a, #b38d45); } #rpg-app .store2.dio.pos .s2-money.card b { font-size: 11px; margin-top: 18px; letter-spacing: .1em; } #rpg-app .store2.dio.pos .s2-money.bill { width: 120px; height: 58px; border-radius: 4px; transform: rotate(4deg); box-shadow: 0 6px 12px rgba(0, 0, 0, .4); color: #2a2116; grid-template-columns: auto auto; column-gap: 2px; align-content: center; justify-content: center; background: radial-gradient(circle at 78% 50%, rgba(255, 255, 255, .5) 0 14px, transparent 15px), linear-gradient(90deg, var(--bc) , color-mix(in srgb, var(--bc) 70%, #fff)); } #rpg-app .store2.dio.pos .s2-money.b1000 { --bc: #8fb6e0; } #rpg-app .store2.dio.pos .s2-money.b5000 { --bc: #e8b27a; } #rpg-app .store2.dio.pos .s2-money.b10000 { --bc: #9cc79a; } #rpg-app .store2.dio.pos .s2-money.bill b { font: 900 18px/1 var(--h-num); } #rpg-app .store2.dio.pos .s2-money.bill small { font-size: 11px !important; color: #2a2116 !important; } /* 손 스캐너 */ #rpg-app .store2.dio.pos .s2-scanner { position: relative; border-radius: 10px; background: linear-gradient(180deg, #2c2f36, #1c1e23); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 6px 14px rgba(0, 0, 0, .4); overflow: hidden; } #rpg-app .store2.dio.pos .s2-scanner::before { content: ""; position: absolute; left: 22px; top: 14px; width: 52px; height: 40px; border-radius: 10px 10px 6px 6px; background: linear-gradient(180deg, #3b3f48, #24262c); box-shadow: inset 0 -6px 0 #b8202a; } #rpg-app .store2.dio.pos .s2-scanner::after { content: ""; position: absolute; left: 36px; top: 50px; width: 24px; height: 52px; border-radius: 6px; background: linear-gradient(90deg, #2a2d33, #3b3f48); } #rpg-app .store2.dio.pos .s2-scanner i { position: absolute; left: 10px; right: 10px; top: 58px; height: 3px; border-radius: 2px; background: #ff2a2a; opacity: .25; box-shadow: 0 0 8px #ff2a2a; } #rpg-app .store2.dio.pos .s2-scanner.beep i { animation: laser .35s ease-out; } /* 포스기 본체 */ #rpg-app .store2.dio.pos .pm { display: grid; gap: 8px; align-content: start; } #rpg-app .store2.dio.pos .pm-monitor { position: relative; padding: 12px 12px 20px; border-radius: 12px; background: linear-gradient(180deg, #2a2c31, #17181b); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 10px 26px rgba(0, 0, 0, .5); } #rpg-app .store2.dio.pos .pm-brand { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font-style: normal; font: 800 8.5px/1 var(--h-num); letter-spacing: .3em; color: #6b6f78; } #rpg-app .store2.dio.pos .pm-screen { display: grid; grid-template-rows: auto 1fr auto; height: 270px; border-radius: 3px; overflow: hidden; background: #f3f6f4; color: #1d2a26; box-shadow: inset 0 0 0 2px #050607; font-family: "Noto Sans KR", sans-serif; } #rpg-app .store2.dio.pos .ps-top { display: flex; align-items: center; gap: 10px; padding: 5px 10px; background: linear-gradient(180deg, #1aa35a, #128246); color: #fff; font-size: 10.5px; } #rpg-app .store2.dio.pos .ps-top b { font: 900 13px/1 var(--h-num); letter-spacing: .02em; color: #fff; margin-right: auto; } #rpg-app .store2.dio.pos .ps-top span { color: #dff5e8; } #rpg-app .store2.dio.pos .ps-on { font-style: normal; font-weight: 900; padding: 1px 6px; border-radius: 3px; background: #0b5c31; } #rpg-app .store2.dio.pos .ps-body { display: grid; grid-template-columns: 1fr 180px; min-height: 0; } #rpg-app .store2.dio.pos .ps-list { width: 100%; border-collapse: collapse; align-self: start; font-size: 11.5px; } #rpg-app .rpg-game.rpg-game .rpg-modal .store2.dio.pos .ps-list :is(th, td) { background: transparent !important; color: #1d2a26 !important; border: 0 !important; padding: 4px 6px; text-align: right; } #rpg-app .rpg-game.rpg-game .rpg-modal .store2.dio.pos .ps-list th { background: #2f3a4f !important; color: #fff !important; font-weight: 700; font-size: 10.5px; } #rpg-app .rpg-game.rpg-game .rpg-modal .store2.dio.pos .ps-list :is(th, td):nth-child(2) { text-align: left; } #rpg-app .rpg-game.rpg-game .rpg-modal .store2.dio.pos .ps-list tbody tr:nth-child(odd) td { background: #e6ede9 !important; } #rpg-app .rpg-game.rpg-game .rpg-modal .store2.dio.pos .ps-list tbody tr:last-child:not(.empty) td { background: #d4f0df !important; font-weight: 800; } #rpg-app .rpg-game.rpg-game .rpg-modal .store2.dio.pos .ps-list tr.empty td { text-align: center; color: #8a9690 !important; padding-top: 30px; background: transparent !important; } #rpg-app .store2.dio.pos .ps-sum { margin: 0; display: grid; grid-template-columns: auto 1fr; align-content: start; gap: 2px 6px; padding: 8px; background: #263043; color: #fff; } #rpg-app .store2.dio.pos .ps-sum dt { font-size: 10.5px; color: #aeb8c9; align-self: center; } #rpg-app .store2.dio.pos .ps-sum dd { margin: 0; text-align: right; font: 800 14px/1.5 var(--h-num); color: #fff; background: rgba(0, 0, 0, .25); padding: 0 6px; border-radius: 3px; min-height: 21px; } #rpg-app .store2.dio.pos .ps-sum dd.big { font-size: 20px; color: #ffe27a; } #rpg-app .store2.dio.pos .ps-sum dd.typing { background: #fff; color: #1d2a26; box-shadow: inset 0 0 0 2px #1aa35a; } #rpg-app .store2.dio.pos .ps-sum dd.typing u { text-decoration: none; animation: blink 1s steps(1) infinite; color: #1aa35a; } #rpg-app .store2.dio.pos .ps-sum dd.chg { color: #8fe3c4; font-size: 17px; } #rpg-app .store2.dio.pos .ps-sum dd.ok { color: #8fe3c4; } #rpg-app .store2.dio.pos .ps-sum dd.over { color: #ff9db1; } #rpg-app .store2.dio.pos .ps-msg { padding: 6px 10px; background: #1d2a26; color: #b9f5dd; font-size: 12px; font-weight: 700; } #rpg-app .store2.dio.pos .ps-msg.err { background: #8a1f2a; color: #fff; } #rpg-app .store2.dio.pos .ps-msg.ok { background: #128246; color: #fff; } #rpg-app .store2.dio.pos .ps-msg.wait { background: #2b4a8a; color: #fff; } /* 키보드 */ #rpg-app .store2.dio.pos .pm-kbd { gap: 4px; padding: 10px; border-radius: 10px; background: linear-gradient(180deg, #2b2d33, #1b1c20); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 8px 18px rgba(0, 0, 0, .45); } #rpg-app .store2.dio.pos .pm-row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; } #rpg-app .store2.dio.pos .pm-row:nth-child(4) { grid-template-columns: repeat(3, 1fr) 2fr 1fr repeat(3, 1fr) 1fr; } #rpg-app .rpg-game.rpg-game .store2.dio.pos .pm-key { position: relative; min-height: 40px; padding: 2px !important; border: 0 !important; border-radius: 4px !important; cursor: pointer; background: linear-gradient(180deg, #f1ede2, #d7d1c1) !important; color: #2a2116 !important; font: 800 10.5px/1.15 var(--h-body) !important; word-break: keep-all; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), inset 0 1px 0 #fff, 0 2px 0 #0d0e10 !important; transition: transform .05s; } #rpg-app .rpg-game.rpg-game .store2.dio.pos .pm-key small { position: absolute; left: 3px; top: 1px; font: 800 8px/1 var(--h-num) !important; color: rgba(0, 0, 0, .45) !important; } #rpg-app .rpg-game.rpg-game .store2.dio.pos .pm-key:active, #rpg-app .rpg-game.rpg-game .store2.dio.pos .pm-key.hit { transform: translateY(2px); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .18), inset 0 1px 0 #fff, 0 0 0 #0d0e10 !important; } #rpg-app .rpg-game.rpg-game .store2.dio.pos .pm-key.hit { animation: keyhit .2s ease; } #rpg-app .rpg-game.rpg-game .store2.dio.pos .pm-key.k-dec { background: linear-gradient(180deg, #4a4d55, #3a3c43) !important; color: #9da2ad !important; cursor: default; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .3), 0 2px 0 #0d0e10 !important; } #rpg-app .rpg-game.rpg-game .store2.dio.pos .pm-key.k-plu { background: linear-gradient(180deg, #fff3a8, #f0d860) !important; } #rpg-app .rpg-game.rpg-game .store2.dio.pos .pm-key.k-num { background: linear-gradient(180deg, #3a3d45, #24262c) !important; color: #fff !important; font: 800 16px/1 var(--h-num) !important; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .15), 0 2px 0 #0d0e10 !important; } #rpg-app .rpg-game.rpg-game .store2.dio.pos .pm-key.k-cash { background: linear-gradient(180deg, #b9e0ff, #7cb5e6) !important; font-size: 12px !important; } #rpg-app .rpg-game.rpg-game .store2.dio.pos .pm-key.k-card { background: linear-gradient(180deg, #ffd0a8, #f0a060) !important; font-size: 11px !important; } #rpg-app .rpg-game.rpg-game .store2.dio.pos .pm-key.k-sum { background: linear-gradient(180deg, #a8f0c6, #4cc88a) !important; font-size: 14px !important; letter-spacing: .3em; } #rpg-app .rpg-game.rpg-game .store2.dio.pos .pm-key.k-fn { background: linear-gradient(180deg, #ffc2c2, #f08a8a) !important; } #rpg-app .rpg-game.rpg-game .store2.dio.pos .pm-key.k-ent { background: linear-gradient(180deg, #ff8a8a, #e04848) !important; color: #fff !important; font: 900 12px/1 var(--h-num) !important; } #rpg-app .rpg-game.rpg-game .store2.dio.pos .pm-key.tall { grid-row: span 2; } #rpg-app .store2.dio.pos .pm-kbd { grid-template-rows: repeat(4, auto); } #rpg-app .store2.dio.pos .pm-kbd { display: grid; grid-template-columns: 1fr; } /* 지금 단계에서 누를 키를 은은하게 */ #rpg-app .rpg-game.rpg-game .store2.dio.pos .pm-kbd[data-stage="scan"] .pm-key.k-plu, #rpg-app .rpg-game.rpg-game .store2.dio.pos .pm-kbd[data-stage="scan"] .pm-key.k-sum, #rpg-app .rpg-game.rpg-game .store2.dio.pos .pm-kbd[data-stage="pay"] :is(.k-cash, .k-card), #rpg-app .rpg-game.rpg-game .store2.dio.pos .pm-kbd[data-stage="cash-in"] :is(.k-num, .k-ent) { outline: 2px solid rgba(255, 226, 122, .55); outline-offset: 1px; } /* 돈통 */ #rpg-app .store2.dio.pos .pm-drawer { border-radius: 10px; overflow: hidden; background: #1c1d21; box-shadow: 0 8px 18px rgba(0, 0, 0, .45); } #rpg-app .store2.dio.pos .pd-front { height: 18px; background: linear-gradient(180deg, #2f3238, #1c1d21); display: grid; place-items: center; } #rpg-app .store2.dio.pos .pd-front i { width: 60px; height: 4px; border-radius: 2px; background: #555a63; } #rpg-app .store2.dio.pos .pm-drawer.open { animation: drawer .28s cubic-bezier(.2, 1.2, .4, 1); } #rpg-app .store2.dio.pos .pd-tray { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 6px; padding: 8px; background: linear-gradient(180deg, #3b3e46, #2b2d33); } #rpg-app .rpg-game.rpg-game .store2.dio.pos .pd-slot { position: relative; display: grid; justify-items: center; align-content: end; gap: 4px; min-height: 92px; padding: 6px 4px !important; border: 0 !important; border-radius: 6px !important; cursor: pointer; background: #17181b !important; box-shadow: inset 0 3px 8px rgba(0, 0, 0, .7) !important; color: #fbf5e6 !important; } #rpg-app .rpg-game.rpg-game .store2.dio.pos .pd-slot:hover { box-shadow: inset 0 3px 8px rgba(0, 0, 0, .7), 0 0 0 2px #f2d79a !important; } #rpg-app .rpg-game.rpg-game .store2.dio.pos .pd-slot:active { transform: translateY(2px); } #rpg-app .store2.dio.pos .pd-slot small { position: absolute; left: 5px; top: 4px; font: 900 10px/1 var(--h-num) !important; color: #8a8f99 !important; } #rpg-app .store2.dio.pos .pd-slot b { font: 900 13px/1 var(--h-num); } #rpg-app .store2.dio.pos .pd-stack { display: grid; width: 100%; justify-items: center; } #rpg-app .store2.dio.pos .pd-stack i { display: block; margin-top: -10px; box-shadow: 0 -1px 0 rgba(0, 0, 0, .3); } #rpg-app .store2.dio.pos .pd-slot.s5000 .pd-stack i { width: 86%; height: 16px; border-radius: 2px; background: linear-gradient(90deg, #e8b27a, #f5d3ac); } #rpg-app .store2.dio.pos .pd-slot.s1000 .pd-stack i { width: 86%; height: 16px; border-radius: 2px; background: linear-gradient(90deg, #8fb6e0, #c3dcf5); } #rpg-app .store2.dio.pos .pd-slot.s500 .pd-stack i, #rpg-app .store2.dio.pos .pd-slot.s100 .pd-stack i { width: 34px; height: 12px; border-radius: 50%; background: radial-gradient(ellipse, #f4f4f4, #a9aeb6); margin-top: -7px; } #rpg-app .store2.dio.pos .pd-slot.s100 .pd-stack i { width: 28px; background: radial-gradient(ellipse, #f0e3c0, #b9a26a); } #rpg-app .store2.dio.pos .pd-hand { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 8px 10px; background: #26282e; } #rpg-app .store2.dio.pos .pd-hand small { color: #b8b19e !important; font-size: 11px !important; } #rpg-app .store2.dio.pos .pd-hand > div { display: flex; flex-wrap: wrap; gap: 3px; min-height: 26px; align-items: center; } #rpg-app .store2.dio.pos .pd-hand > div i { font-style: normal; font: 900 10.5px/1 var(--h-num); padding: 5px 6px; border-radius: 3px; color: #2a2116; animation: s2-in .15s ease; } #rpg-app .store2.dio.pos .pd-hand .m5000 { background: #e8b27a; } #rpg-app .store2.dio.pos .pd-hand .m1000 { background: #8fb6e0; } #rpg-app .store2.dio.pos .pd-hand .m500 { background: #d5d8de; border-radius: 50% !important; } #rpg-app .store2.dio.pos .pd-hand .m100 { background: #d9c88f; border-radius: 50% !important; } #rpg-app .store2.dio.pos .pd-hand em { font-style: normal; font-size: 11.5px; color: #8a8f99; } #rpg-app .rpg-game.rpg-game .store2.dio.pos .pd-close { min-height: 38px; padding: 4px 12px !important; border: 0 !important; border-radius: 6px !important; cursor: pointer; background: linear-gradient(180deg, #7fe0b8, #3fae86) !important; color: #06281c !important; font: 800 12.5px/1 var(--h-body) !important; box-shadow: 0 3px 0 #1f6e52 !important; } #rpg-app .store2.dio.pos .pd-close kbd { font: 800 9.5px/1 var(--h-num) !important; padding: 2px 4px; margin-left: 3px; } @keyframes laser { 0% { opacity: 1; transform: scaleX(1.2); } 100% { opacity: .25; transform: none; } } @keyframes keyhit { 0% { filter: brightness(1.3); } } @keyframes drawer { from { transform: translateY(-30px); opacity: .4; } } @keyframes money-in { from { transform: translateY(-20px) rotate(-20deg); opacity: 0; } } @keyframes blink { 50% { opacity: 0; } } @media (max-width: 1100px) { #rpg-app .store2.dio.pos .s2-main { grid-template-columns: 1fr; } } #rpg-app .store2.dio.pos .s2-shelf-label { white-space: nowrap; writing-mode: horizontal-tb; } /* ========================================================================== 1인칭 계산대: 3D 화면 하나에 HUD만 얹는다 ========================================================================== */ #rpg-app .rpg-game.rpg-game .rpg-modal-wrap:not(.cinema-viewer):not(.village-playing):not(.cinema-window):has(.store2.fp) > .rpg-modal.place.mini.store { width: min(1320px, 100%) !important; } #rpg-app .store2.fp { display: grid; gap: 8px; } #rpg-app .store2.fp .fp-stage { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #1a2030; box-shadow: inset 0 0 0 1px rgba(217, 181, 106, .35), 0 10px 30px rgba(0, 0, 0, .45); cursor: default; } #rpg-app .store2.fp .fp-stage > canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; } #rpg-app .store2.fp .fp-stage[data-cursor="scan"], #rpg-app .store2.fp .fp-stage[data-cursor="scan-ok"] { cursor: crosshair; } #rpg-app .store2.fp .fp-stage[data-cursor="press"] { cursor: pointer; } #rpg-app .store2.fp.rush .fp-stage { box-shadow: inset 0 0 0 2px rgba(233, 80, 111, .7), inset 0 0 60px rgba(233, 80, 111, .25), 0 10px 30px rgba(0, 0, 0, .45); } #rpg-app .store2.fp .fp-hud { position: absolute; left: 10px; top: 10px; display: flex; gap: 6px; z-index: 4; pointer-events: none; } #rpg-app .store2.fp .s2-pill { display: grid; align-content: center; min-width: 70px; padding: 5px 12px; border-radius: 999px; background: rgba(12, 16, 26, .72); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(217, 181, 106, .35); } #rpg-app .store2.fp .s2-pill small { font-size: 9.5px !important; letter-spacing: .08em; color: #b8b19e !important; line-height: 1.2; } #rpg-app .store2.fp .s2-pill b { font: 800 17px/1.15 var(--h-num); color: #fbf5e6; } #rpg-app .store2.fp .s2-pill.clock { min-width: 140px; border-radius: 12px; } #rpg-app .store2.fp .s2-pill.clock i { display: block; height: 4px; margin-top: 3px; border-radius: 2px; background: rgba(255, 255, 255, .12); overflow: hidden; } #rpg-app .store2.fp .s2-pill.clock u { display: block; height: 100%; background: linear-gradient(90deg, #9c7a3c, #f2d79a); } #rpg-app .store2.fp.rush .s2-pill.clock u { background: linear-gradient(90deg, #a3324d, #ff8fae); } #rpg-app .store2.fp .s2-pill.goal { grid-template-columns: auto auto; column-gap: 3px; align-items: baseline; } #rpg-app .store2.fp .s2-pill.goal small { grid-column: 1 / -1; } #rpg-app .store2.fp .s2-pill.goal em { font-style: normal; font-size: 11px; color: #b8b19e; } #rpg-app .store2.fp [data-hearts] b { display: flex; gap: 1px; font-size: 16px; } #rpg-app .store2.fp [data-hearts] i { font-style: normal; color: rgba(255, 255, 255, .15); } #rpg-app .store2.fp [data-hearts] i.on { color: #ff8fae; } #rpg-app .store2.fp .fp-stock { position: absolute; right: 10px; top: 10px; z-index: 4; display: flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 12px; background: rgba(12, 16, 26, .72); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(217, 181, 106, .3); } #rpg-app .store2.fp .s2-shelf-label { font-size: 10px; font-weight: 800; color: #b8b19e; white-space: nowrap; } #rpg-app .rpg-game.rpg-game .store2.fp .s2-stockchip { position: relative; display: grid; justify-items: center; gap: 2px; min-width: 40px; padding: 3px 4px 4px !important; border: 0 !important; border-radius: 7px !important; background: rgba(255, 255, 255, .06) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1) !important; cursor: pointer; color: #fbf5e6 !important; } #rpg-app .store2.fp .s2-stockchip > span { font-size: 16px; line-height: 1; } #rpg-app .store2.fp .s2-stockchip i { display: flex; gap: 2px; } #rpg-app .store2.fp .s2-stockchip i b { width: 6px; height: 3px; border-radius: 1px; background: rgba(255, 255, 255, .15); } #rpg-app .store2.fp .s2-stockchip i b.on { background: #8fe3c4; } #rpg-app .store2.fp .s2-stockchip.low i b.on { background: #e6b04a; } #rpg-app .rpg-game.rpg-game .store2.fp .s2-stockchip.out { box-shadow: inset 0 0 0 1.5px #e9506f, 0 0 12px rgba(233, 80, 111, .4) !important; } #rpg-app .store2.fp .s2-stockchip em { position: absolute; left: 50%; top: calc(100% + 4px); transform: translateX(-50%); white-space: nowrap; font-style: normal; font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 4px; background: #c0453b; color: #fff; } #rpg-app .store2.fp .s2-stockchip.busy em { background: #d9b56a; color: #1d1608; } #rpg-app .store2.fp .s2-bubble.far { transform: translate(-50%, -100%) scale(.82); opacity: .9; } #rpg-app .store2.fp .s2-bubbles { position: absolute; inset: 0; z-index: 3; pointer-events: none; } #rpg-app .rpg-game.rpg-game .store2.fp .s2-bubble { position: absolute; transform: translate(-50%, -100%); pointer-events: auto; cursor: pointer; display: grid; justify-items: center; gap: 4px; padding: 6px 9px 9px !important; border: 0 !important; border-radius: 12px !important; background: rgba(255, 250, 240, .96) !important; color: #2a2116 !important; box-shadow: 0 0 0 1.5px rgba(120, 90, 40, .35), 0 6px 14px rgba(0, 0, 0, .35) !important; } #rpg-app .rpg-game.rpg-game .store2.fp .s2-bubble.on { box-shadow: 0 0 0 3px #f2d79a, 0 0 22px rgba(242, 215, 154, .8), 0 6px 14px rgba(0, 0, 0, .35) !important; } #rpg-app .rpg-game.rpg-game .store2.fp .s2-bubble.danger { animation: s2-dpulse .6s ease-in-out infinite; } #rpg-app .store2.fp .s2-who { display: flex; align-items: center; gap: 4px; font-size: 15px; line-height: 1; } #rpg-app .store2.fp .s2-who b { font: 800 11px/1 var(--h-body); color: #2a2116; } #rpg-app .store2.fp .s2-who em { font-style: normal; font: 900 9.5px/1.5 var(--h-num); padding: 0 5px; border-radius: 4px; background: #2a2116; color: #f2d79a; } #rpg-app .store2.fp .s2-order { display: flex; gap: 2px; } #rpg-app .store2.fp .s2-order i { width: 22px; height: 22px; font-size: 14px; border-radius: 6px; background: #efe5cc; display: grid; place-items: center; font-style: normal; } #rpg-app .store2.fp .s2-bubble .s2-pat { width: 100%; height: 5px; border-radius: 3px; background: rgba(0, 0, 0, .12); overflow: hidden; } #rpg-app .store2.fp .s2-bubble .s2-pat u { display: block; height: 100%; background: #3fae86; } #rpg-app .store2.fp .s2-paywith { font: 800 12px/1.3 var(--h-body); padding: 3px 8px; border-radius: 5px; background: #2a2116; color: #f2d79a; } #rpg-app .store2.fp .fp-cursor { position: absolute; z-index: 5; pointer-events: none; transform: translate(14px, 14px); white-space: nowrap; font: 800 11.5px/1 var(--h-body); padding: 4px 8px; border-radius: 5px; background: rgba(12, 16, 26, .8); color: #fbf5e6; } #rpg-app .store2.fp .fp-cursor:empty { display: none; } #rpg-app .store2.fp .fp-stage[data-cursor="scan-ok"] .fp-cursor { background: #c4202a; color: #fff; } #rpg-app .store2.fp .s2-pop { position: absolute; left: 0; right: 0; top: 64px; display: flex; justify-content: center; gap: 6px; z-index: 5; pointer-events: none; } #rpg-app .store2.fp .s2-count { position: absolute; inset: 0; display: grid; place-items: center; z-index: 6; pointer-events: none; font: 900 72px/1 var(--h-display); color: #f2d79a; text-shadow: 0 4px 20px rgba(0, 0, 0, .6); } #rpg-app .store2.fp .s2-count:empty { display: none; } #rpg-app .store2.fp .s2-tip { margin: 0; text-align: center; font-size: 12px; color: var(--m-ink-soft); } #rpg-app .store2.fp .s2-tip b { color: #f2d79a; } #rpg-app .store2.fp .fp-till { position: absolute; right: 14px; bottom: 14px; z-index: 4; width: 250px; padding: 10px 12px; border-radius: 10px; background: rgba(12, 22, 18, .9); box-shadow: inset 0 0 0 1px rgba(143, 227, 196, .45), 0 8px 20px rgba(0, 0, 0, .4); color: #b9f5dd; } #rpg-app .store2.fp .fp-till small { font-size: 10px !important; letter-spacing: .1em; color: #6fae95 !important; } #rpg-app .store2.fp .fp-till dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 4px 0 6px; } #rpg-app .store2.fp .fp-till dt { font-size: 12px; color: #9fcfbb; } #rpg-app .store2.fp .fp-till dd { margin: 0; text-align: right; font: 900 18px/1.3 var(--h-num); color: #e9fff6; } #rpg-app .store2.fp .fp-till dd.chg { color: #ffe27a; font-size: 22px; } #rpg-app .store2.fp .fp-till dd.ok { color: #8fe3c4; } #rpg-app .store2.fp .fp-till dd.over { color: #ff9db1; } #rpg-app .store2.fp .fp-till p { margin: 0; font-size: 10.5px; color: #9fcfbb; line-height: 1.6; } #rpg-app .store2.fp .fp-till kbd { font: 800 9.5px/1 var(--h-num) !important; padding: 2px 4px; } /* 야식 작전 HUD: 어두운 패널 */ #rpg-app .rpg-game.rpg-game .rpg-mission { min-width: 330px; padding: 10px 16px 12px !important; border-radius: 12px !important; background: linear-gradient(180deg, rgba(34, 42, 60, .9), rgba(20, 26, 40, .88)) !important; border: 1px solid rgba(217, 181, 106, .45) !important; box-shadow: 0 8px 22px rgba(0, 0, 0, .4) !important; color: #fbf5e6 !important; text-align: left; } #rpg-app .rpg-game.rpg-game .rpg-mission > b { display: block; font: 700 15px/1.4 var(--h-display); color: #f2d79a; margin-bottom: 6px; } #rpg-app .rpg-game.rpg-game .rpg-mission .noise { position: relative; height: 12px; border-radius: 6px; background: rgba(0, 0, 0, .4) !important; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); } #rpg-app .rpg-game.rpg-game .rpg-mission .noise i { display: block; height: 100%; background: linear-gradient(90deg, #8fe3c4, #e6b04a 60%, #e9506f) !important; transition: width .15s; } #rpg-app .rpg-game.rpg-game .rpg-mission .noise small { position: absolute; right: 6px; top: 0; font: 800 9px/12px var(--h-body); color: #fff; letter-spacing: .1em; } #rpg-app .rpg-game.rpg-game .rpg-mission .noise.hot { animation: s2-dpulse .5s ease-in-out infinite; } #rpg-app .rpg-game.rpg-game .rpg-mission p { margin: 8px 0 0; color: #d9d2bf !important; font-size: 12.5px; } #rpg-app .rpg-game.rpg-game .rpg-mission .snack-row { display: flex; gap: 6px; align-items: center; } #rpg-app .rpg-game.rpg-game .rpg-mission .snack-row span { display: grid; justify-items: center; padding: 3px 8px; border-radius: 8px; background: rgba(255, 255, 255, .06); font-size: 18px; opacity: .45; filter: grayscale(.7); } #rpg-app .rpg-game.rpg-game .rpg-mission .snack-row span.got { opacity: 1; filter: none; box-shadow: inset 0 0 0 1px #8fe3c4; } #rpg-app .rpg-game.rpg-game .rpg-mission .snack-row small { font-size: 9.5px !important; color: #d9d2bf !important; } #rpg-app .rpg-game.rpg-game .rpg-mission .snack-row em { margin-left: auto; font-style: normal; font-weight: 800; color: #ff9db1; letter-spacing: .1em; } #rpg-app .rpg-game.rpg-game .rpg-mission .stealth-tools kbd { font: 800 10px/1 var(--h-num) !important; padding: 2px 5px; border-radius: 4px; background: #2a3348 !important; color: #f2d79a !important; } #rpg-app .rpg-game.rpg-game .rpg-mission .stealth-tools em { font-style: normal; color: #ffb08a; } #rpg-app .rpg-game.rpg-game .rpg-mission .go-exit { color: #8fe3c4 !important; font-weight: 800; } /* SPHERE LIVE 패널 버튼: 어두운 패널 위에서 읽히게(흰 글씨 + 크림 배경 충돌 수정) */ #rpg-app .rpg-game.rpg-game .live-hud .lv-actions .rpg-btn{background:rgba(255,255,255,.14)!important;color:#fff!important;border:1px solid rgba(255,255,255,.38)!important;box-shadow:none!important;font:700 11.5px "Noto Sans KR",sans-serif!important;padding:6px 10px!important;border-radius:10px!important;text-shadow:none!important} #rpg-app .rpg-game.rpg-game .live-hud .lv-actions .rpg-btn:hover{background:rgba(255,255,255,.26)!important} #rpg-app .rpg-game.rpg-game .live-hud .lv-actions .rpg-btn[data-screen]{background:linear-gradient(180deg,#ffd979,#e0a93a)!important;color:#2a1c05!important;border-color:#fff3b0!important} /* Moonlit dorm operation: lobby portraits complement the walkable 3D room. */ #rpg-app .rpg-game .dorm-mates{border:1px solid #c4b99955;border-radius:12px;background:#172332e8;color:#ede9dc;padding:9px 11px;box-shadow:0 8px 24px #11172a55;pointer-events:none;box-sizing:border-box} .dorm-face{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;flex-shrink:0;overflow:hidden;border-radius:50%;background:radial-gradient(circle at 50% 30%,#e6e0cf,#949eac);border:1px solid #e4dac188;color:#344456;font:700 13px system-ui,sans-serif} .dorm-face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.dorm-face img[hidden]{display:none!important} .dorm-team{display:flex;align-items:center;gap:10px;padding-bottom:8px;border-bottom:1px solid #d4d1b922}.dorm-team>small{font-size:9px;letter-spacing:.06em;color:#afb8c5}.dorm-team>span{display:flex;align-items:center;gap:5px}.dorm-team .dorm-face{width:28px;height:28px}.dorm-team b{font:500 10px system-ui,sans-serif;color:#e5ddc8} .dorm-sleepers{display:flex;gap:8px;justify-content:space-between;padding-top:9px}.dorm-sleepers .mate{display:grid;grid-template-columns:42px 1fr;column-gap:7px;align-items:center;flex:1;min-width:0}.dorm-sleepers .dorm-face{grid-row:span 2;transition:box-shadow .2s,border-color .2s}.dorm-sleepers small{font:600 11px system-ui,sans-serif}.dorm-sleepers em{font:10px system-ui,sans-serif;color:#aab8cc}.dorm-sleepers .zzz img{opacity:.78}.dorm-sleepers .warn .dorm-face{border-color:#edc779;box-shadow:0 0 10px #eac27755}.dorm-sleepers .warn em{color:#edc779}.dorm-sleepers .hear .dorm-face{border-color:#ff9fa9;box-shadow:0 0 12px #ef799c66}.dorm-sleepers .hear em{color:#ffb5bf} #rpg-app .rpg-game .dorm-cutin{position:absolute;z-index:12;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:13px;width:min(380px,84vw);padding:13px 18px;border:1px solid #f3d39d88;border-radius:12px;background:linear-gradient(100deg,#293344f2,#1c2838eb);box-shadow:0 12px 32px #0f172855;box-sizing:border-box;color:#fff0d5;pointer-events:none}.dorm-cutin[hidden]{display:none!important}.dorm-cutin .dorm-face{width:64px;height:64px}.dorm-cutin small{display:block;margin-bottom:6px;font-size:10px;letter-spacing:.13em;color:#f1cb8f}.dorm-cutin b{font:500 13px/1.6 system-ui,sans-serif}.dorm-cutin.woke{border-color:#f6a4b8!important}.dorm-cutin.woke small{color:#ffb4c8}.dorm-cutin.show{animation:dorm-cutin-in .22s ease-out} #rpg-app .rpg-game .dorm-result{display:flex;align-items:flex-end;justify-content:center;gap:10px;width:100%;padding:14px 8px;border:1px solid #d9ceb4;border-radius:14px;background:linear-gradient(160deg,#f0ece1,#e5e9e7);box-sizing:border-box}.dorm-result figure{margin:0;flex:1;min-width:0;text-align:center}.dorm-result .dorm-face{width:100%;max-width:68px;height:auto;aspect-ratio:1}.dorm-result b{display:block;font:600 11px/1.6 system-ui,sans-serif;color:#344456}.dorm-result figcaption{font:10px/1.6 system-ui,sans-serif;color:#758091}.dorm-result .me .dorm-face{border-color:#d8ae53;box-shadow:0 0 0 3px #f4dba555}.dorm-result.ok .sleeper .dorm-face{filter:saturate(.6);opacity:.8}.dorm-result.fail .sleeper .dorm-face{border-color:#d48c9d} @keyframes dorm-cutin-in{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}} @media(max-width:600px){.dorm-sleepers .dorm-face{width:32px;height:32px}.dorm-sleepers .mate{grid-template-columns:32px 1fr;column-gap:4px}.dorm-result{gap:5px!important}.dorm-cutin b{font-size:12px}} @media(prefers-reduced-motion:reduce){.dorm-cutin.show{animation:none}.dorm-sleepers .dorm-face{transition:none}} #rpg-app .rpg-game .dorm-mates{position:absolute;left:12px;top:145px;z-index:6;width:min(340px,calc(100vw - 24px))} #rpg-app .rpg-game .dorm-cutin{top:auto;bottom:20%} #rpg-app .rpg-game .mission-result.arc .dorm-result b{color:#344456!important;font-size:11px!important;text-shadow:none!important} #rpg-app .rpg-game .mission-result.arc .dorm-result figcaption{color:#647185!important;font-size:10px!important;text-shadow:none!important} @media(max-width:600px){#rpg-app .rpg-game .dorm-mates{top:auto;bottom:180px;display:flex;gap:9px;width:calc(100vw - 24px);align-items:center}.dorm-team{border:0;padding:0;gap:7px}.dorm-team>small{display:none}.dorm-team>span{flex-direction:column;gap:3px}.dorm-team b{font-size:8px}.dorm-sleepers{border-left:1px solid #d4d1b933;padding:0 0 0 10px;flex:1;gap:6px}.dorm-sleepers .mate{display:flex;flex-direction:column;gap:3px}.dorm-sleepers small{font-size:9px}.dorm-sleepers em{font-size:8px}#rpg-app .rpg-game .dorm-cutin{bottom:30%}} /* 필담 전술판: 태세 → 문구 → 판정 근거를 같은 화면에 유지한다. */ #rpg-app .duel2 .d2-command { padding: 14px; border: 1px solid #86724d; border-radius: 12px; background: #242b35; color: #f5ead2; } #rpg-app .duel2 .d2-status { font-size: 13px; font-weight: 800; color: #f2cf85; margin-bottom: 12px; } #rpg-app .duel2 .d2-stances { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; } #rpg-app .rpg-game.rpg-game .duel2 [data-stance] { display: grid; gap: 5px; border: 1px solid #68717a !important; border-radius: 8px !important; background: #303a45 !important; color: #f5ead2 !important; padding: 10px !important; text-align: left; } #rpg-app .rpg-game.rpg-game .duel2 [data-stance][aria-pressed="true"] { border-color: #f2cf85 !important; box-shadow: inset 0 0 0 1px #f2cf85; background: #4c4434 !important; } #rpg-app .duel2 [data-stance] span { font-size: 11px; line-height: 1.5; } #rpg-app .duel2 :is(.d2-rules,.d2-record) { font-size: 12px; line-height: 1.8; } #rpg-app .duel2 .d2-rules { margin-top: 12px; } #rpg-app .duel2 summary { cursor: pointer; font-weight: 800; } #rpg-app .duel2 .d2-rules p { color: #e5dfd3 !important; margin: 10px 0 0; } #rpg-app .duel2 .d2-phrase { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; min-height: 32px; color: var(--m-ink-soft); font-size: 12px; } #rpg-app .duel2 .d2-phrase b { font-size: 24px; opacity: .45; border-bottom: 2px solid transparent; } #rpg-app .duel2 .d2-phrase b.current { opacity: 1; color: #f1cc81; border-color: #f1cc81; } #rpg-app .duel2 .d2-phrase b.done { opacity: 1; color: #8bd4bf; } #rpg-app .duel2 .d2-card :is(.d2-preview,.d2-script) { font-size: 11px; line-height: 1.6; color: #3b514e; } #rpg-app .duel2 .d2-card .d2-preview { padding-top: 6px; border-top: 1px solid #b9a681; } #rpg-app .duel2 .d2-record details { padding: 10px 14px; background: #242b35; border-left: 2px solid #cda862; border-radius: 6px; margin-top: 6px; color: #f5ead2; } #rpg-app .duel2 .d2-record p { color: #ddd6c8 !important; margin: 6px 0 0; overflow-wrap: anywhere; } @media (max-width: 600px) { #rpg-app .duel2 .d2-stances { gap: 4px; } #rpg-app .rpg-game.rpg-game .duel2 [data-stance] { padding: 8px 6px !important; } #rpg-app .duel2 .d2-command { padding: 10px; } } #rpg-app .duel2 .d2-stage { overflow: hidden; border-radius: 8px; } @media (max-width: 600px) { #rpg-app .rpg-game.rpg-game .rpg-modal-wrap > .rpg-modal.place.brush { zoom: 1 !important; width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; padding: 14px !important; } #rpg-app .duel2.is-writing .d2-stage canvas { width: 280% !important; max-width: none !important; transform: translateX(-32.14%); } } @media (max-width: 600px) { #rpg-app .rpg-game.rpg-game .rpg-modal-wrap:not(.cinema-viewer):not(.village-playing):not(.cinema-window) > .rpg-modal.place.brush { max-height: calc(100dvh - 24px) !important; padding: 0 14px 18px !important; } } /* 프리쿠라 / 촬영 콘셉트부터 인화까지 이어지는 포토 아틀리에 */ #rpg-app .rpg-game.rpg-game .pc-studio { display:grid; gap:16px; } #rpg-app .pc-eyebrow { color:#d8b77d; font:800 10px/1.5 sans-serif; letter-spacing:.18em; } #rpg-app .pc-studio h3,#rpg-app .pc-editor h3 { font-size:24px; margin:0 0 10px; } #rpg-app .pc-studio>p { margin:0; } #rpg-app .pc-config { display:flex; flex-wrap:wrap; gap:8px; } #rpg-app .rpg-game.rpg-game :is(.pc-studio,.pc-editor) button:not(.rpg-btn) { background:#283442 !important; color:#f3e6d0 !important; border:1px solid #66727a !important; border-radius:9px !important; box-shadow:none !important; padding:10px 12px !important; cursor:pointer; } #rpg-app .rpg-game.rpg-game :is(.pc-studio,.pc-editor) button[aria-pressed=true] { background:#4b4135 !important; border-color:#efc987 !important; box-shadow:inset 0 0 0 1px #efc987 !important; } #rpg-app .pc-config>button { display:grid; gap:7px; flex:1; min-width:100px; text-align:left; } #rpg-app .pc-config small { font-size:11px; line-height:1.65; } #rpg-app .pc-config i { display:block; width:30px; height:12px; background:var(--swatch); border-radius:4px; } #rpg-app .pc-note { font-size:12px; line-height:1.8; color:#d4c7b4 !important; } #rpg-app .pc-session { display:flex; justify-content:space-between; gap:12px; font-size:12px; color:#e9c484; } #rpg-app .pc-studio .pc-call { top:14px; left:12px; right:12px; padding:10px; width:fit-content; border-radius:8px; background:#172133d9; color:#fff2da; font-size:16px; font-weight:800; text-shadow:none; z-index:2; } #rpg-app .pc-studio .pc-view { box-shadow:0 0 0 1px #af8e68 !important; border-radius:12px; } #rpg-app .pc-studio .pc-strip { background:#efe3d0; border-radius:8px; } #rpg-app .pc-controls { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; } #rpg-app .pc-editor { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:20px; align-items:start; } #rpg-app .pc-editor .pc-deco-strip { border-radius:10px; padding:12px; gap:8px; } #rpg-app .pc-editor canvas { display:block; touch-action:none; border:2px solid transparent; box-sizing:border-box; } #rpg-app .pc-editor canvas.selected { border-color:#a76a35; outline:2px solid #fff5dc; } #rpg-app .pc-editor .pc-deco-title { color:#9b526b !important; font-size:12px; } #rpg-app .pc-editor .pc-caption-preview { grid-column:1/-1; min-height:18px; text-align:center; font-size:12px; color:#9b526b; overflow-wrap:anywhere; } #rpg-app .pc-editor-tools { display:grid; gap:12px; } #rpg-app .pc-editor-tools label { display:grid; gap:6px; font-size:12px; color:#ebddc8; } #rpg-app .rpg-game.rpg-game .pc-editor-tools :is(input:not([type=range]):not([type=color]),select) { width:100%; min-width:0; box-sizing:border-box; padding:9px !important; background:#1a2431 !important; color:#ffefd6 !important; border:1px solid #6b7580 !important; border-radius:6px !important; font:inherit; } #rpg-app .pc-editor-row { display:grid; grid-template-columns:65px 1fr; gap:12px; align-items:center; } #rpg-app .pc-editor input[type=range] { width:100%; min-width:0; accent-color:#e7bd79; } #rpg-app .pc-editor .pc-tools>button { min-width:64px; font-size:12px; } #rpg-app .pc-editor .pc-paper>button { min-width:60px; font-size:11px; padding:8px !important; } #rpg-app .pc-editor h4 { margin:0; font-size:12px; } #rpg-app .pc-editor .pc-stickers button { font-size:23px; padding:6px !important; } #rpg-app .pc-editor .pc-note { margin:0; } #rpg-app :is(.pc-studio,.pc-editor) button:focus-visible { outline:2px solid #f5d48c; outline-offset:3px; } #rpg-app :is(.pc-studio,.pc-editor) button:disabled { opacity:.45; cursor:default; } @media(max-width:720px) { #rpg-app .pc-editor { grid-template-columns:1fr; } #rpg-app .pc-studio .pc-call { font-size:12px; } #rpg-app .pc-config>button { min-width:80px; } #rpg-app .rpg-game.rpg-game .rpg-modal-wrap:not(.cinema-viewer):not(.village-playing):not(.cinema-window)>.rpg-modal.place.pricura { zoom:1!important; max-width:calc(100vw - 24px)!important; max-height:calc(100dvh - 24px)!important; padding:0 14px 18px!important; } } #rpg-app .rpg-game.rpg-game .rpg-modal-wrap:not(.cinema-viewer):not(.village-playing):not(.cinema-window)>.rpg-modal.place.pricura { width:min(1060px,100%)!important; } #rpg-app .pc-review-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; } #rpg-app .pc-studio [hidden] { display:none!important; } @media(max-width:720px) { #rpg-app .rpg-game.rpg-game .rpg-modal-wrap:not(.cinema-viewer):not(.village-playing):not(.cinema-window)>.rpg-modal.place.pricura { width:calc(100vw - 24px)!important; } } #rpg-app .rpg-game.rpg-game .pc-editor .pc-deco-strip { background:var(--frame)!important; } #rpg-app .rpg-game.rpg-game .pc-editor .pc-deco-title,#rpg-app .pc-editor .pc-caption-preview { color:var(--photo-ink,#91435d)!important; } @media(min-width:721px) { #rpg-app .pc-editor>section { position:sticky; top:70px; } } #rpg-app .rpg-game.rpg-game .stageshow .ss-beat { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; padding:18px!important; font-size:20px!important; border:2px solid #d1a766!important; transition:box-shadow .08s; } #rpg-app .stageshow .ss-beat span { flex-basis:100%; font-size:12px; font-weight:600; } #rpg-app .rpg-game.rpg-game .stageshow .ss-beat.ready { border-color:#fff1a9!important; box-shadow:0 0 22px #ffd16666!important; } #rpg-app .pc-studio .pc-booth { min-width:0; grid-template-columns:minmax(0,1fr) 100px; } #rpg-app .pc-studio .pc-strip { min-width:0; align-self:start; } #rpg-app .pc-studio .pc-shot { min-width:0; width:100%; box-sizing:border-box; } @media(max-width:720px) { #rpg-app .pc-studio .pc-booth { grid-template-columns:minmax(0,1fr); } } #rpg-app .pc-config [data-theme] i{width:100%;height:46px;border-radius:9px;margin-bottom:6px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)} /* 필담: 필살 일필 표시 · 계산 기록 접기 */ #rpg-app .duel2 .d2-script.fin{color:#a82c2c!important;font-weight:900} #rpg-app .duel2 .d2-tip .d2-fin{color:#ffd166} #rpg-app .duel2 .d2-preview b{font-size:1.15em} #rpg-app .duel2 .d2-log>summary{cursor:pointer;opacity:.8} /* 필담: 카드 고르는 동안에는 두루마리를 줄여 손패까지 한 화면에(쓰는 동안은 크게) */ @media (min-width:700px){#rpg-app .duel2:not(.is-writing) .d2-stage canvas{max-height:29vh;width:auto!important;max-width:100%;margin:0 auto;display:block}} /* Purpose-first menu: short rows keep navigation visible on small screens. */ #rpg-app .rpg-game.rpg-game .menu-organized .menu-shortcuts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px} #rpg-app .rpg-game.rpg-game .menu-organized .menu-section{margin:16px 0} #rpg-app .rpg-game.rpg-game .menu-organized .menu-section h3{font-size:13px;margin:0 0 8px;color:#d8c18b} #rpg-app .rpg-game.rpg-game .menu-organized .menu-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important} #rpg-app .rpg-game.rpg-game .menu-organized .menu-grid button{display:flex;align-items:center;justify-content:flex-start;gap:10px;min-height:54px;padding:10px 28px 10px 12px!important;border-radius:10px!important;text-align:left} #rpg-app .rpg-game.rpg-game .menu-organized .menu-grid button span{width:30px;height:30px;flex-shrink:0;background:none;box-shadow:none;border-radius:0} #rpg-app .rpg-game.rpg-game .menu-organized .menu-grid button b{font-size:13px!important} #rpg-app .menu-new{position:absolute;right:6px;bottom:3px;color:#ffd68b;font:700 9px sans-serif} #rpg-app .rpg-game .menu-organized button:focus-visible,#rpg-app .mem-route [role=button]:focus-visible{outline:2px solid #edc878;outline-offset:3px} @media(max-width:600px){#rpg-app .rpg-game.rpg-game .menu-organized .menu-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}#rpg-app .menu-shortcuts>*{flex:1 1 140px}} /* 야간 근무: 작은 키보드 설명 대신 현재 동작과 물리 포스 확대. */ #rpg-app .store2.fp .fp-workflow {display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:13px 16px;border:1px solid #62768d;border-radius:12px;background:#1e2d40;color:#f7f2e8} #rpg-app .store2.fp .fp-workflow small {display:block;color:#e1c38b;font-size:11px} #rpg-app .store2.fp .fp-workflow b {display:block;font-size:18px;line-height:1.6} #rpg-app .store2.fp .fp-workflow p {margin:3px 0 0;color:#d3ddeb;font-size:13px;line-height:1.7} #rpg-app .store2.fp .fp-actions {display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end} #rpg-app .store2.fp .fp-actions button {min-height:44px;padding:8px 12px;border:1px solid #6e859c;border-radius:8px;background:#30445b;color:#f8f0dc;font:700 14px/1.6 'Noto Sans KR',sans-serif;cursor:pointer} #rpg-app .store2.fp .fp-actions .fp-primary {background:#ecd09a;color:#243549;border-color:#ffe0a3} #rpg-app .store2.fp .fp-actions button:disabled {opacity:.5;cursor:default} #rpg-app .store2.fp .fp-stage[data-view="keypad"] .fp-stock, #rpg-app .store2.fp .fp-stage[data-view="keypad"] .s2-bubbles {display:none} @media(max-width:700px){#rpg-app .store2.fp .fp-stage[data-view="keypad"]{min-height:390px;aspect-ratio:auto}} #rpg-app .store2.fp .fp-queue {display:flex;gap:6px;overflow-x:auto;padding:3px 0 5px;min-width:0} #rpg-app .store2.fp .fp-queue button {flex-shrink:0;min-height:38px;padding:6px 10px;border:1px solid #536b82;border-radius:9px;background:#26374a;color:#e6edf4;font:600 12px/1.6 'Noto Sans KR',sans-serif;cursor:pointer} #rpg-app .store2.fp .fp-queue button.on {border-color:#e4c38b;color:#ffe4b0;background:#3a3b42} #rpg-app .store2.fp .fp-queue button span {margin-left:7px;color:#c4d5e6} #rpg-app .store2.fp .fp-help {font-size:12px;color:#cbd9e7} #rpg-app .store2.fp .fp-help summary {min-height:32px;cursor:pointer;color:#d6c395;padding:5px 0} #rpg-app .store2.fp .fp-help p {font-size:13px;line-height:1.9;color:#dbe4ee;margin:7px 0} #rpg-app .store2.fp .fp-till {max-width:275px;background:#15273bee;border:1px solid #7994ae} #rpg-app .store2.fp .fp-till .fp-cash-buttons {display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:12px 0} #rpg-app .store2.fp .fp-till button {min-height:44px;padding:7px;border:1px solid #7893a9;border-radius:7px;background:#30485d;color:#fff0d0;font:700 14px/1.6 'Noto Sans KR',sans-serif;cursor:pointer} #rpg-app .store2.fp .fp-till [data-undo] {font-size:12px;min-height:36px} @media(max-width:700px){#rpg-app .store2.fp .fp-workflow {grid-template-columns:1fr;padding:11px;gap:8px}#rpg-app .store2.fp .fp-actions {justify-content:stretch}#rpg-app .store2.fp .fp-actions button {flex:1;font-size:12px;padding:7px}#rpg-app .store2.fp .fp-hud {gap:3px}#rpg-app .store2.fp .s2-pill {min-width:44px;padding:4px 6px}#rpg-app .store2.fp .s2-pill.clock {min-width:80px}#rpg-app .store2.fp .fp-stock {top:auto;bottom:7px;right:7px}#rpg-app .store2.fp .fp-till {font-size:12px;max-width:220px}#rpg-app .store2.fp .fp-workflow b{font-size:16px}} @media(max-height:680px){#rpg-app .store2.fp .fp-stage{max-height:calc(100dvh - 230px);min-height:210px}} @media(max-width:700px){#rpg-app .store2.fp .fp-stage:has([data-till]:not([hidden])){min-height:390px;aspect-ratio:auto}#rpg-app .store2.fp .fp-stage:has([data-till]:not([hidden])) .fp-stock{display:none}} @media(max-width:700px){#rpg-app #modal:has(.store2.fp){padding:8px!important}#rpg-app #modal>.rpg-modal:has(.store2.fp){zoom:1!important;width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important;max-height:calc(100dvh - 16px)!important;padding:0 12px 14px!important}}