:root{ /* 밝은 게임 톤 (2026-07-20 사장님 확정 "전체 밝게, PC방은 포인트로. 다크 bg는 게임같지 않아"). 라이트 웜 화이트 UI + 비비드 컬러 액센트(게임다움). PC방 정체성은 방의 네온/LED·게이밍 요소로. */ --bg:#ece7db; --panel:#fffdf8; --panel2:#f2eee3; --line:#e3ddce; --txt:#2b2d36; --muted:#82806f; --neon:#1fbfe0; --neon2:#ec4b9c; --good:#31bd6c; --warn:#eba81c; --bad:#ef524f; --gold:#e0a012; /* 폰트 역할 — 게임 전반=POP / 긴 안내문·표 숫자=넥슨(₩ 등 없는 글리프는 POP으로 폴백) */ --font-game:'ONE Mobile POP',-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif; --font-body:'NEXON Lv1 Gothic','ONE Mobile POP',-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif; } /* ===== 폰트 (DGL 공장 표준 — 2026-07-21 사장님 확정. SSOT=studio/brand/fonts/fonts.json) 메인 게임 폰트 = ONE Mobile POP (원스토어 무료·임베딩 허용) — 시스템 고딕/Pretendard 금지. 숫자·긴 안내문 보조 = NEXON Lv.1 고딕 Low (넥슨 무료·임베딩 허용, 공식 저용량판). ★ 두 폰트 모두 '수정 금지·배포된 형태 그대로' 조항 → woff2 변환·서브셋 금지, 원본 OTF 그대로 번들한다. ★ 넥슨엔 원화기호 ₩(U+20A9)가 없다 → --font-body 스택 끝에 POP을 둬서 폴백받고, 돈 표시처럼 ₩와 숫자가 붙는 곳은 아예 --font-game(POP)으로 통일한다(굵기 튐 방지). */ @font-face{ font-family:'ONE Mobile POP'; src:url('../assets/fonts/ONEMobilePOP.otf') format('opentype'); font-weight:400 900; font-display:block; } @font-face{ font-family:'NEXON Lv1 Gothic'; src:url('../assets/fonts/NEXONLv1GothicLow.otf') format('opentype'); font-weight:400 600; font-display:swap; } @font-face{ font-family:'NEXON Lv1 Gothic'; src:url('../assets/fonts/NEXONLv1GothicLow-Bold.otf') format('opentype'); font-weight:700 900; font-display:swap; } *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;} html,body{margin:0; height:100%; background:#ddd7c7; color:var(--txt); font-family:var(--font-game);} #app{max-width:480px; margin:0 auto; height:100vh; height:100dvh; display:flex; flex-direction:column; background:var(--bg); position:relative; overflow:hidden; -webkit-user-select:none; user-select:none;} /* 게임 UI 텍스트 롱프레스 선택 방지(의도치 않은 셀렉션) */ #app input, #app textarea{-webkit-user-select:auto; user-select:auto;} /* 입력 요소만 예외 */ /* ============================================================ HUD — 게임 계기판 (밝은 웜 플라스틱 카운터 패널 + PC방 시안 LED 액센트) 민무늬 흰 카드 → 두꺼운 베벨·인셋 게이지 웰·아이콘·정보위계 판. ① 볼록 패널(상단 하이라이트+단단한 밑면) ② 돈=금고 LED 웰 ③ 아이콘 게이지 웰 ④ PC방 시안 LED 스트립. ============================================================ */ #hud{ position:relative; z-index:2; padding:calc(9px + env(safe-area-inset-top)) 12px 12px; /* 웜 플라스틱 패널 — 세로 그라데이션 + 상단 하이라이트로 볼록 */ background:linear-gradient(180deg,#fffdf7 0%,#f7efdd 60%,#efe4cb 100%); border-bottom:3px solid #cf9a3e; /* 두꺼운 황동 테두리 */ box-shadow: inset 0 2px 0 rgba(255,255,255,.9), /* 상단 하이라이트(볼록) */ inset 0 -2px 0 rgba(180,150,90,.35), /* 하단 내부 음영 */ 0 4px 0 #d9b978, /* 패널 두께(단단한 밑면) */ 0 8px 14px -4px rgba(80,55,15,.32); /* 게임 화면을 감싸는 접지 그림자 */ } /* PC방 시안 LED 스트립 — 패널 하단, 게이밍 포인트(다크 아님, 액센트만) */ #hud::after{content:''; position:absolute; left:0; right:0; bottom:-3px; height:3px; background:linear-gradient(90deg,#22d3f5,#4a9cff,#22d3f5); box-shadow:0 0 10px rgba(34,211,245,.7), 0 0 3px rgba(34,211,245,.9); opacity:.92;} .hud-top{display:flex; align-items:center; justify-content:space-between; gap:10px;} .hud-id{display:flex; align-items:center; gap:8px; min-width:0;} /* DAY = 플라스틱 탭 칩 (볼록·시안·베벨) */ .day-chip{display:inline-flex; align-items:baseline; gap:4px; flex:0 0 auto; padding:3px 10px 4px; border-radius:10px; background:linear-gradient(180deg,#2fc6ea,#1a9fce); border:2px solid #0e7ba3; box-shadow:inset 0 1.5px 0 rgba(255,255,255,.55), 0 2px 0 #0c6a8e, 0 3px 4px rgba(10,90,120,.3);} .day-chip small{font-size:9px; font-weight:900; color:#eaffff; letter-spacing:.5px; text-shadow:0 1px 0 rgba(6,70,95,.5);} .day-chip .day{font-size:19px; font-weight:900; color:#fff; line-height:1; font-variant-numeric:tabular-nums; text-shadow:0 1px 0 rgba(6,70,95,.55), 0 0 5px rgba(180,240,255,.4);} .store-name{font-size:12.5px; font-weight:800; color:#7a5a2a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} /* 상권 지도(목표) 버튼 — 아이콘 플라스틱 칩 */ .hud-map{flex:0 0 auto; width:34px; height:34px; padding:0; display:grid; place-items:center; background:linear-gradient(180deg,#fff5df,#ffe6ad); border:2px solid #d59b3a; border-radius:10px; box-shadow:inset 0 1.5px 0 rgba(255,255,255,.8), 0 2px 0 #c98f2c, 0 3px 4px rgba(120,80,15,.28); cursor:pointer;} .hud-map img{width:24px; height:24px; object-fit:contain; display:block; filter:drop-shadow(0 1px 1px rgba(0,0,0,.25));} .hud-map:active{transform:translateY(2px); box-shadow:inset 0 1.5px 0 rgba(255,255,255,.8), 0 1px 0 #c98f2c;} /* 돈 = 금빛 카운터 웰 (밝은 볼록 플레이트 + 금색 외곽선 글로우 텍스트 — 사용자 스펙: 금색·굵은 외곽선·살짝 Glow) */ .money-well{flex:0 1 auto; min-width:0; display:flex; align-items:center; gap:6px; padding:4px 12px 4px 8px; border-radius:12px; background:linear-gradient(180deg,#fffaf0,#ffedc4); border:2px solid #e0ab45; box-shadow:inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 -3px 4px rgba(200,150,50,.28), 0 2px 0 #d69a2e, 0 3px 5px rgba(150,100,20,.28);} .money-ic{width:26px; height:26px; object-fit:contain; flex:0 0 auto; display:block; filter:drop-shadow(0 1px 1px rgba(120,80,10,.35));} .money{font-weight:900; font-size:22px; color:#ffc21f; line-height:1; letter-spacing:-.3px; font-variant-numeric:tabular-nums; white-space:nowrap; text-shadow: 1.2px 0 0 #7a4a12, -1.2px 0 0 #7a4a12, 0 1.2px 0 #7a4a12, 0 -1.2px 0 #7a4a12, 1px 1px 0 #7a4a12, -1px 1px 0 #7a4a12, 1px -1px 0 #7a4a12, -1px -1px 0 #7a4a12, 0 0 7px rgba(255,190,40,.5), 0 2px 1px rgba(90,55,10,.35);} .money.money-long{font-size:18px;} /* ₩9,999,999 대 */ .money.money-xlong{font-size:15px;} /* ₩99,999,999 이상 — 후반 인플레 구간 */ @keyframes hudpop{0%{transform:scale(1)} 28%{transform:scale(1.32)} 100%{transform:scale(1)}} .hudpop{animation:hudpop .34s ease-out; transform-origin:center;} /* best / 누적 = 최소 정보(작게 우측정렬) */ .hud-meta{display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:5px; font-size:10.5px; font-weight:700; color:#a08a5f;} .hud-meta .best{color:#b98f3f;} .hud-meta .lifetime{font-weight:700;} .hud-meta .lifetime #lifeText{font-variant-numeric:tabular-nums; color:#8a6f3e;} /* 게이지 웰 — 인셋 트레이 2개(평판·시간): 아이콘 + 두꺼운 글로시 바 + 굵은 값 */ .hud-gauges{display:flex; gap:8px; margin-top:9px;} .gauge{flex:1; display:flex; align-items:center; gap:7px; padding:5px 9px 5px 6px; border-radius:11px; background:linear-gradient(180deg,#eadfc6,#e2d5b6); box-shadow:inset 0 2px 4px rgba(120,95,45,.28), inset 0 -1px 0 rgba(255,255,255,.5), 0 1px 0 rgba(255,255,255,.6);} .g-ic{width:24px; height:24px; object-fit:contain; flex:0 0 auto; display:block; filter:drop-shadow(0 1px 1px rgba(0,0,0,.28));} /* 바 — 두껍게(12px) + 어두운 트랙 인셋 + 글로시 필(상단 하이라이트 ::after) */ .repbar, .timerbar{flex:1; height:12px; border-radius:7px; overflow:hidden; background:#c8b993; border:1px solid rgba(120,95,45,.4); box-shadow:inset 0 2px 3px rgba(90,70,30,.4);} .repbar > i, .timerbar > i{display:block; height:100%; border-radius:7px; position:relative;} .repbar > i::after, .timerbar > i::after{content:''; position:absolute; left:0; right:0; top:0; height:45%; border-radius:7px 7px 0 0; background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));} .repbar > i{width:70%; transition:width .35s ease-out, background .35s ease, box-shadow .35s ease;} .repbar > i.rep-low{background:linear-gradient(90deg,#ff5d5d,#ff8a4a); box-shadow:0 0 7px rgba(255,93,93,.6);} .repbar > i.rep-mid{background:linear-gradient(90deg,#ffcf3a,#ffab24); box-shadow:0 0 7px rgba(255,200,60,.55);} .repbar > i.rep-high{background:linear-gradient(90deg,#42e07f,#22d3f5); box-shadow:0 0 8px rgba(66,224,127,.6);} .timerbar > i{width:0%; background:linear-gradient(90deg,#22d3f5,#ec4b9c); box-shadow:0 0 7px rgba(120,200,255,.55);} .rep-val, .clock{flex:0 0 auto; min-width:34px; text-align:right; font-size:13px; font-weight:900; color:#6a5228; font-variant-numeric:tabular-nums; text-shadow:0 1px 0 rgba(255,255,255,.5);} /* 폐업 경고 — 빨간 경광등 알약 */ #strikeText{display:inline-block; margin-top:7px; font-size:10.5px; font-weight:900; color:#fff; background:linear-gradient(180deg,#ff6a5a,#e03b34); border:1.5px solid #a82018; border-radius:999px; padding:3px 11px; box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 0 10px rgba(255,60,50,.5); animation:storyBlink 1.6s ease-in-out infinite;} #strikeText[hidden]{display:none;} .next-stage{font-size:12px; color:var(--muted); text-align:center; background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:7px;} .stage-up{font-size:16px; font-weight:800; text-align:center; color:#04121a; background:linear-gradient(90deg,var(--gold),#ffb133); border-radius:12px; padding:12px; box-shadow:0 0 18px rgba(255,210,74,.6); animation:stagePop .5s ease-out;} @keyframes stagePop{ from{transform:scale(.6); opacity:0;} to{transform:scale(1); opacity:1;} } .stats{display:flex; gap:10px; margin-top:5px; font-size:12px;} .stat{display:flex; align-items:center; gap:3px;} .stat b{font-variant-numeric:tabular-nums; display:inline-block;} /* Canvas */ #stage{flex:1; position:relative; min-height:0; overflow:clip;} /* clip: hidden과 달리 프로그램적 스크롤 체이닝도 차단(화면 영구 시프트 방지) */ /* ===== 매장 밖 배경 (티어별) ===== 방 엔진 캔버스(z1)·FX 캔버스(z2)가 둘 다 투명이라 그 뒤(z0)를 이 레이어가 채운다. 구조는 "전용 배경 아트 + 앰비언트 그라데 폴백" 2층 — 아트가 아직 없으면 그라데만 보인다. 단계가 오르면 방 안(ROOM_THEMES)과 함께 바깥 풍경도 바뀐다 = 성장이 화면 전체로 읽힌다. */ /* ★ #cv(FX·말풍선 오버레이)의 스택 위치를 CSS로 고정한다. 구 코드는 mountRoom 성공 콜백에서만 z-index를 주입해서, 방 엔진 마운트가 실패/지연되면 z0인 #roomBg가 #cv 위에 깔려 게임 입력· 말풍선이 통째로 가려질 수 있었다(2026-07-21 리뷰). 배경0 < 방1 < 오버레이2. */ #cv{position:relative; z-index:2;} .room-bg{position:absolute; inset:0; z-index:0; pointer-events:none; /* ★ 도시 배경(2026-07-22 사장님 "pc방 밖 배경도 구현하기. 도시 배경, 카이로소프트처럼"). 예전엔 뿌연 그라데이션뿐이라 매장이 허공에 떠 있었다. 이제 아이소 도시 블록 아트가 깔린다 — 가운데를 비워 생성해서(프롬프트 강제) 방 다이아몬드가 그 빈 공터에 정확히 앉는다. cover + 중앙 정렬: 방은 항상 화면 중앙이므로 배경도 중앙을 기준으로 잡는다. */ background-size:cover; background-position:center center; background-repeat:no-repeat; /* ★ 바깥은 한 단계 눌러 둔다 (2026-07-22). 도시 아트를 넣고 나니 광장 크림색이 매장 왼쪽 벽 (0xddd6c3)과 거의 같은 밝기라 벽이 배경에 먹혀 사라지고, 벽에 붙은 네온 줄만 도시 위에 둥둥 떠 보였다. 벽 색을 바꾸는 대신 배경을 눌러 매장을 앞에 세운다 — 카이로 문법에서도 가게 밖은 항상 한 톤 뒤로 물러나 있다. */ filter:brightness(.8) saturate(.95) contrast(.96); transition:opacity .5s ease;} .room-bg.t1{ background-image:url('../assets/room-bg-t1.webp'); } .room-bg.t2{ background-image:url('../assets/room-bg-t2.webp'); } .room-bg.t3{ background-image:url('../assets/room-bg-t3.webp'); } .room-bg.t4{ background-image:url('../assets/room-bg-t4.webp'); } canvas{display:block; width:100%; height:100%; touch-action:none; cursor:pointer;} /* 클릭 가능 표시(데스크탑 손가락 커서) */ /* Buttons — 보조 = 게임 플라스틱 탭 (웹 플랫 카드 아님, 큰 CTA(장난감3D)보단 조용한 2층 위계). 두꺼운 테두리 + 상단 하이라이트 + 단단한 밑면(두께) + 꾹 눌림 + 게임 폰트. 작은 구매칩(.pbtn)은 위계상 플랫 유지. */ .btn{flex:0 0 auto; position:relative; cursor:pointer; color:#6a5738; font-family:var(--font-game); font-size:13.5px; font-weight:800; letter-spacing:-.2px; padding:9px 13px; min-height:46px; border-radius:12px; border:2px solid #d6c49b; background:linear-gradient(180deg,#fffaf0,#f2e8d2); text-shadow:0 1px 0 rgba(255,255,255,.7); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.92), /* 상단 하이라이트(볼록) */ inset 0 -7px 8px -6px rgba(150,120,60,.20), /* 하단 내부 두께 음영 */ 0 3px 0 #dcc99f, /* 단단한 밑면(두께) */ 0 5px 7px -2px rgba(120,90,30,.22); /* 좁은 접지 그림자(웹식 큰 블러 금지) */ transition:transform .06s ease, box-shadow .06s ease;} .btn:active{transform:translateY(3px); /* 스케일 아님 — 아래로 꾹 + 밑면 얇아짐 */ box-shadow: inset 0 1.5px 0 rgba(255,255,255,.9), inset 0 -4px 6px -4px rgba(150,120,60,.20), 0 1px 0 #dcc99f, 0 2px 4px -1px rgba(120,90,30,.2);} .btn.ghost{background:linear-gradient(180deg,#fdf8ec,#eee4cd); border-color:#dbcdaa;} /* 유틸(타이틀 보조·소리·세이브 등) = 살짝 차분한 플라스틱 */ /* ===== 장난감 3D 게임 버튼 엔진 (큰 CTA 전용) ===== 5요소 = ①굵은 테두리 ②상단 하이라이트 ③하단 두께(단단한 밑면) ④대각선 광택 ⑤외곽선 크림 텍스트. 색은 코랄이 예시일 뿐 — 역할별 --b-* 스킨으로 상황에 맞게. 작은 구매칩(.pbtn)·유틸(.ghost)은 위계상 제외(플랫 유지). */ .btn.primary, .rs-shopcta, .rs-double, .gm-open-btn{ --b-face1:#63dcf5; --b-face2:#22bfe4; --b-face3:#0a9cc4; /* 기본 = 시안(브랜드 GO) */ --b-border:#0b7fa6; --b-edge:#0b83a9; --b-edge2:#076486; --b-ink:#f4fcff; --b-stroke:#065d7b; --b-shade:rgba(6,80,110,.24); position:relative; border:3px solid var(--b-border); border-radius:15px; color:var(--b-ink); font-family:var(--font-game); font-weight:800; letter-spacing:-.2px; font-size:17px; /* ⑤ 외곽선 크림 텍스트 — text-shadow 링(글자 바깥 전체를 감싸 크림 채움이 우세) + 하단 깊이 드롭 */ text-shadow: 1.4px 0 0 var(--b-stroke), -1.4px 0 0 var(--b-stroke), 0 1.4px 0 var(--b-stroke), 0 -1.4px 0 var(--b-stroke), 1px 1px 0 var(--b-stroke), -1px 1px 0 var(--b-stroke), 1px -1px 0 var(--b-stroke), -1px -1px 0 var(--b-stroke), 0 2px 0 rgba(0,0,0,.22); /* ④ 대각선 광택 — 하드 컷 없이 끝까지 부드럽게 페이드(층 끊김 방지). + ①②③ 세로 페이스(연속) */ background: linear-gradient(160deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.12) 30%, rgba(255,255,255,.03) 60%, rgba(255,255,255,0) 100%), linear-gradient(180deg, var(--b-face1) 0%, var(--b-face2) 55%, var(--b-face3) 100%); /* ③ 하단 두께 — 하드 솔리드 면(0블러) 대신 블러가 겹치는 그라데 스택으로 연속화: 버튼색(edge) → 진한 밑동(edge2) → 접지까지 끊김 없이 어두워짐. */ box-shadow: inset 0 4px 6px rgba(255,255,255,.36), /* ② 상단 하이라이트(볼록) */ inset 0 -18px 16px -10px var(--b-shade), /* 하단 내부 음영 — 부드럽게 스며듦 */ 0 3px 3px -1px var(--b-edge), /* 두께: 버튼 바로 아래 (버튼 색조) */ 0 7px 7px -2px var(--b-edge2), /* 두께: 중간 (더 진함) */ 0 12px 12px -4px var(--b-edge2), /* 두께: 아래 (여전히 유채색 → 밑동 느낌) */ 0 18px 20px -6px rgba(0,0,0,.24); /* 접지 그림자 — 부드럽게 소멸 */ transition:transform .06s ease, box-shadow .06s ease; } .btn.primary small, .rs-shopcta small, .rs-double small{ text-shadow: .8px 0 0 var(--b-stroke), -.8px 0 0 var(--b-stroke), 0 .8px 0 var(--b-stroke), 0 -.8px 0 var(--b-stroke), 0 1px 0 rgba(0,0,0,.18); } .btn.primary:active, .rs-shopcta:active, .rs-double:active, .gm-open-btn:active{ transform:translateY(6px); /* 스케일 축소 아님 — 아래로 꾹 + 밑동 얇아짐(연속 유지) */ box-shadow: inset 0 3px 5px rgba(255,255,255,.30), inset 0 -10px 9px -6px var(--b-shade), 0 2px 2px -1px var(--b-edge), 0 4px 5px -2px var(--b-edge2), 0 7px 9px -4px rgba(0,0,0,.20); } /* --- 역할별 색 스킨 (상황에 맞게) --- */ #dailyCloseBtn, /* 보상 받기 */ #idleTakeBtn, /* 무인 영업 수금 */ .gm-open-btn{ /* 상권 확장 지도 */ --b-face1:#ffe291; --b-face2:#ffc340; --b-face3:#f59b28; --b-border:#a4651a; --b-edge:#b06f17; --b-edge2:#85500f; --b-ink:#fff6e0; --b-stroke:#8a4f12; --b-shade:rgba(140,80,15,.22); } .rs-shopcta{ /* 업그레이드(상점) = 인디고 */ --b-face1:#7f9bf0; --b-face2:#4a68e0; --b-face3:#2f47b8; --b-border:#26348c; --b-edge:#2b3d9e; --b-edge2:#1e2b74; --b-ink:#f3f6ff; --b-stroke:#202c7a; --b-shade:rgba(28,38,105,.26); } .rs-double, .idle-double{ /* 광고 보고 2배(보너스) = 그린 */ --b-face1:#84e8ad; --b-face2:#42cb85; --b-face3:#22a866; --b-border:#157a48; --b-edge:#188c51; --b-edge2:#0f6a3d; --b-ink:#f0fff7; --b-stroke:#0e6035; --b-shade:rgba(15,100,55,.24); } /* ===== 무인 영업(오프라인 수익) 수금 모달 — 복귀 첫 화면이라 '보상'으로 읽혀야 한다 ===== */ .idle-card{ text-align:center; max-width:340px; } .idle-mascot{ width:104px; height:auto; display:block; margin:2px auto 6px; filter:drop-shadow(0 6px 10px rgba(120,80,10,.22)); animation:idlePop .5s cubic-bezier(.2,1.5,.4,1) both; } @keyframes idlePop{ from{ transform:scale(.6) translateY(10px); opacity:0 } to{ transform:none; opacity:1 } } .idle-dur{ margin:0 0 6px; color:var(--muted); font-size:13px; } .idle-dur b{ color:var(--txt); } .idle-amount{ font-family:var(--font-game); font-size:34px; font-weight:800; color:var(--gold); letter-spacing:-.5px; margin:2px 0 6px; text-shadow:1.5px 0 0 #7a4a08, -1.5px 0 0 #7a4a08, 0 1.5px 0 #7a4a08, 0 -1.5px 0 #7a4a08, 1px 1px 0 #7a4a08, -1px 1px 0 #7a4a08, 1px -1px 0 #7a4a08, -1px -1px 0 #7a4a08, 0 3px 0 rgba(0,0,0,.2); } .idle-rate{ margin:0 0 14px; color:var(--muted); font-size:11.5px; line-height:1.5; } .idle-card .btn{ width:100%; padding:12px; } .idle-card .btn + .btn{ margin-top:18px; } /* 밑동(box-shadow 12~18px) 겹침 방지 */ /* Overlay panels */ .overlay{position:absolute; inset:0; background:rgba(30,28,24,.42); backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; padding:16px; z-index:20;} .overlay.show{display:flex;} /* 모달류는 더 높은 z — 우연히 다른 오버레이와 동시 표시돼도 의미상 '현재 화면'이 위에 오도록(스택이 DOM 순서에만 의존하던 취약점 보강) */ #titleOverlay.show, #overOverlay.show, #endingOverlay.show{z-index:24;} /* 컷신은 화면 전체를 덮는다(2026-07-22 사장님) — HUD·하단 메뉴바까지. #stage 안에 있으면 그 영역만 덮으므로 position:fixed 로 뷰포트 전체를 잡고 z 를 최상위로 올린다. */ #storyOverlay.show{z-index:40; position:fixed; inset:0;} /* 게임방법·세이브·출석보상 등 타이틀 위에 띄우는 모달은 타이틀(24)보다 위 — z=24 규칙 추가 후 howto가 타이틀 뒤에 깔려 안 보이던 회귀 픽스 */ #howtoOverlay.show, #dailyOverlay.show{z-index:26;} #idleOverlay.show{z-index:27;} /* 무인 영업 수금 = 복귀 첫 화면 → 타이틀(24)·출석(26) 위 */ #awardOverlay.show{z-index:27;} /* 시상식 = 정산 페이지 위로 */ #recipeOverlay.show, #regularsOverlay.show, #decorOverlay.show{z-index:26;} /* Story cutscene — 하단 대화 박스 (게임 화면 살짝 어둡게, 탭하여 계속) */ .overlay.story{align-items:flex-end; background:rgba(30,28,24,.42); backdrop-filter:blur(1.5px); padding:0 14px calc(18px + env(safe-area-inset-bottom)); cursor:pointer;} /* 풀스크린 컷신 배경 (assets/cutscene-.webp). 있으면 화면 덮음, 없으면 폴백(게임화면 dim) */ /* 컷신 그림 — contain(전체 노출). 원본이 1:1인데 화면은 세로라 cover 로 채우면 가로 절반이 잘려 인물이 반토막 난다. 세로 중앙보다 살짝 위(42%)에 두어 하단 대사 박스와 덜 겹치게. */ .story-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center 42%; display:none; z-index:1; animation:storyBgIn .4s ease-out;} /* contain 으로 생긴 여백 = 같은 그림의 블러 확대본으로 채운다(레터박스처럼 안 보이게). scale(1.15)는 blur 가장자리가 비쳐 보이는 것 방지. */ .overlay.story.hasbg::before{content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background:var(--story-bg) center/cover no-repeat; filter:blur(26px) saturate(.85) brightness(.72); transform:scale(1.15); animation:storyBgIn .4s ease-out;} .overlay.story.hasbg{background:rgba(30,28,24,.42); backdrop-filter:none;} /* 스토리 건너뛰기(첫 세션 이탈 방지 · 리텐션) — 우상단 알약 버튼, 배경/박스 위층 */ .story-skip{position:absolute; z-index:6; top:calc(env(safe-area-inset-top,0px) + 12px); right:14px; padding:8px 14px; font:800 13px/1 inherit; color:var(--txt); letter-spacing:.02em; background:rgba(255,253,248,.82); border:1px solid rgba(0,0,0,.14); border-radius:999px; box-shadow:0 4px 14px rgba(0,0,0,.4); backdrop-filter:blur(3px); cursor:pointer; -webkit-tap-highlight-color:transparent; opacity:.86; transition:opacity .15s, transform .1s;} .story-skip:active{opacity:1; transform:scale(.95);} .overlay.story .story-box{position:relative; z-index:1;} .overlay.story.hasbg #storyPortrait{display:none !important;} /* 풀아트에 인물 있음 → 작은 초상 생략 */ @keyframes storyBgIn{from{opacity:0;} to{opacity:1;}} /* 첫 플레이 튜토리얼 — 삼촌이 가르쳐줌. 멘트 비트는 코치가 탭 받고, 지목 비트는 JS가 pointer-events:none */ #coach{position:absolute; inset:0; z-index:15; display:none;} /* dim+스포트라이트는 캔버스 render가 그림(말풍선이 어둠 위로 드러나게) */ #coach.show{display:block; animation:storyIn .25s ease-out;} .coach-finger{position:absolute; font-size:42px; display:none; pointer-events:none; animation:coachTap 1s ease-in-out infinite; filter:drop-shadow(0 3px 5px rgba(0,0,0,.7));} @keyframes coachTap{0%,100%{transform:translate(-50%,18%);} 50%{transform:translate(-50%,58%);}} .coach-talk{position:absolute; left:0; right:0; bottom:calc(18px + env(safe-area-inset-bottom)); display:flex; align-items:flex-end; gap:10px; padding:0 14px;} #coachPortrait{width:74px; height:74px; object-fit:contain; flex:0 0 auto; filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));} .coach-bubble{flex:1; min-width:0; background:var(--panel); border:1px solid var(--neon); border-top:2px solid var(--neon); border-radius:14px; padding:12px 16px; box-shadow:0 6px 24px rgba(0,0,0,.55);} .coach-name{font-size:13px; font-weight:800; color:var(--neon); margin-bottom:4px;} .coach-msg{margin:0; font-size:15px; font-weight:700; color:var(--txt); line-height:1.45;} .coach-cont{font-size:11px; color:var(--muted); text-align:right; margin-top:8px; animation:storyBlink 1.2s ease-in-out infinite;} .story-box{display:flex; align-items:center; gap:12px; width:100%; max-width:440px; background:linear-gradient(180deg,#fffdf8,#f2eee3); border:1px solid var(--line); border-top:2px solid var(--neon); border-radius:16px; padding:14px 16px; box-shadow:0 8px 30px rgba(0,0,0,.5); animation:storyIn .22s ease-out;} .story-box img{width:84px; height:84px; object-fit:contain; flex:0 0 auto; filter:drop-shadow(0 3px 6px rgba(0,0,0,.4));} .story-body{flex:1; min-width:0;} .story-name{font-size:13px; font-weight:800; color:var(--neon); margin-bottom:4px;} .story-text{margin:0; font-size:15px; font-weight:600; line-height:1.5; color:var(--txt);} .story-cont{font-size:11px; color:var(--muted); text-align:right; margin-top:8px; animation:storyBlink 1.2s ease-in-out infinite;} /* 나레이션 — 초상 없이 중앙 정렬 상황 설명 */ .story-box.narration{padding:18px 20px;} .story-box.narration .story-text{text-align:center; font-size:15.5px; font-weight:600; line-height:1.6; color:var(--txt); opacity:.95;} .story-box.narration .story-cont{text-align:center;} @keyframes storyIn{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);}} @keyframes storyBlink{0%,100%{opacity:.4;} 50%{opacity:1;}} .card{width:100%; max-width:380px; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:16px; max-height:92%; overflow:auto;} .card h2{margin:0 0 10px; font-size:18px;} .ledger{font-size:13px; line-height:1.9; font-variant-numeric:tabular-nums;} .ledger .row{display:flex; justify-content:space-between; border-bottom:1px dashed var(--line); padding:2px 0;} .ledger .net{font-weight:800; font-size:16px; color:var(--gold); border:none; margin-top:4px;} .review{margin:10px 0; padding:8px 10px; background:var(--panel2); border-radius:10px; font-size:12.5px; color:var(--muted); font-style:italic;} /* 정산 전체화면 페이지 */ .overlay.page{align-items:stretch; padding:0;} .settle-page{width:100%; max-width:480px; margin:0 auto; height:100%; display:flex; flex-direction:column; gap:10px; padding:calc(14px + env(safe-area-inset-top)) 14px 0; overflow:auto;} /* 세로 flex 스크롤 페이지의 자식은 수축 금지 — overflow:hidden 자식(.rs-hero 등)은 min-height:auto가 해제돼 그 자식만 한 줄(28px)로 짜부라지고 내용(순이익·등급·별)이 통째로 클리핑되는 붕괴가 일어남 */ .settle-page>*, .gm-page>*, .ending-page>*{flex-shrink:0;} /* CTA 하단 고정 — 스크롤 컨테이너 바닥에 붙고, 위 콘텐츠는 그 아래로 페이드아웃 */ .rs-footer{position:sticky; bottom:0; z-index:6; margin:6px -14px 0; padding:10px 14px calc(12px + env(safe-area-inset-bottom)); background:linear-gradient(rgba(238,232,221,0), rgba(238,232,221,.92) 42%);} .rs-footer .rs-next{margin-top:0;} .settle-head{display:flex; justify-content:space-between; align-items:center;} .settle-day{font-size:19px; font-weight:800;} .settle-grade{font-size:22px; color:var(--gold); letter-spacing:2px;} .settle-profit{text-align:center; background:var(--panel2); border:1px solid var(--line); border-radius:14px; padding:14px;} .settle-profit .lbl{display:block; font-size:12px; color:var(--muted); margin-bottom:2px;} .settle-profit .big{font-size:34px; font-weight:800; color:var(--gold); font-variant-numeric:tabular-nums;} .settle-money{display:flex; gap:8px;} .settle-money>div{flex:1; background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:9px 6px; text-align:center; font-size:11.5px; color:var(--muted);} .settle-money b{display:block; margin-top:3px; font-size:15px; color:var(--txt); font-variant-numeric:tabular-nums;} .btn.big{padding:15px; font-size:19px; width:100%; margin-top:4px;} /* ===== 정산 결과 화면 (게임 결과 스타일) ===== */ .rs-daypill{align-self:center; font-size:12px; font-weight:700; color:var(--neon); background:rgba(54,224,255,.12); border:1px solid rgba(54,224,255,.4); border-radius:20px; padding:4px 14px;} .rs-title{text-align:center; font-size:30px; font-weight:900; letter-spacing:-.5px; margin:2px 0; background:linear-gradient(180deg,#ffe79a,#ffb733); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 2px 4px rgba(255,160,0,.35)); animation:rsPop .4s ease-out;} @keyframes rsPop{from{transform:scale(.8);opacity:0;} to{transform:scale(1);opacity:1;}} .rs-grade{display:flex; align-items:center; justify-content:center; gap:14px; margin:4px 0;} .rs-badge{position:relative; width:96px; height:90px; display:flex; align-items:center; justify-content:center; animation:rsPop .45s ease-out;} .rs-badge-img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 0 14px rgba(255,180,40,.45));} .rs-badge .g{position:relative; z-index:1; font-size:36px; font-weight:900; color:#3a2600; margin-top:-8px; text-shadow:0 1px 1px rgba(255,255,255,.4);} .rs-badge.silver .g{color:#1b2440;} .rs-badge.bronze .g{color:#3a1c08;} .rs-stars{display:flex; gap:4px; align-items:center;} .rs-stars img{width:34px; height:34px; object-fit:contain;} .rs-comment{text-align:center; font-size:14px; font-weight:700; color:var(--muted); margin-top:-2px;} .rs-receipt{position:relative; margin-top:8px; background:linear-gradient(180deg,#fffef8,#fdfbf4); border:1.5px solid var(--neon); border-radius:16px; padding:18px 16px 14px; box-shadow:0 0 18px rgba(54,224,255,.18);} .rs-rtab{position:absolute; top:-12px; left:50%; transform:translateX(-50%); font-size:12px; font-weight:800; color:#04121a; background:linear-gradient(90deg,var(--neon),#2aa9ff); padding:3px 16px; border-radius:20px; white-space:nowrap;} .rs-net{display:flex; align-items:center; gap:8px; padding:4px 2px 12px;} .rs-net .lbl{font-size:14px; font-weight:700; color:var(--txt); flex:0 0 auto;} .rs-net .val{flex:1; text-align:right; font-size:34px; font-weight:900; color:var(--gold); font-variant-numeric:tabular-nums; letter-spacing:-1px; text-shadow:0 2px 6px rgba(255,160,0,.3);} .rs-coin{width:54px; height:54px; object-fit:contain; flex:0 0 auto;} .rs-cols span img{width:15px; height:15px; object-fit:contain; vertical-align:-2px; margin-right:3px;} .rs-chest{width:20px; height:20px; object-fit:contain; vertical-align:-4px;} .rs-cols{display:flex; border-top:1px dashed var(--line); padding-top:12px;} .rs-cols>div{flex:1; text-align:center; border-right:1px solid var(--line);} .rs-cols>div:last-child{border-right:none;} .rs-cols span{display:block; font-size:11.5px; font-weight:700; margin-bottom:3px;} .rs-cols b{font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--txt);} .rs-cols .up{color:var(--good);} .rs-cols .down{color:var(--bad);} .rs-cols .rep{color:var(--neon2);} .rs-grow{background:linear-gradient(180deg,#fffdf8,#f2eee3); border:1px solid var(--line); border-radius:14px; padding:11px 13px;} .rs-grow-top{display:flex; justify-content:space-between; align-items:flex-end; gap:8px;} .rs-grow-top span{display:flex; flex-direction:column;} .rs-grow-top .mid{align-items:center;} .rs-grow-top .right{align-items:flex-end; text-align:right;} .rs-grow-top small{font-size:10.5px; color:var(--muted);} .rs-grow-top b{font-size:14px; font-weight:800; color:var(--txt);} .rs-grow-top .mid b{color:var(--neon); font-size:18px;} /* .rs-grow-top .right b 색은 아래 rs-grow 블록에서 지정(--neon) — 여기 있던 --gold 선언은 나중 선언에 덮여 한 번도 적용된 적이 없는 죽은 코드라 제거했다(외형 변화 0). */ .rs-grow-bar{height:9px; background:#e7e1d2; border:1px solid var(--line); border-radius:6px; overflow:hidden; margin:9px 0;} .rs-grow-bar>i{display:block; height:100%; width:0%; border-radius:6px; background:linear-gradient(90deg,var(--neon),#2aa9ff); box-shadow:0 0 8px rgba(54,224,255,.6); transition:width .5s ease-out;} .rs-grow-note{font-size:11px; color:var(--muted); margin:-2px 0 7px; opacity:.85;} .rs-grow-reward{font-size:11.5px; color:var(--muted);} .rs-grow-reward span{color:var(--gold); font-weight:700;} /* 승급 임박(≥80%) 강조 — 다음 목표 카드가 두근거림 */ .rs-grow.imminent{border-color:var(--gold); box-shadow:0 0 20px rgba(255,210,74,.35); animation:gmPulse 1.4s ease-in-out infinite;} .rs-grow.imminent .rs-grow-tease{color:var(--gold); font-weight:800;} /* 메인 HUD 로드맵 진입 버튼 → 스타일은 위 .hud-map(장난감 3D 스킨) 하나뿐이다. ★ 여기 있던 옛 규칙(텍스트 버튼 시절의 padding:7px 9px·시안 배경·1px 테두리)을 지웠다. 선언이 나중이라 새 규칙을 통째로 이겨서, 34px 고정 버튼의 내용영역이 14x18로 쪼그라들고 24px 아이콘이 안 들어가 오른쪽·아래로 흘러넘쳤다(= 반복 지적된 "아이콘 중앙정렬 안 됨"). place-items:center 는 아이템이 넘칠 땐 중앙을 포기하고 시작점에 붙기 때문에 조용히 어긋난다. 같은 선택자를 두 번 쓰지 말 것 — tools/check_css_dupes.js 가 CI에서 막는다. */ /* 잠긴 업그레이드 → 로드맵 안내(해금처 보기) */ .shop-row.maphint{cursor:pointer;} .shop-row.maphint .pbtn.lock{border-color:var(--gold); color:var(--gold);} .rs-shop{background:rgba(255,253,248,.6); border:1px solid var(--line); border-radius:14px; padding:10px;} .rs-shop-head{display:flex; justify-content:space-between; align-items:baseline; font-size:14px; font-weight:800; margin-bottom:8px;} .rs-shop-head #settleCash{font-size:12px; color:var(--gold);} /* 추천 TOP-3 강조 + 전체 접기 */ #upRecommend .shop-row{background:linear-gradient(180deg,rgba(54,224,255,.10),var(--panel2)); border-color:rgba(54,224,255,.35);} .rs-shop-allmax{text-align:center; font-size:12px; font-weight:700; color:var(--good); padding:10px 0;} .rs-shop-all{margin-top:8px;} .rs-shop-more{list-style:none; cursor:pointer; text-align:center; font-size:12px; font-weight:800; color:var(--muted); background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:8px; user-select:none;} .rs-shop-more::-webkit-details-marker{display:none;} .rs-shop-more:active{transform:scale(.98);} .rs-shop-all[open] .rs-shop-more{margin-bottom:8px; color:var(--txt);} .rs-shop-all[open] .rs-shop-more::after{content:' ▲';} .rs-shop-more::after{content:' ▼'; opacity:.6;} /* ===== 상점 = 레벨 로드맵 (한 줄 = 한 아이템, 핍으로 진행도) ===== */ .rs-shop-grid{display:flex; flex-direction:column; gap:7px;} .shop-row{display:flex; align-items:center; gap:9px; background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:8px 10px;} .shop-row.ok{border-color:rgba(95,224,138,.5);} .shop-row.lock{opacity:.7;} .shop-row img{width:38px; height:38px; object-fit:contain; flex:0 0 auto;} .shop-row .sr-mid{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px;} .shop-row .sr-top{display:flex; justify-content:space-between; align-items:baseline; gap:6px;} .shop-row .sr-nm{font-size:13px; font-weight:800; color:var(--txt);} .shop-row .sr-lv{font-size:10.5px; font-weight:700; color:var(--muted); flex:0 0 auto;} /* 핍 트랙 — 채워진 칸(완료) / 빈 칸(앞으로) / ⭐(최종 자동화) */ .shop-row .sr-track{display:flex; gap:4px; align-items:center; flex-wrap:wrap;} .shop-row .pip{width:13px; height:7px; border-radius:4px; background:var(--line); display:inline-flex; align-items:center; justify-content:center; transition:background .2s;} .shop-row .pip.on{background:linear-gradient(90deg,var(--neon),var(--neon2));} .shop-row .pip.star{width:auto; height:auto; min-width:14px; background:transparent; font-size:13px; line-height:1; color:var(--muted);} .shop-row .pip.star.on{background:transparent; color:#ffc640; text-shadow:0 0 7px rgba(255,190,60,.7);} .shop-row .sr-ef{font-size:10.5px; color:var(--muted); line-height:1.25;} .shop-row.autostep .sr-ef{color:#cba74e;} .shop-row .sr-act{flex:0 0 auto; display:flex; flex-direction:column; align-items:stretch; gap:2px; min-width:74px;} .shop-row .pbtn{border:none; border-radius:8px; padding:7px 8px; min-height:44px; font-size:11.5px; font-weight:800; cursor:pointer; white-space:nowrap; transition:transform .07s ease;} /* min-height 44px — 정산마다 반복되는 핵심 구매 액션 터치 타겟 */ .shop-row .pbtn:active{transform:scale(.93);} /* 가장 많이 누르는 구매 버튼 누름 스쿼시(탭 피드백) — .btn엔 있었는데 .pbtn엔 없던 갭 */ .shop-row .pbtn.ok{background:var(--good); color:#06200f;} .shop-row .pbtn.poor{background:var(--line); color:var(--muted);} .shop-row .pbtn.lock{background:transparent; border:1px solid var(--line); color:var(--muted);} .shop-row .pbtn.max{background:transparent; border:1px solid var(--neon); color:var(--neon);} .shop-row .st{font-size:9.5px; font-weight:700; text-align:center;} .shop-row .st.ok{color:var(--good);} .shop-row .st.poor{color:var(--muted);} .shop-row .st.lock{color:var(--warn);} .shop-row .st.max{color:var(--neon);} /* 서비스 라인이 '자동화'(최종) 차례면 금빛 강조 */ .shop-row.autostep .pbtn.ok{background:linear-gradient(90deg,#ffc640,#ffab14); color:#3a2400; box-shadow:0 0 10px rgba(255,180,40,.45);} .shop-row.autostep.ok{border-color:rgba(255,196,72,.45);} .shop-row.autostep.max{border-color:rgba(255,196,72,.4);} .shop-row.autostep .pbtn.max,.shop-row.autostep .st.max{color:#ffd672; border-color:#ffc640;} /* ===== 정산 v2 — 결과 우선 레이아웃 ===== */ .rs-head{display:flex; justify-content:space-between; align-items:flex-start; gap:10px;} .rs-head-l{display:flex; flex-direction:column; gap:4px; align-items:flex-start;} .rs-head .rs-daypill{align-self:flex-start; font-size:13px;} .rs-subtitle{font-size:11.5px; color:var(--muted); font-weight:600;} .rs-hold{flex:0 0 auto; text-align:right; background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:6px 11px;} .rs-hold small{display:block; font-size:9.5px; color:var(--muted);} .rs-hold b{font-size:15px; font-weight:800; color:var(--gold); font-variant-numeric:tabular-nums;} .rs-hero{position:relative; text-align:center; border:1.5px solid rgba(255,196,72,.4); border-radius:18px; padding:14px 12px 12px; overflow:hidden; box-shadow:0 0 24px rgba(255,170,40,.12); background:radial-gradient(120% 90% at 50% 0%, rgba(255,196,72,.18), rgba(255,196,72,0) 70%);} /* 히어로 영수증 프린터 — 우하단 데코(텍스트는 위에 뜨도록 z-index 분리) */ .rs-hero-printer{position:absolute; right:-10px; bottom:-8px; width:84px; height:84px; object-fit:contain; opacity:.95; pointer-events:none; z-index:0; filter:drop-shadow(0 3px 7px rgba(0,0,0,.45)); animation:rsPrinterIn .5s ease-out;} @keyframes rsPrinterIn{from{transform:translateY(10px) scale(.85);opacity:0;} to{transform:none;opacity:.95;}} .rs-hero-cap,.rs-hero-net,.rs-hero-best,.rs-hero .rs-grade-row{position:relative; z-index:1;} .rs-hero-cap{font-size:13px; font-weight:800; color:var(--gold); letter-spacing:.5px;} .rs-hero-net{font-size:46px; font-weight:900; letter-spacing:-1.5px; line-height:1.05; margin:2px 0; background:linear-gradient(180deg,#fff0b0,#ffb733); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 3px 6px rgba(255,150,0,.4)); font-variant-numeric:tabular-nums; animation:rsPop .4s ease-out;} /* 순손실 날 — 금색 축하 톤 대신 차분한 빨강 (내역의 지출색과 동일 계열) */ .rs-hero-net.neg{background:linear-gradient(180deg,#ffb3a6,#ff5d5d); filter:drop-shadow(0 3px 6px rgba(255,80,80,.3));} .rs-hero-best{display:none; font-size:12px; font-weight:900; color:#ff7a3c; transform:rotate(-4deg); text-shadow:0 1px 0 rgba(0,0,0,.3); margin-bottom:4px;} .rs-grade-row{display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:2px;} .rs-grade-row .rs-badge{width:46px; height:44px;} .rs-grade-row .rs-badge .g{font-size:19px; margin-top:-4px;} .rs-grade-row .rs-stars img{width:19px; height:19px;} .rs-grade-row .rs-comment{margin:0;} .rs-pills{display:flex; gap:8px;} .rs-pill{flex:1; display:flex; flex-direction:column; align-items:center; gap:1px; background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:8px 4px;} .rs-pill .ic{width:26px; height:26px; object-fit:contain;} .rs-pill small{font-size:10px; color:var(--muted);} .rs-pill b{font-size:16px; font-weight:900; color:var(--txt); font-variant-numeric:tabular-nums;} .rs-pill b.pos{color:var(--good);} .rs-pill b.neg{color:var(--bad);} .rs-bd{display:flex; flex-direction:column;} .rs-bd-row{display:flex; justify-content:space-between; align-items:center; padding:7px 2px; border-bottom:1px dashed var(--line);} .rs-bd-row:last-child{border-bottom:none;} .rs-bd-l{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--txt);} .rs-bd-l img{width:24px; height:24px; object-fit:contain;} .rs-bd-row>b{font-size:14.5px; font-weight:800; font-variant-numeric:tabular-nums;} .rs-bd-row>b.pos{color:var(--good);} .rs-bd-row>b.neg{color:var(--bad);} .rs-bd-row.net{margin-top:3px; border-top:1.5px solid var(--line); padding-top:10px;} .rs-bd-row.net .rs-bd-l{font-size:14px; font-weight:900;} .rs-bd-row.net>b{font-size:18px;} .rs-events{background:rgba(255,253,248,.6); border:1px solid var(--line); border-radius:14px; padding:11px;} .rs-ev-head{display:flex; align-items:flex-start; gap:10px; margin-bottom:9px;} .rs-ev-head img{width:46px; height:46px; object-fit:contain; flex:0 0 auto;} .rs-ev-bubble{position:relative; background:#eef1f7; color:#1a1f2e; font-size:13px; font-weight:700; border-radius:12px; padding:9px 12px; line-height:1.35; margin-top:4px;} .rs-ev-bubble::before{content:''; position:absolute; left:-6px; top:14px; border:6px solid transparent; border-right-color:#eef1f7; border-left:0;} .rs-ev-list{display:flex; flex-direction:column; gap:6px;} .rs-event{display:flex; align-items:center; gap:10px; background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:7px 9px;} .rs-event.good{border-left:3px solid var(--good);} .rs-event.bad{border-left:3px solid var(--bad);} .rs-ev-ic{font-size:18px; flex:0 0 auto; width:24px; text-align:center;} .rs-ev-tx{display:flex; flex-direction:column; min-width:0;} .rs-ev-tx b{font-size:12.5px; font-weight:800; color:var(--txt);} .rs-ev-tx small{font-size:10.5px; color:var(--muted);} .rs-grow-sub{font-size:11.5px; color:var(--muted); margin:-2px 0 6px;} .rs-grow-sub b{font-weight:800;} .rs-grow-sub .pos{color:var(--good);} .rs-grow-tease{font-size:12px; font-weight:800; color:var(--gold); margin-bottom:6px;} .rs-grow-top .right b{color:var(--neon);} .rs-footer{display:flex; gap:8px; align-items:stretch;} .rs-footer .rs-next{flex:1.5;} .rs-shopcta{flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; line-height:1.1; white-space:nowrap; word-break:keep-all;} /* 색·입체는 3D 엔진(인디고 스킨). '업그레이/드' 줄바꿈 방지 */ .rs-shopcta small{font-size:12px; font-weight:700; opacity:.9;} /* 보상형 광고 '일당 2배' — 풀폭, 보너스 톤(그린 스킨), 다음날 버튼 위에 */ .rs-double{display:flex; flex-direction:column; align-items:center; gap:2px; line-height:1.15; margin:8px -14px 0; width:calc(100% + 28px); white-space:nowrap; word-break:keep-all;} .rs-double small{font-size:12.5px; font-weight:800; opacity:.85;} .rs-double[disabled]{filter:grayscale(.4) brightness(.92); opacity:.7;} @media (max-width:359px){ /* 320px(SE)급 — 풋터 버튼 폭 부족 보정 */ .rs-shopcta{font-size:14px; padding-left:6px; padding-right:6px;} .rs-shopcta small{font-size:9.5px;} } /* ===== 엔딩 / 명예의 전당 ===== */ #endingOverlay{background:radial-gradient(120% 80% at 50% 0%, #fff6e0 0%, #f3ecdd 55%, #ece7db 100%);} .ending-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:.5;} .ending-page{position:relative; z-index:2; width:100%; max-width:440px; margin:0 auto; height:100%; display:flex; flex-direction:column; align-items:center; text-align:center; gap:9px; padding:calc(20px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom)); overflow:auto;} .end-trophy{width:96px; height:96px; display:flex; align-items:center; justify-content:center; margin-top:4px; filter:drop-shadow(0 0 22px rgba(255,200,70,.7)); animation:trophyIn .7s cubic-bezier(.2,1.4,.4,1);} .end-trophy img{width:90px; height:90px; object-fit:contain;} @keyframes trophyIn{0%{transform:scale(0) rotate(-25deg); opacity:0;} 100%{transform:scale(1) rotate(0); opacity:1;}} .end-kicker{font-size:12px; font-weight:900; letter-spacing:3px; color:var(--gold); background:rgba(255,196,72,.12); border:1px solid rgba(255,196,72,.4); border-radius:999px; padding:4px 14px;} .end-title{margin:2px 0 0; font-size:34px; font-weight:900; letter-spacing:1px; background:linear-gradient(180deg,#fff3c4,#ffc23c); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 2px 20px rgba(255,180,40,.4);} .end-sub{margin:0; font-size:13px; color:var(--txt); line-height:1.5; text-shadow:0 1px 4px rgba(255,255,255,.9), 0 0 12px rgba(255,255,255,.7);} /* 밝은 엔딩 배경(군중컷 opacity .5) 위 가독성 */ .end-board{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; width:100%; margin-top:6px;} .end-stat{background:rgba(255,253,248,.72); border:1px solid rgba(255,210,90,.35); border-radius:12px; padding:10px 6px; display:flex; flex-direction:column; gap:3px;} .end-stat small{font-size:10px; color:var(--muted);} .end-stat b{font-size:15px; font-weight:900; color:var(--gold); font-variant-numeric:tabular-nums;} .end-quote{display:flex; align-items:center; gap:10px; width:100%; margin-top:4px; background:rgba(255,253,248,.72); border:1px solid var(--line); border-radius:14px; padding:11px 13px; text-align:left;} .end-quote img{width:46px; height:46px; object-fit:contain; flex:0 0 auto;} .end-quote p{margin:0; font-size:13.5px; font-weight:600; line-height:1.45; color:var(--txt);} .ending-page .btn.big{width:100%; padding:14px; font-size:16px; margin-top:auto;} .ending-page .btn.ghost{width:100%; margin-top:2px;} /* 색종이 */ .ending-confetti{position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden;} .confetti-bit{position:absolute; top:-12px; width:9px; height:14px; opacity:.9; border-radius:2px; animation:confFall linear forwards;} @keyframes confFall{0%{transform:translateY(-20px) rotate(0); opacity:1;} 100%{transform:translateY(110vh) rotate(720deg); opacity:.85;}} .rs-next{display:flex; flex-direction:column; align-items:center; gap:2px; line-height:1.1;} .rs-next small{font-size:12.5px; font-weight:700; opacity:.85;} .settle-status{display:flex; flex-wrap:wrap; gap:6px;} .settle-status span{flex:1 1 40%; background:var(--panel2); border:1px solid var(--line); border-radius:9px; padding:7px 9px; font-size:12px; color:var(--txt); text-align:center; white-space:nowrap;} #settleCash{font-size:12px; color:var(--gold); font-weight:700;} .boss-line{display:flex; align-items:center; gap:10px; margin:2px 0 4px; padding:8px 10px; background:var(--panel2); border-radius:12px;} .boss-line img{width:52px; height:52px; object-fit:contain; flex:0 0 auto;} .boss-line .boss-body{flex:1; min-width:0;} .boss-line p{margin:0; font-size:13px; font-weight:600; line-height:1.4;} .boss-line .boss-review{margin-top:5px; padding-top:5px; border-top:1px dashed var(--line); font-size:11.5px; font-weight:500; font-style:italic; color:var(--muted);} .up-list{display:flex; flex-direction:column; gap:7px; margin:10px 0;} .up{display:flex; align-items:center; justify-content:space-between; gap:8px; background:var(--panel2); border:1px solid var(--line); border-radius:11px; padding:9px 11px;} .up .info{font-size:13px;} .up .info small{display:block; color:var(--muted); font-size:11px; margin-top:2px;} .up .buy{background:var(--good); color:#06200f; border:none; border-radius:8px; padding:7px 12px; font-weight:800; font-size:12px; cursor:pointer; white-space:nowrap;} .up .buy:disabled{background:var(--line); color:var(--muted); cursor:default;} .up.maxed .buy{background:transparent; color:var(--neon); border:1px solid var(--neon);} /* Tuning panel */ #tuneToggle{position:absolute; top:8px; right:8px; z-index:15; font-size:11px; padding:5px 8px;} #tune{position:absolute; top:0; right:0; bottom:0; width:260px; background:var(--panel); border-left:1px solid var(--line); transform:translateX(100%); transition:.2s; z-index:25; padding:12px; overflow:auto;} #tune.show{transform:translateX(0);} #tune h3{margin:2px 0 10px; font-size:14px;} .tg{margin-bottom:10px;} .tg label{display:flex; justify-content:space-between; font-size:11.5px; color:var(--muted); margin-bottom:2px;} .tg input[type=range]{width:100%;} .tg .val{color:var(--neon); font-weight:700;} .tip{font-size:11px; color:var(--muted); margin-top:8px; line-height:1.6;} /* ★ z=30: 모든 오버레이(20~27) 위. 잠긴 탭을 눌렀을 때 뜨는 안내가 페이지 뒤에 깔려 아무 반응이 없는 것처럼 = 버그처럼 보였다(2026-07-22 사장님: 성장 탭에서 개발 탭 눌렀을 때). */ .toast{position:absolute; left:50%; transform:translateX(-50%); top:64px; z-index:30; background:var(--panel); border:1px solid var(--line); padding:6px 12px; border-radius:20px; box-shadow:0 6px 16px rgba(0,0,0,.16); font-size:12px; opacity:0; transition:.3s; pointer-events:none;} .toast.show{opacity:1;} /* ═══ 배치 편집 모드 (카이로 P0) — 하단 시트, 방·그리드는 위에 보임 ═══ */ #editPanel{position:absolute; left:0; right:0; bottom:0; z-index:24; background:var(--panel); border-top:2px solid var(--neon); border-radius:16px 16px 0 0; padding:12px 14px max(16px, env(safe-area-inset-bottom)); transform:translateY(120%); transition:transform .2s ease-out; box-shadow:0 -8px 24px rgba(0,0,0,.14);} #editPanel.show{transform:translateY(0);} #editPanel h3{margin:2px 0 4px; font-size:15px;} .edit-hint{margin:0 0 10px; font-size:12px; color:var(--muted);} .edit-hint b{color:var(--gold);} #editItems{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; max-height:32vh; overflow:auto;} .edit-chip{font-size:12.5px; font-weight:700; padding:7px 11px; border-radius:10px; background:var(--panel2); border:1.5px solid var(--line); color:var(--txt); cursor:pointer; transition:.12s; touch-action:manipulation;} .edit-chip.seat{color:var(--muted);} .edit-chip.sel{background:var(--neon); border-color:var(--neon); color:#fff; box-shadow:0 3px 10px rgba(31,191,224,.35);} .edit-actions{display:flex; gap:8px;} .edit-actions .btn{flex:1;} .edit-actions .btn.primary{flex:1.4;} /* 인접 콤보 라이브 표시(카이로 P1) */ #editCombos{display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px; min-height:18px;} .combo-tag{display:inline-flex; align-items:center; gap:3px; font-size:11px; padding:4px 8px; border-radius:8px; background:rgba(49,189,108,.14); border:1px solid var(--good);} .combo-tag-ico{width:18px; height:18px; object-fit:contain; flex-shrink:0;} .combo-tag b{color:var(--good); font-weight:800;} .combo-tag i{color:var(--muted); font-style:normal; margin-left:2px;} .combo-none{font-size:11px; color:var(--muted);} /* 조합 도감 (카이로 P1) */ #dexOverlay{background:var(--bg); backdrop-filter:none;} /* 불투명 페이지 — 타이틀 비침 방지 */ #dexOverlay.show{z-index:26;} /* 타이틀(z24) 위로 */ #dexOverlay .dex-page{width:100%; max-width:520px; margin:0 auto; padding:16px 16px max(24px,env(safe-area-inset-bottom)); display:flex; flex-direction:column; height:100%; box-sizing:border-box;} .dex-head{display:flex; align-items:center; gap:10px; margin-bottom:2px;} .dex-head h2{margin:0; font-size:19px; flex:1;} .dex-count{font-size:12px; color:var(--muted);} .dex-count b{color:var(--good);} .dex-sub{margin:2px 0 14px; font-size:12.5px; color:var(--muted); line-height:1.6;} .dex-sub b{color:var(--txt);} #dexList{display:flex; flex-direction:column; gap:9px; overflow:auto; flex:1;} .dex-card{display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:14px; border:1.5px solid var(--line); background:var(--panel2);} .dex-card.got{background:var(--panel); border-color:var(--good);} .dex-card.locked{opacity:.7;} .dex-emoji{width:46px; height:46px; flex-shrink:0; display:flex; align-items:center; justify-content:center;} .dex-emoji img{width:100%; height:100%; object-fit:contain; image-rendering:auto;} .dex-card.locked .dex-emoji img{opacity:.85;} .dex-body{flex:1; min-width:0;} .dex-name{font-size:15px; font-weight:800; color:var(--txt);} .dex-card.locked .dex-name{color:var(--muted);} .dex-reward{font-size:12.5px; font-weight:700; color:var(--good); margin:1px 0;} .dex-card.locked .dex-reward{color:var(--muted);} .dex-desc{font-size:11.5px; color:var(--muted); line-height:1.5;} /* 연구소 (카이로 P3) — 노하우 트리 */ #researchOverlay{background:var(--bg); backdrop-filter:none;} #researchOverlay.show{z-index:26;} #researchOverlay .dex-page{width:100%; max-width:560px; margin:0 auto; padding:16px 16px max(24px,env(safe-area-inset-bottom)); display:flex; flex-direction:column; height:100%; box-sizing:border-box;} .res-tree{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; overflow:auto; flex:1; align-content:start;} .res-col{display:flex; flex-direction:column; gap:8px;} .res-col-name{font-size:12px; font-weight:800; color:var(--muted); text-align:center; padding:2px 0;} .res-node{position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:9px 7px; border-radius:13px; border:1.5px solid var(--line); background:var(--panel2); text-align:center;} .res-node:not(:last-child)::after{content:''; position:absolute; left:50%; bottom:-9px; width:2px; height:9px; background:var(--line); transform:translateX(-50%);} .res-node.owned{background:var(--panel); border-color:var(--good);} .res-node.available{border-color:var(--gold); cursor:pointer; box-shadow:0 2px 0 rgba(224,160,18,.35);} .res-node.locked-req{opacity:.5;} .res-ico{width:52px; height:52px; display:flex; align-items:center; justify-content:center;} .res-ico img{width:100%; height:100%; object-fit:contain;} .res-node.locked-req .res-ico img{filter:grayscale(1) brightness(.85);} .res-name{font-size:12.5px; font-weight:800; color:var(--txt);} .res-desc{font-size:10.5px; color:var(--muted); line-height:1.45;} .res-owned{font-size:11px; font-weight:800; color:var(--good);} .res-cost{display:inline-flex; align-items:center; gap:3px; font-size:11.5px; font-weight:800; color:var(--gold);} .res-node.locked-afford .res-cost{color:var(--bad);} .rp-ico{width:15px; height:15px; object-fit:contain; vertical-align:-2px;} .settle-research{display:flex; align-items:center; justify-content:center; gap:5px; margin:6px 0; font-size:13px; font-weight:800; color:var(--gold);} .settle-research .rp-ico{width:18px; height:18px;} /* 전국 랭킹 (카이로 P4) */ #rankOverlay{background:var(--bg); backdrop-filter:none;} #rankOverlay.show{z-index:26;} #rankOverlay .dex-page{width:100%; max-width:520px; margin:0 auto; padding:16px 16px max(24px,env(safe-area-inset-bottom)); display:flex; flex-direction:column; height:100%; box-sizing:border-box;} .rank-list{display:flex; flex-direction:column; gap:5px; overflow:auto; flex:1;} .rank-row{display:flex; align-items:center; gap:10px; padding:8px 11px; border-radius:11px; border:1.5px solid var(--line); background:var(--panel2);} .rank-row.me{background:var(--panel); border-color:var(--gold); box-shadow:0 2px 0 rgba(224,160,18,.3);} .rank-pos{width:30px; text-align:center; font-weight:800; color:var(--muted); flex-shrink:0;} .rank-pos img{width:26px; height:26px; object-fit:contain; vertical-align:middle;} .rank-name{flex:1; font-size:13.5px; font-weight:700; color:var(--txt);} .rank-row.me .rank-name{color:var(--gold);} .rank-sc{font-size:12px; font-weight:800; color:var(--muted);} .rank-records-wrap{margin-top:10px;} .rank-rec-title{font-size:12px; font-weight:800; color:var(--muted); margin-bottom:5px;} .rank-records{display:grid; grid-template-columns:1fr 1fr; gap:7px;} .rec-item{background:var(--panel2); border:1.5px solid var(--line); border-radius:10px; padding:7px 10px; display:flex; flex-direction:column;} .rec-item small{font-size:10.5px; color:var(--muted);} .rec-item b{font-size:14px; color:var(--txt);} .settle-rank{display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:800; color:var(--gold);} /* 메뉴 (카이로 정합성) — 타이틀 버튼 통합 */ #menuOverlay{background:var(--bg); backdrop-filter:none;} #menuOverlay.show{z-index:25;} #menuOverlay .dex-page{width:100%; max-width:440px; margin:0 auto; padding:16px 16px max(24px,env(safe-area-inset-bottom)); display:flex; flex-direction:column; height:100%; box-sizing:border-box;} .menu-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; align-content:start; margin-top:6px;} .menu-grid .btn{width:100%; padding:15px 10px; font-size:14px;} /* 재창업(프레스티지) (카이로 P5) */ #prestigeOverlay{background:var(--bg); backdrop-filter:none;} #prestigeOverlay.show{z-index:26;} #prestigeOverlay .dex-page{width:100%; max-width:520px; margin:0 auto; padding:16px 16px max(24px,env(safe-area-inset-bottom)); display:flex; flex-direction:column; height:100%; box-sizing:border-box;} .perk-list{display:flex; flex-direction:column; gap:9px; overflow:auto; flex:1;} .perk-card{display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:14px; border:1.5px solid var(--line); background:var(--panel2);} .perk-card.can{border-color:var(--gold); cursor:pointer; box-shadow:0 2px 0 rgba(224,160,18,.3);} .perk-card.maxed{opacity:.7; background:var(--panel); border-color:var(--good);} .perk-ico{width:44px; height:44px; flex-shrink:0;} .perk-ico img{width:100%; height:100%; object-fit:contain;} .perk-name{font-size:14px; font-weight:800; color:var(--txt);} .perk-lv{font-size:11px; color:var(--muted); font-weight:700;} .perk-desc{font-size:11.5px; color:var(--muted); margin:1px 0;} .perk-cost{font-size:12.5px; font-weight:800; color:var(--gold); display:inline-flex; align-items:center; gap:3px;} .perk-max{color:var(--good);} .honor-ico{width:15px; height:15px; object-fit:contain; vertical-align:-2px;} .season-chip,.hud-season{display:inline-flex; align-items:center; gap:4px; font-weight:800; color:var(--gold);} .season-chip img,.hud-season img{width:16px; height:16px; object-fit:contain;} .hud-season{font-size:11px;} /* 직원 관리 (카이로 P2) — 도감 페이지 톤 재사용 */ #staffOverlay{background:var(--bg); backdrop-filter:none;} #staffOverlay.show{z-index:26;} #staffOverlay .dex-page{width:100%; max-width:520px; margin:0 auto; padding:16px 16px max(24px,env(safe-area-inset-bottom)); display:flex; flex-direction:column; height:100%; box-sizing:border-box;} #staffList{display:flex; flex-direction:column; gap:9px; overflow:auto; flex:1;} .stf-card{display:flex; align-items:center; gap:12px; padding:10px 13px; border-radius:14px; border:1.5px solid var(--line); background:var(--panel);} .stf-ava{width:54px; height:54px; flex-shrink:0; border-radius:13px; overflow:hidden; background:var(--panel2); border:1.5px solid var(--line);} .stf-ava img{width:100%; height:100%; object-fit:cover; object-position:top center; display:block;} .stf-persona{font-size:11px; color:var(--muted); margin:1px 0 3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .stf-body{flex:1; min-width:0;} .stf-top{display:flex; align-items:baseline; gap:8px;} .stf-name{font-size:15px; font-weight:800; color:var(--txt);} .stf-spec{font-size:11.5px; color:var(--neon); font-weight:700;} .stf-xp{height:6px; border-radius:4px; background:var(--panel2); overflow:hidden; margin:5px 0;} .stf-xp > i{display:block; height:100%; background:linear-gradient(90deg,var(--neon),var(--neon2)); transition:width .3s;} .stf-sub{font-size:11.5px; color:var(--muted);} .stf-lv{font-size:14px; font-weight:900; color:var(--gold); flex-shrink:0;} .stf-empty{font-size:12.5px; color:var(--muted); text-align:center; padding:22px 0;} #staffHireBtn:disabled{opacity:.5; filter:grayscale(.35); cursor:default;} /* Mini-game bottom sheet */ #mg{position:absolute; left:0; right:0; bottom:0; z-index:22; background:var(--panel); border-top:2px solid var(--neon); border-radius:16px 16px 0 0; padding:12px 14px max(22px, env(safe-area-inset-bottom)); transform:translateY(110%); transition:transform .18s ease-out; touch-action:none;} #mg.show{transform:translateY(0);} #mgTitle{font-size:14px; font-weight:800; margin-bottom:8px; display:flex; align-items:center; gap:6px;} #mgTitle .tag{font-size:10px; background:var(--panel2); border:1px solid var(--line); border-radius:6px; padding:2px 6px; color:var(--muted); margin-left:auto;} .mg-timer{height:6px; border-radius:4px; background:var(--panel2); overflow:hidden; margin:0 0 8px;} .mg-timer > i{display:block; height:100%; width:100%; background:linear-gradient(90deg,var(--neon),var(--neon2));} #mgArea{position:relative; min-height:300px; display:flex; align-items:center; justify-content:center; user-select:none; overflow:hidden;} #mgHint{font-size:11.5px; color:var(--muted); text-align:center; margin-top:8px; min-height:14px;} /* 미니게임 첫 등장 안내 카드 (친절 설명 + 시작 버튼) */ .mg-guide{display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:6px 4px 2px;} .mg-guide-icon{font-size:46px; line-height:1; animation:hudpop .4s ease-out;} .mg-guide-title{font-size:17px; font-weight:800; color:var(--neon);} .mg-guide-desc{margin:0; font-size:13.5px; font-weight:600; color:var(--txt); line-height:1.65;} .mg-guide-desc b{color:var(--gold);} .mg-guide .mgtap{margin-top:8px;} /* 🍜 라면: 냄비(배경 프레임) "앞"에 물·면이 차오름 — 불투명 냄비에 가리지 않게 앞 레이어 */ .ramenmg{display:flex; flex-direction:column; align-items:center; gap:14px; width:100%;} .ramen-pot-wrap{position:relative; width:320px; height:276px;} .ramen-pot-img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:1; pointer-events:none; filter:drop-shadow(0 5px 7px rgba(0,0,0,.45));} /* 냄비 안쪽(물·면이 차는 영역) — 냄비 몸통 내부에 맞춰 inset, 냄비 "앞"(z2)에 올림 */ .ramen-inner{position:absolute; left:18%; right:18%; top:33%; bottom:13%; overflow:hidden; border-radius:4px 4px 14px 14px; z-index:2; pointer-events:none;} .ramen-noodles-img{position:absolute; left:50%; bottom:-6%; width:96%; transform:translateX(-50%); z-index:1; opacity:.95; filter:saturate(.8) brightness(.82);} .ramen-noodles-img.cooked{opacity:1; filter:saturate(1.2) brightness(1.08); transition:filter .5s ease, opacity .5s ease;} .ramen-liquid{position:absolute; left:0; right:0; bottom:0; height:0%; z-index:2; background:linear-gradient(180deg, rgba(110,195,255,.72), rgba(45,130,215,.9)); border-top:3px solid rgba(215,242,255,.95); transition:background .5s ease, border-color .5s ease;} .ramen-liquid.boil{background:linear-gradient(180deg, rgba(255,165,65,.82), rgba(205,100,30,.93)); border-top-color:rgba(255,225,165,.97);} /* 끓으면 라면 국물색으로 */ .ramen-band{position:absolute; left:0; right:0; z-index:3; pointer-events:none; border-top:2px dashed var(--good); border-bottom:2px dashed var(--good); background:rgba(95,224,138,.16); display:flex; align-items:center; justify-content:center; font-size:8.5px; font-weight:800; color:#dffaea; text-shadow:0 1px 2px #000; letter-spacing:.3px;} .ramen-steam{position:absolute; left:6%; right:6%; top:-18%; height:46%; z-index:4; pointer-events:none; background:url('../assets/fx-steam.webp') center/contain no-repeat; opacity:0;} .ramen-steam.on{animation:ramenSteam 1.3s ease-out infinite;} @keyframes ramenSteam{0%{transform:translateY(8px) scale(.9); opacity:0;} 35%{opacity:.85;} 100%{transform:translateY(-14px) scale(1.1); opacity:0;}} .bubble{position:absolute; width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.6); z-index:3;} /* 🥤 음료: 좌우 마커 타이밍 맞추기 (컵 아이콘 + 트랙) */ .drinkmg{display:flex; flex-direction:column; align-items:center; gap:14px; width:100%;} .drink-cup-icon{width:54px; height:auto; filter:drop-shadow(0 3px 5px rgba(0,0,0,.4)); pointer-events:none;} .track{position:relative; width:94%; height:72px; background:var(--panel2); border:1px solid var(--line); border-radius:10px; overflow:hidden; cursor:pointer;} .track .zone{position:absolute; top:0; bottom:0; background:rgba(95,224,138,.38); border-left:3px solid var(--good); border-right:3px solid var(--good); box-shadow:0 0 12px rgba(95,224,138,.5) inset;} .track .marker{position:absolute; top:0; bottom:0; width:9px; background:var(--neon2); box-shadow:0 0 10px var(--neon2);} .mgtap{width:82%; padding:20px; border:none; border-radius:14px; font-size:18px; font-weight:800; color:#04121a; background:linear-gradient(90deg,var(--neon),#2aa9ff); cursor:pointer; touch-action:manipulation;} .mgtap:active{transform:scale(.97);} /* clean */ .dirt{position:relative; width:78%; height:120px; background:#c6c0b2; border:1px solid #aca490; border-radius:10px; overflow:hidden; cursor:grab; touch-action:none;} .dirt .stain{position:absolute; border-radius:50%; background:#6b5320;} .dirt .pbar{position:absolute; left:0; bottom:0; height:5px; background:var(--good); width:0%;} /* §7 배경 적용 */ #settleOverlay{ background:linear-gradient(rgba(246,242,233,.80),rgba(238,232,221,.90)), url('../assets/bg-settlement.webp') center/cover no-repeat; } #overOverlay{ background:linear-gradient(rgba(246,242,233,.80),rgba(238,232,221,.90)), url('../assets/bg-gameover.webp') center/cover no-repeat; } /* §7-title — 풀블리드 게임 표지. bg-title.webp에 로고·타이틀이 베이크돼 있어 패널·로고 없이 아트가 주인공. 타이틀 동안 HUD 숨김(상단 게임스탯 노출 방지) → 진짜 타이틀 화면처럼 보이게. */ #app:has(#titleOverlay.show) #hud{ display:none; } /* 로비 버튼 = 게임 폰트(시스템 고딕 '앱' 느낌 제거, T10 §3 — 버튼은 코드텍스트+번들폰트) */ #titleOverlay .btn{ font-family:var(--font-game); } #titleOverlay{ background:url('../assets/bg-title.webp') center/cover no-repeat; background-color:#efe9dd; flex-direction:column; align-items:stretch; justify-content:space-between; padding:0; } /* 게임 로고 — 전용 그래픽(make-logo 조판·굽기, 루브릭 T10). h1 안 라 SEO·접근성 유지. 플레인 HTML 텍스트 → 구운 로고 PNG로 교체(실기기 폰트 폴백·크롭 무관하게 항상 동일). */ .title-logo-wrap{ text-align:center; padding:calc(30px + env(safe-area-inset-top)) 16px 0; } .title-logo{ display:inline-block; margin:0; line-height:0; animation:logoBob 3.6s ease-in-out infinite; } /* 아기자기 아이들 바운스(선형 금지) */ .title-logo img{ width:min(84%,400px); height:auto; display:block; margin:0 auto; filter:drop-shadow(0 7px 16px rgba(0,0,0,.55)); animation:logoDrop .6s cubic-bezier(.2,.9,.3,1.3) both; } /* 등장 = 위에서 바운스 낙하 */ @keyframes logoDrop{ 0%{ opacity:0; transform:translateY(-16px) scale(.9); } 100%{ opacity:1; transform:translateY(0) scale(1); } } @keyframes logoBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } } .title-dock{ width:100%; display:flex; flex-direction:column; align-items:center; gap:10px; padding:30px 22px calc(22px + env(safe-area-inset-bottom)); background:linear-gradient(to top, rgba(246,242,233,.94) 18%, rgba(246,242,233,.6) 55%, rgba(246,242,233,0)); } .title-stats{ font-size:12px; font-weight:700; color:var(--gold); letter-spacing:.2px; background:rgba(255,253,248,.75); border:1px solid rgba(224,160,18,.35); border-radius:999px; padding:5px 14px; backdrop-filter:blur(2px); } /* CTA 히어로 '영업 시작' — 3D 엔진 구조 + 골드 스킨(더 크게·주목 글로우). */ .btn.primary.title-start{ width:100%; max-width:360px; padding:15px; font-size:23px; letter-spacing:.3px; border-radius:16px; --b-face1:#ffe291; --b-face2:#ffc340; --b-face3:#f59b28; --b-border:#a4651a; --b-edge:#b06f17; --b-edge2:#85500f; --b-ink:#fff6e0; --b-stroke:#8a4f12; --b-shade:rgba(140,80,15,.22); } /* 주목 글로우 — transform·3D 밑면 안 건드리게 ::after opacity만 펄스 */ .btn.primary.title-start::after{ content:""; position:absolute; inset:-3px; border-radius:19px; pointer-events:none; z-index:-1; box-shadow:0 0 22px 4px rgba(255,193,64,.65); animation:ctaGlow 1.8s ease-in-out infinite; } @keyframes ctaGlow{ 0%,100%{ opacity:.25; } 50%{ opacity:.8; } } .title-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; width:100%; max-width:360px; } /* 보조 버튼 — 다크 장난감 3D(단단한 밑면·꾹 눌림). CTA와 결 맞추되 무게는 낮게. */ .title-actions .btn{ flex:1 1 calc(50% - 4px); min-height:46px; font-size:12.5px; font-weight:800; color:var(--txt); border:2px solid #d9cfb8; border-radius:12px; background:linear-gradient(180deg,#fffef9 0%,#f4efe2 50%,#ebe4d3 100%); text-shadow:0 1px 0 rgba(255,255,255,.7); backdrop-filter:none; box-shadow:0 4px 0 #cdc3ad, 0 6px 9px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.8); transition:transform .06s, box-shadow .06s; } .title-actions .btn:active{ transform:translateY(4px); box-shadow:0 1px 0 #cdc3ad, 0 2px 5px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.6); } @media (max-height:620px){ .title-dock{ padding:20px 18px calc(14px + env(safe-area-inset-bottom)); gap:8px; } .btn.primary.title-start{ padding:13px; font-size:19px; } } .howto{ list-style:none; padding:0; margin:6px 0 14px; display:flex; flex-direction:column; gap:9px; } .howto li{ font-size:12.5px; line-height:1.5; color:var(--txt); background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:8px 10px; } .howto b{ color:var(--neon); } /* 청소 미니게임: 깨끗 바닥 위 더러움 캔버스(문지른 곳만 지워져 바닥이 드러남 — destination-out 마스크) */ .dirt .dirtclean{position:absolute; inset:0; background:url('../assets/tile-floor.webp') center/cover;} .dirt .dirtcanvas{position:absolute; inset:0; width:100%; height:100%; touch-action:none;} .dirt .dirtgrime{position:absolute; inset:0; background:url('../assets/mg-clean-dirt.webp') center/cover; opacity:1;} .dirt .clean-sparkle{position:absolute; left:50%; top:50%; width:84px; height:84px; transform:translate(-50%,-50%); pointer-events:none; z-index:6;} /* 손가락 따라다니는 청소 솔 + 완료 반짝 */ .dirt .scrubber{position:absolute; width:52px; height:52px; margin:-26px 0 0 -26px; z-index:4; pointer-events:none; opacity:0; transition:opacity .12s; background:url('../assets/mg-clean-brush.webp') center/contain no-repeat; filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));} .dirt .scrubber.on{opacity:1;} /* 수리 미니게임: 보드 배경 */ .fixboard{position:relative; padding:16px 10px; border-radius:12px; background:url('../assets/mg-fix-board.webp') center/cover; box-shadow:inset 0 0 0 2px var(--line);} /* fix */ .wires{display:flex; gap:80px; align-items:center; position:relative; z-index:2;} .wcol{display:flex; flex-direction:column; gap:22px;} .wirelines{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; overflow:visible;} .wireline{filter:drop-shadow(0 0 5px currentColor);} .dot{width:54px; height:54px; border-radius:50%; border:4px solid #e7e1d2; cursor:pointer; box-shadow:0 0 0 2px rgba(255,255,255,.18); touch-action:manipulation;} .dot.sel{transform:scale(1.15); box-shadow:0 0 0 4px #fff;} .dot.done{opacity:.55;} /* 미니게임 perfect zone — 성공칸 안 좁은 금색 구간 (정확히 맞추면 매출 1.5배) */ .ramen-perfect{position:absolute; left:0; right:0; pointer-events:none; background:linear-gradient(90deg,transparent,rgba(255,210,74,.6),transparent); border-top:1.5px solid #ffd24a; border-bottom:1.5px solid #ffd24a; box-shadow:0 0 8px rgba(255,210,74,.6); z-index:3;} .zone-perfect{position:absolute; top:0; bottom:0; pointer-events:none; background:rgba(255,210,74,.5); border-left:2px solid #ffd24a; border-right:2px solid #ffd24a; box-shadow:0 0 8px rgba(255,210,74,.6); z-index:3;} /* ===== 성장 로드맵 (Goal Map) ===== */ .gm-open-btn{width:100%; margin-top:9px; padding:11px 10px; cursor:pointer; font-size:16.5px;} /* 색·입체는 3D 엔진(골드 스킨) */ .gm-page{width:100%; max-width:480px; margin:0 auto; height:100%; display:flex; flex-direction:column; gap:10px; padding:calc(12px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom)); overflow:auto; background:linear-gradient(180deg,#f4efe3,#ece7db);} .gm-head{display:flex; align-items:center; gap:10px;} /* 뒤로 버튼 — HUD 앰버 플라스틱 토이 버튼(#156 .hud-map 결) + 크리스프 셰브론 (글리프 대충 금지) */ .gm-back{position:relative; width:42px; height:42px; padding:0; font-size:0; cursor:pointer; flex:0 0 auto; display:grid; place-items:center; border-radius:12px; border:2px solid #d59b3a; background:linear-gradient(180deg,#fff5df,#ffe6ad); box-shadow:inset 0 1.5px 0 rgba(255,255,255,.85), 0 3px 0 #c98f2c, 0 4px 6px -1px rgba(120,80,15,.3); transition:transform .05s ease, box-shadow .05s ease;} .gm-back::before{content:''; position:absolute; top:50%; left:50%; width:20px; height:20px; transform:translate(-50%,-50%); /* 버튼 안 ◀ 폴백 텍스트가 grid 2번째 행을 만들어 셰브론을 위로 밀던 문제 → absolute로 가로·세로 정중앙 고정(텍스트 무관). 셰브론은 viewBox 중심(12) 대칭 polyline */ background:center/17px 17px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a5518' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15.5 5 8.5 12 15.5 19'/%3E%3C/svg%3E");} .gm-back:active{transform:translateY(3px); box-shadow:inset 0 1.5px 0 rgba(255,255,255,.85), 0 0 0 #c98f2c, 0 1px 2px rgba(120,80,15,.3);} .gm-htitle-wrap{flex:1; min-width:0;} .gm-htitle{font-size:18px; font-weight:800; line-height:1.1;} .gm-sub{font-size:11px; color:var(--muted); margin-top:2px;} .gm-head-right{flex:0 0 auto; text-align:right;} .gm-cash{font-size:15px; font-weight:800; color:var(--gold); font-variant-numeric:tabular-nums;} .gm-chip{display:inline-flex; align-items:center; gap:4px; margin-top:3px; font-size:10.5px; font-weight:700; color:var(--txt); background:var(--panel2); border:1px solid var(--line); border-radius:999px; padding:2px 8px 2px 4px;} .gm-chip img{width:18px; height:18px; object-fit:contain;} /* 히어로: 현재→다음 게이지 */ .gm-hero{background:linear-gradient(135deg,#fff3d6,#f4ecdb); border:1px solid var(--line); border-radius:16px; padding:13px 14px; box-shadow:0 0 22px rgba(255,200,80,.22);} .gm-hero-row{display:flex; align-items:center; gap:8px;} .gm-hero-end{flex:0 0 auto; width:62px; text-align:center;} .gm-hero-end img{width:54px; height:54px; object-fit:contain; filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));} .gm-hero-end .lbl{font-size:9.5px; color:var(--muted); margin-top:1px;} .gm-hero-end .nm{font-size:11.5px; font-weight:800; line-height:1.05;} .gm-hero-end.next .nm{color:var(--gold);} .gm-hero-mid{flex:1; min-width:0;} .gm-hero-bar{height:12px; border-radius:7px; background:#e7e1d2; border:1px solid #d7d0bf; position:relative; overflow:visible;} .gm-hero-bar>i{display:block; height:100%; border-radius:7px; background:linear-gradient(90deg,var(--gold),#ffb133); box-shadow:0 0 10px rgba(255,210,74,.6);} .gm-hero-bar>.knob{position:absolute; top:50%; width:16px; height:16px; border-radius:50%; transform:translate(-50%,-50%); background:#fff; box-shadow:0 0 10px rgba(255,210,74,.9), 0 0 0 3px rgba(255,210,74,.4);} .gm-hero-stats{display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:8px; font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums;} .gm-hero-stats b{color:var(--txt);} .gm-hero-stats .pos{color:var(--good);} .gm-hero-tease{text-align:center; font-size:12px; font-weight:800; color:var(--gold); margin-top:7px;} .gm-hero-unlocks{display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:10px; padding-top:10px; border-top:1px dashed var(--line);} .gm-hero-unlocks .ulbl{font-size:10px; color:var(--muted); font-weight:700; flex:0 0 auto;} .gm-hero-unlocks .uic{width:30px; height:30px; object-fit:contain;} /* 노드맵: 위(정상)→아래(시작), 네온 길 */ .gm-map{display:flex; flex-direction:column; position:relative;} .gm-mnode{display:flex; gap:11px; align-items:center; position:relative; padding:6px 4px;} .gm-mnode::before{content:''; position:absolute; left:24px; top:0; bottom:0; width:3px; background:#d9d1bf; z-index:0;} .gm-mnode:first-child::before{top:50%;} .gm-mnode:last-child::before{bottom:50%;} .gm-hex{position:relative; z-index:1; flex:0 0 auto; width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; background:var(--panel2); color:var(--muted); border:1px solid var(--line);} .gm-bld{position:relative; flex:0 0 auto; width:64px; height:64px;} .gm-bld img{width:100%; height:100%; object-fit:contain;} .gm-bld .lk{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:20px;} .gm-minfo{flex:1; min-width:0;} .gm-minfo .nm{font-size:14px; font-weight:800;} .gm-minfo .tag{font-size:11px; color:var(--neon); margin-top:2px;} .gm-mbdg{flex:0 0 auto; font-size:10px; font-weight:800; padding:3px 7px; border-radius:8px; white-space:nowrap; background:var(--panel2); color:var(--muted); border:1px solid var(--line);} /* 상태별 */ .gm-mnode.done .gm-hex{background:rgba(95,224,138,.2); color:var(--good); border-color:rgba(95,224,138,.5);} .gm-mnode.done .gm-mbdg{background:rgba(95,224,138,.18); color:var(--good); border-color:transparent;} .gm-mnode.cur{background:linear-gradient(90deg,rgba(54,224,255,.14),transparent); border-radius:12px;} .gm-mnode.cur .gm-hex{background:var(--neon); color:#04121a; border-color:var(--neon); box-shadow:0 0 12px rgba(54,224,255,.6);} .gm-mnode.cur .gm-mbdg{background:var(--neon); color:#04121a; border-color:transparent;} .gm-mnode.next{background:linear-gradient(90deg,rgba(255,210,74,.16),transparent); border-radius:12px; border:1px solid rgba(255,210,74,.4); animation:gmPulse 1.5s ease-in-out infinite;} .gm-mnode.next .gm-hex{background:var(--gold); color:#1a1205; border-color:var(--gold);} .gm-mnode.next .gm-bld{width:72px; height:72px;} .gm-mnode.next .nm{color:var(--gold);} .gm-mnode.next .gm-mbdg{background:var(--gold); color:#1a1205; border-color:transparent;} .gm-mnode.lock{opacity:.92;} .gm-mnode.lock .gm-bld img{filter:brightness(.32) grayscale(.65) contrast(.9);} .gm-mnode.lock .nm{color:var(--muted);} .gm-mnode.summit .gm-hex{background:linear-gradient(135deg,var(--gold),#ffb133); color:#1a1205; border-color:var(--gold);} .gm-mnode.summit.lock .gm-bld img{filter:brightness(.4) grayscale(.4) sepia(.3);} .gm-mnode.summit .nm{color:var(--gold);} @keyframes gmPulse{0%,100%{box-shadow:0 0 0 rgba(255,210,74,0);}50%{box-shadow:0 0 16px rgba(255,210,74,.4);}} /* 다음 목표 상세 */ .gm-detail{background:linear-gradient(135deg,#fffdf8,#f2eee3); border:1px solid var(--line); border-radius:16px; padding:14px;} .gm-d-top{display:flex; gap:12px; align-items:center;} .gm-d-bld{flex:0 0 auto; width:92px; height:92px;} .gm-d-bld img{width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));} .gm-d-head{flex:1; min-width:0;} .gm-d-name{font-size:19px; font-weight:800; color:var(--gold);} .gm-d-desc{font-size:11.5px; color:var(--muted); margin-top:4px; line-height:1.4;} .gm-d-sec{margin-top:12px;} .gm-d-sectitle{font-size:12px; font-weight:800; margin-bottom:7px;} .gm-d-reward{display:flex; align-items:center; gap:9px; padding:6px 9px; background:rgba(255,210,74,.08); border:1px solid rgba(255,210,74,.18); border-radius:10px; margin-bottom:5px;} .gm-d-reward img{width:30px; height:30px; object-fit:contain; flex:0 0 auto;} .gm-d-reward span{font-size:12.5px; font-weight:700;} .gm-cond{margin-bottom:9px;} .gm-cond-row{display:flex; justify-content:space-between; font-size:11.5px; margin-bottom:4px;} .gm-cond-row .cn{color:var(--txt); font-weight:700;} .gm-cond-row .cv{color:var(--muted); font-variant-numeric:tabular-nums;} .gm-cond-row .cv.ok{color:var(--good);} .gm-cond-bar{height:8px; border-radius:5px; background:#e7e1d2; border:1px solid #d7d0bf; overflow:hidden;} .gm-cond-bar>i{display:block; height:100%; border-radius:5px; background:linear-gradient(90deg,var(--neon),#5fe0ff);} .gm-cond-bar>i.ok{background:linear-gradient(90deg,var(--good),#7fe6a0);} /* 추천 행동 3카드 */ .gm-actions{display:flex; gap:8px;} .gm-act{flex:1; min-width:0; background:var(--panel2); border:1px solid var(--line); border-radius:13px; padding:10px 8px; text-align:center; cursor:pointer; transition:transform .08s;} .gm-act:active{transform:scale(.96);} .gm-act img{width:34px; height:34px; object-fit:contain;} .gm-act .at{font-size:11.5px; font-weight:800; margin-top:5px; line-height:1.1;} .gm-act .as{font-size:9.5px; color:var(--muted); margin-top:3px; line-height:1.25;} .gm-foot{margin-top:2px;} /* 승급 축하 배너(로드맵 상단) + NEW 노드 플래시 */ .gm-cele{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:16px; background:linear-gradient(135deg,rgba(255,210,74,.22),rgba(255,140,60,.10)); border:1.5px solid var(--gold); box-shadow:0 0 24px rgba(255,200,80,.3); animation:stagePop .45s ease-out;} .gm-cele-bld{width:72px; height:72px; object-fit:contain; flex:0 0 auto; filter:drop-shadow(0 3px 7px rgba(0,0,0,.5)); animation:gmCeleBob 1.6s ease-in-out infinite;} @keyframes gmCeleBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}} .gm-cele-tx{flex:1; min-width:0;} .gm-cele-h{font-size:13px; font-weight:900; color:var(--gold);} .gm-cele-nm{font-size:20px; font-weight:900; color:var(--txt); line-height:1.1;} .gm-cele-ul{display:flex; gap:6px; flex-wrap:wrap; margin-top:6px;} .gm-cele-ul img{width:28px; height:28px; object-fit:contain;} .gm-mnode.newopen{background:linear-gradient(90deg,rgba(255,210,74,.28),transparent); border-radius:12px; border:1px solid var(--gold); animation:gmPulse 1s ease-in-out infinite;} .gm-mnode.newopen .gm-mbdg{background:var(--gold); color:#1a1205; border-color:transparent;} .gm-mnode.newopen .gm-bld{animation:gmCeleBob 1.2s ease-in-out infinite;} /* 정산 승급 배너 → 탭 가능한 새 지역 보기 CTA */ .stage-up.celebrate{cursor:pointer;} .stage-up .su-cta{margin-top:6px; font-size:12.5px; font-weight:900; background:rgba(0,0,0,.18); border-radius:9px; padding:5px; display:inline-block; padding-left:12px; padding-right:12px;} /* 가로모드 회전 안내 — 세로 전용 게임이라 폰 가로(낮은 높이)에선 디오라마가 짓눌리고 말풍선이 겹침. DOM 추가 없이 CSS만(::after)으로 풀스크린 안내. 태블릿 가로(height>540)는 충분히 커서 제외. */ @media (orientation:landscape) and (max-height:540px){ #app::after{ content:"📱 세로로 돌려주세요"; position:fixed; inset:0; z-index:200; background:linear-gradient(160deg,#fff3d6,#ece7db); color:var(--txt); display:flex; align-items:center; justify-content:center; font-size:19px; font-weight:900; letter-spacing:.5px; text-align:center; padding:20px; -webkit-user-select:none; user-select:none; } } /* ═══════════════════════════════════════════════════════════════════════════════════ 카이로 격차 리뉴얼 (2026-07-21) — 레시피 개발 · 단골 도감 · 인테리어 · 시상식 · 직원 육성 기존 패널 문법(.dex-page/.dex-head/.dex-card) 재사용 — 새 디자인 언어를 만들지 않는다. ═══════════════════════════════════════════════════════════════════════════════════ */ /* ── 레시피 개발(주방) ───────────────────────────────────────────────────────────── */ #recipeOverlay{background:var(--bg); backdrop-filter:none;} #recipeOverlay .dex-page{width:100%; max-width:560px; margin:0 auto; padding:16px 16px max(24px,env(safe-area-inset-bottom)); display:flex; flex-direction:column; height:100%; box-sizing:border-box;} #recipePage{overflow:auto; flex:1;} .rc-sec{font-size:12px; font-weight:800; color:var(--muted); margin:12px 0 7px;} .rc-sec small{font-weight:600; opacity:.8;} .rc-bases{display:grid; grid-template-columns:repeat(5,1fr); gap:6px;} .rc-base{display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 3px; border-radius:12px; border:1.5px solid var(--line); background:var(--panel2); cursor:pointer; transition:.12s;} .rc-base img{width:40px; height:40px; object-fit:contain;} .rc-base span{font-size:10.5px; font-weight:800; color:var(--txt);} .rc-base.on{border-color:var(--gold); background:var(--panel); box-shadow:0 2px 0 rgba(224,160,18,.35);} .rc-base.locked{opacity:.45;} .rc-base.locked img{filter:grayscale(1);} .rc-ings{display:grid; grid-template-columns:repeat(4,1fr); gap:6px;} .rc-ing{position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 3px 6px; border-radius:12px; border:1.5px solid var(--line); background:var(--panel2); cursor:pointer; transition:.12s;} .rc-ing img{width:36px; height:36px; object-fit:contain;} .rc-ing span{font-size:10.5px; font-weight:800; color:var(--txt);} .rc-ing em{font-size:9.5px; font-style:normal; font-weight:800; color:var(--gold);} .rc-ing.on{border-color:var(--neon); background:var(--panel); box-shadow:0 2px 0 rgba(31,191,224,.35);} .rc-ing.buy{opacity:.72;} .rc-ing.buy img{filter:grayscale(.7);} .rc-dev{width:100%; padding:13px; margin:14px 0 4px;} .rc-dev:disabled{opacity:.5;} .rc-list{display:flex; flex-direction:column; gap:8px; margin-top:4px;} .rc-empty{font-size:12px; color:var(--muted); text-align:center; padding:18px 0;} .rc-card{display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:14px; border:1.5px solid var(--line); background:var(--panel2);} .rc-card.active{background:var(--panel); border-color:var(--gold); box-shadow:0 2px 0 rgba(224,160,18,.3);} .rc-thumb{position:relative; width:46px; height:46px; flex-shrink:0;} .rc-thumb img{width:100%; height:100%; object-fit:contain;} .rc-grade{position:absolute; right:-5px; bottom:-4px; width:24px !important; height:24px !important;} .rc-body{flex:1; min-width:0;} .rc-name{font-size:14px; font-weight:800; color:var(--txt);} .rc-tags{font-size:11px; color:var(--muted); margin:1px 0;} .rc-tags b{color:var(--neon2); font-weight:800;} .rc-num{font-size:11.5px; font-weight:800; color:var(--good);} .rc-act{flex-shrink:0;} .rc-on{font-size:11px; font-weight:800; color:var(--gold);} .rc-lock{font-size:10.5px; color:var(--muted);} .pbtn{border:1px solid var(--line); background:var(--panel); border-radius:9px; padding:7px 10px; min-height:36px; font-size:11.5px; font-weight:800; color:var(--txt); cursor:pointer; transition:transform .07s ease;} .pbtn:active{transform:scale(.93);} .pbtn:disabled{opacity:.45;} /* 개발 결과 컷인 — 등급이 클수록 화려하게(카이로의 "완성!" 순간) */ .rc-result{position:absolute; inset:0; display:none; align-items:center; justify-content:center; pointer-events:none; z-index:3;} .rc-result.show{display:flex;} .rc-res-card{background:var(--panel); border:3px solid var(--gold); border-radius:20px; padding:18px 24px; text-align:center; box-shadow:0 14px 40px rgba(0,0,0,.28); animation:rcPop .45s cubic-bezier(.2,1.6,.4,1) both;} .rc-res-card.g0{border-color:var(--line);} .rc-res-card.g1{border-color:#c98b4b;} .rc-res-card.g2{border-color:#8fa3b5;} @keyframes rcPop{ from{ transform:scale(.5) rotate(-6deg); opacity:0 } to{ transform:none; opacity:1 } } .rc-res-grade{width:74px; height:74px; object-fit:contain; margin-bottom:4px;} .rc-res-name{font-size:17px; font-weight:800; color:var(--txt);} .rc-res-grade-name{font-family:var(--font-game); font-size:26px; font-weight:800; color:var(--gold); margin:2px 0;} .rc-res-num{font-size:12.5px; font-weight:800; color:var(--good);} .rc-res-pair{font-size:12px; font-weight:800; color:var(--neon2); margin-top:4px;} /* ── 단골 도감 ──────────────────────────────────────────────────────────────────── */ #regularsOverlay{background:var(--bg); backdrop-filter:none;} #regularsOverlay .dex-page{width:100%; max-width:520px; margin:0 auto; padding:16px 16px max(24px,env(safe-area-inset-bottom)); display:flex; flex-direction:column; height:100%; box-sizing:border-box;} #regList{display:flex; flex-direction:column; gap:9px; overflow:auto; flex:1;} .reg-card{display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:14px; border:1.5px solid var(--line); background:var(--panel2);} .reg-card.got{background:var(--panel); border-color:var(--good);} .reg-ava{width:52px; height:52px; flex-shrink:0; border-radius:50%; overflow:hidden; background:var(--panel); border:1.5px solid var(--line);} .reg-ava img{width:100%; height:100%; object-fit:cover;} .reg-card:not(.got) .reg-ava img{filter:grayscale(1) brightness(.9); opacity:.6;} .reg-body{flex:1; min-width:0;} .reg-top{display:flex; align-items:baseline; gap:7px;} .reg-name{font-size:14.5px; font-weight:800; color:var(--txt);} .reg-title{font-size:11px; color:var(--muted);} .reg-desc{font-size:11.5px; color:var(--muted); line-height:1.5; margin:1px 0;} .reg-reward{font-size:12px; font-weight:800; color:var(--good);} .reg-bar{height:5px; border-radius:3px; background:var(--line); overflow:hidden; margin-top:5px;} .reg-bar i{display:block; height:100%; background:var(--neon); border-radius:3px;} .reg-prog{font-size:10.5px; color:var(--muted); margin-top:2px;} /* ── 인테리어 ───────────────────────────────────────────────────────────────────── */ #decorOverlay{background:var(--bg); backdrop-filter:none;} #decorOverlay .dex-page{width:100%; max-width:520px; margin:0 auto; padding:16px 16px max(24px,env(safe-area-inset-bottom)); display:flex; flex-direction:column; height:100%; box-sizing:border-box;} #decorList{display:flex; flex-direction:column; gap:9px; overflow:auto; flex:1;} .dc-card{display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:14px; border:1.5px solid var(--line); background:var(--panel2);} .dc-card.on{background:var(--panel); border-color:var(--gold); box-shadow:0 2px 0 rgba(224,160,18,.3);} .dc-thumb{width:56px; height:44px; flex-shrink:0; border-radius:9px; overflow:hidden; border:1.5px solid var(--line); background:var(--panel);} .dc-thumb img{width:100%; height:100%; object-fit:cover;} .dc-thumb.basic{background:linear-gradient(135deg,#d0c6ac 0%,#eae4d4 55%,#3fd3ff 100%);} .dc-body{flex:1; min-width:0;} .dc-name{font-size:14.5px; font-weight:800; color:var(--txt);} .dc-desc{font-size:11.5px; color:var(--muted); line-height:1.5;} .dc-reward{font-size:12px; font-weight:800; color:var(--good);} .dc-act{flex-shrink:0;} .dc-on{font-size:11px; font-weight:800; color:var(--gold);} /* ── 시상식 ─────────────────────────────────────────────────────────────────────── */ .award-card{max-width:360px; text-align:left;} .award-card h2{text-align:center;} .aw-row{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:11px; border:1.5px solid var(--line); background:var(--panel2); margin-bottom:6px;} .aw-row.win{border-color:var(--gold); background:var(--panel); box-shadow:0 2px 0 rgba(224,160,18,.3);} .aw-row.place{border-color:var(--line); background:var(--panel);} .aw-medal{width:34px; height:34px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:800; color:var(--muted);} .aw-medal img{width:100%; height:100%; object-fit:contain;} .aw-info{flex:1; min-width:0;} .aw-name{font-size:13.5px; font-weight:800; color:var(--txt);} .aw-desc{font-size:11px; color:var(--muted);} .aw-prize{font-size:13px; font-weight:800; color:var(--gold); flex-shrink:0;} .aw-sum{margin:10px 0 14px; text-align:center; font-size:12.5px; color:var(--muted);} .aw-sum b{color:var(--gold);} #awardCloseBtn{width:100%; padding:12px;} /* ── 직원 육성(컨디션·훈련·전직·스카우트) ───────────────────────────────────────── */ .stf-card.resting{opacity:.72; border-style:dashed;} .stf-stam{display:flex; align-items:center; gap:6px; margin:5px 0 3px; font-size:10.5px; color:var(--muted);} .stf-stam small{flex-shrink:0;} .stf-stam i{flex:1; height:5px; border-radius:3px; background:var(--good); min-width:2px;} .stf-stam.warn i{background:var(--warn);} .stf-stam.bad i{background:var(--bad);} .stf-stam b{flex-shrink:0; font-weight:800; color:var(--txt);} .stf-stam.warn b{color:var(--warn);} .stf-stam.bad b{color:var(--bad);} .stf-acts{display:flex; gap:5px; margin-top:6px; flex-wrap:wrap;} .stf-acts .pbtn{flex:1; min-width:84px; padding:6px 6px; min-height:34px; font-size:10.5px;} .stf-acts .pbtn.on{border-color:var(--neon); color:var(--neon);} .stf-sec{font-size:12px; font-weight:800; color:var(--muted); margin:16px 0 7px;} .stf-sec small{font-weight:600; opacity:.8;} .stf-scout{display:grid; grid-template-columns:repeat(4,1fr); gap:6px;} .stf-sc{display:flex; flex-direction:column; align-items:center; gap:1px; padding:8px 3px 6px; border-radius:12px; border:1.5px solid var(--line); background:var(--panel2); cursor:pointer;} .stf-sc img{width:40px; height:40px; object-fit:cover; border-radius:50%;} .stf-sc-name{font-size:11px; font-weight:800; color:var(--txt);} .stf-sc-spec{font-size:9.5px; color:var(--muted);} .stf-sc em{font-size:10px; font-style:normal; font-weight:800; color:var(--gold);} .stf-sc:disabled{opacity:.45;} /* 메뉴 잠금 버튼 — 회색 + 자물쇠 배지. 숨기지 않는 이유는 '앞으로 열릴 것'을 보여주려고(성장감). ★ 자물쇠는 이모지가 아니라 전용 아트(도감 미발견 아이콘 재활용) — 볼 표면 이모지 금지(루브릭 P9). */ .menu-grid .btn.locked{ opacity:.45; filter:grayscale(.7); position:relative; } .menu-grid .btn.locked::after{ content:''; position:absolute; top:4px; right:6px; width:13px; height:13px; background:url('../assets/combos/locked.png') center/contain no-repeat; opacity:.9; } /* 단골 합류 배너 (정산 화면 안) */ .reg-banner{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:0 0 8px; } .reg-join{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px 5px 5px; border-radius:20px; background:rgba(49,189,108,.14); border:1.5px solid var(--good); font-size:12px; font-weight:800; color:var(--txt); animation:idlePop .45s cubic-bezier(.2,1.5,.4,1) both; } .reg-join img{ width:26px; height:26px; border-radius:50%; object-fit:cover; background:var(--panel); } .reg-join i{ font-style:normal; font-weight:700; color:var(--good); } .reg-join.warn{ background:rgba(235,168,28,.15); border-color:var(--warn); } .reg-join.warn i{ color:var(--warn); } /* ===== 보조 폰트 배정 — 넥슨 Lv.1 고딕 (숫자·긴 안내문) 사장님 확정: "메인=ONE Mobile POP / 숫자와 긴 안내문 보조=넥슨 Lv.1 고딕". POP은 굵고 개성이 강해 긴 문장·조밀한 숫자표에서 읽기 피로 → 그런 자리만 넥슨으로 내린다. ★ 돈(₩) 표시는 여기서 제외한다 — 넥슨에 U+20A9 글리프가 없어 ₩만 POP으로 폴백돼 굵기가 튄다. */ .story-text, .coach-msg, .mg-guide-desc, .end-sub, .end-quote p, .boss-line p, .tip, .idle-rate, .dex-sub, .dex-desc, .res-desc, .aw-desc, .dc-desc, .perk-desc, .reg-desc, .stf-sub, .gm-d-desc, .gm-sub, .rs-subtitle, .rs-grow-sub, .edit-hint, .howto li, .next-stage, .ledger{ font-family:var(--font-body); } /* 숫자 readout(평판·타이머·카운트) — 조밀한 수치는 넥슨이 자릿수 구분이 낫다. ★ 돈(₩…)은 일부러 제외 — --font-game(POP) 유지. */ .rep-val, .clock, .stat b, .settle-day, .rc-ing em{ font-family:var(--font-body); font-variant-numeric:tabular-nums; } /* ===== 하루 결산 카드 (연속 플레이) — daycard.js ===================================== 옛 전면 정산 오버레이를 대체한다. ★ 화면을 막지 않는다 — 뒤에서 영업이 계속 돌아간다. 생김새는 앱 토스트가 아니라 **계기판 명판**(.gauge 와 같은 문법: 눌린 인셋 + 크림 베벨). */ .daycard{position:absolute; left:50%; bottom:14px; transform:translate(-50%,140%); z-index:19; /* 토스트(18) 위 · 오버레이(20+) 아래 — 상세를 열면 그 밑으로 깔린다 */ min-width:236px; max-width:min(88vw,340px); padding:9px 13px 8px; border-radius:14px; background:linear-gradient(180deg,#fff6e2,#f0e2c1); border:2px solid #cfa24e; box-shadow:inset 0 2px 0 rgba(255,255,255,.9), inset 0 -3px 5px rgba(190,150,80,.3), 0 3px 0 #c79a45, 0 6px 12px rgba(90,60,15,.32); font-family:var(--font-game); color:#5f4a22; cursor:pointer; transition:transform .34s cubic-bezier(.2,1.4,.5,1), opacity .24s ease-out; opacity:0; pointer-events:none;} .daycard.show{transform:translate(-50%,0); opacity:1; pointer-events:auto;} .dc-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px;} .dc-head b{font-size:13.5px; letter-spacing:-.2px; color:#7a5f2a;} .dc-net{font-size:23px; font-weight:900; color:#e08a17; letter-spacing:-.4px; text-shadow:1px 0 0 #7a4a12,-1px 0 0 #7a4a12,0 1px 0 #7a4a12,0 -1px 0 #7a4a12;} .dc-net.neg{color:#e05a4a;} .dc-rows{display:flex; gap:12px; justify-content:center; margin-top:5px;} .dc-rows span{display:flex; align-items:center; gap:4px; font-size:14px; font-weight:800;} .dc-rows b.neg{color:#d9584a;} .dc-ic{width:17px; height:17px; flex:0 0 auto; background-size:contain; background-repeat:no-repeat; background-position:center;} .dc-ic-guest{background-image:url('../assets/char-guest-normal.webp');} .dc-ic-rep{background-image:url('../assets/star-on.webp');} .dc-ic-rp{background-image:url('../assets/research/rp.png');} .dc-more{margin-top:4px; text-align:center; font-size:10.5px; opacity:.62; letter-spacing:-.2px;} /* ===== 하단 메뉴바 (연속 플레이 P1) ================================================== ★ 표준 앱 탭바(플랫 아이콘+라벨)로 만들면 U7 위반 — 지금까지 걷어낸 '앱 냄새'가 도로 돌아온다. 문법은 HUD 와 같은 **계기판**: 볼록 패널 + 눌린 슬롯 + 선택 시 램프 점등. 아이콘은 전용 아트(codex-image 생성 → icon_center.py 광학중심 정사각 베이크 → 128px webp). ★ 이모지·CSS 도형 금지(루브릭 P9) · object-fit 대신 background-size:contain 으로 비율 보존. */ .tabbar{flex:0 0 auto; display:flex; gap:5px; padding:7px 8px calc(7px + env(safe-area-inset-bottom)); background:linear-gradient(180deg,#e9dcc0,#dccaa4); border-top:2px solid #c2a86b; box-shadow:inset 0 2px 0 rgba(255,255,255,.75), 0 -3px 8px rgba(90,60,15,.16); z-index:15;} .tab{flex:1 1 0; min-width:0; min-height:52px; display:grid; place-items:center; gap:1px; padding:5px 2px 4px; border:2px solid #c9ab6d; border-radius:11px; cursor:pointer; position:relative; background:linear-gradient(180deg,#f6ecd6,#e6d5b0); box-shadow:inset 0 2px 0 rgba(255,255,255,.8), 0 2px 0 #bb9a5b; font-family:var(--font-game); font-size:11px; font-weight:800; color:#6f5729; letter-spacing:-.4px; transition:transform .09s ease-out, box-shadow .09s ease-out;} .tab:active{transform:translateY(2px); box-shadow:inset 0 2px 0 rgba(255,255,255,.8), 0 0 0 #bb9a5b;} /* 선택 = 램프 점등 (밝아지고 살짝 솟음) */ .tab.is-on{background:linear-gradient(180deg,#fff7e0,#ffe6ac); border-color:#d59b3a; color:#7a5410; box-shadow:inset 0 2px 0 rgba(255,255,255,.95), 0 2px 0 #c98f2c, 0 0 10px rgba(255,196,60,.55);} .tab-ic{width:26px; height:26px; display:block; background-size:contain; background-repeat:no-repeat; background-position:center; filter:drop-shadow(0 1px 1px rgba(0,0,0,.22));} .ti-home{background-image:url('../assets/tab-home.webp');} .ti-shop{background-image:url('../assets/tab-shop.webp');} .ti-grow{background-image:url('../assets/tab-grow.webp');} .ti-dev{background-image:url('../assets/tab-dev.webp');} .ti-more{background-image:url('../assets/tab-more.webp');} /* 비선택 탭은 살짝 가라앉혀 선택 탭이 '점등'으로 읽히게 */ .tab:not(.is-on) .tab-ic{filter:drop-shadow(0 1px 1px rgba(0,0,0,.18)) saturate(.82) brightness(.96);} /* 알림 램프 — 숫자 없이 붉은 점(계기판 문법) */ .tab-dot{position:absolute; top:4px; right:6px; width:8px; height:8px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#ff8b7a,#e03b28); border:1px solid #a52a1c; box-shadow:0 0 6px rgba(240,70,45,.8);} .tab-dot[hidden]{display:none;} /* ===== 2026-07-22 사장님 피드백 반영 ===================================== (5) 페이지 스크롤 — .dex-page 는 height:100% + column flex 인데 overflow 지정이 없어 내용이 길면 그냥 잘렸다(상점에서 발견). 세로 스크롤을 열고 관성 스크롤을 켠다. */ .overlay.page .dex-page{overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;} /* (3) 최고·누적 숨김 — ★ hidden 속성만으론 안 된다. .hud-meta 에 display:flex 규칙이 있어 UA 스타일시트의 [hidden]{display:none} 을 이겨서 그대로 보였다(실측: hidden=true 인데 display:flex). */ .hud-meta[hidden]{display:none !important;} /* (2) 탭 구조에선 페이지마다 뒤로가기 버튼이 필요 없다 — 하단바가 항상 있다 */ .gm-back[hidden]{display:none !important;} /* (14) 타이틀에서는 하단 메뉴바를 감춘다 — 시작 전엔 갈 곳이 없다 */ body.at-title .tabbar{display:none;} /* ===== 단계 상세 (피드백 7) — 각 피방이 '어떤 모습인지' 보여준다 ===================== */ #stageDetailOverlay.show{z-index:28;} /* 로드맵(page) 위 */ /* 모달 카드 (2026-07-22 사장님 "Dialog 이상함. 배경이 필요할듯"). 전체화면 page 문법에는 자기 배경판이 없어 뒤 로드맵이 그대로 비쳐 보였다 — 내용 칩만 허공에 뜬 꼴. 게임 패널 문법(크림 바탕 + 금테 + 단단한 밑면)으로 카드를 세운다. */ .sd-card{position:relative; width:100%; max-width:400px; max-height:100%; display:flex; flex-direction:column; overflow:hidden; border-radius:20px; border:3px solid #c8912f; background:linear-gradient(180deg,#fffaf0 0%,#f6ecd6 62%,#f0e3c8 100%); box-shadow:inset 0 3px 0 rgba(255,255,255,.85), inset 0 -2px 0 rgba(150,110,40,.18), 0 7px 0 #b8863a, 0 14px 26px rgba(40,28,10,.42);} .sd-body{overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:14px 14px 4px;} .sd-foot{flex:0 0 auto; padding:10px 14px calc(12px + env(safe-area-inset-bottom)); background:linear-gradient(rgba(240,227,200,0), rgba(240,227,200,.95) 40%);} .sd-foot .btn{width:100%;} .sd-hero{position:relative; width:100%; aspect-ratio:16/10; border-radius:14px; overflow:hidden; background-size:cover; background-position:center 42%; border:2px solid #cfa24e; box-shadow:inset 0 2px 0 rgba(255,255,255,.35), 0 3px 0 #b8863a;} .sd-badge{position:absolute; left:10px; top:10px; padding:4px 10px; border-radius:9px; background:linear-gradient(180deg,#fff6e2,#ffe0a6); border:2px solid #c8912f; color:#6d4d12; font-family:var(--font-game); font-size:12px; font-weight:800; box-shadow:0 2px 0 #b8863a;} .sd-name{margin:12px 0 4px; font-size:22px; font-family:var(--font-game); color:var(--txt);} .sd-desc{margin:0 0 12px; font-size:13px; line-height:1.6; color:var(--muted);} .sd-sec{margin:12px 0 7px; font-size:12.5px; font-weight:800; color:#7a5f2a; font-family:var(--font-game);} .sd-rewards{display:flex; flex-direction:column; gap:6px;} .sd-reward{display:flex; align-items:center; gap:9px; padding:8px 11px; border-radius:11px; background:linear-gradient(180deg,#fffaf0,#f2e7cf); border:2px solid #ddc79a; box-shadow:inset 0 2px 0 rgba(255,255,255,.8); font-size:13px; font-weight:700; color:#5f4a22;} .sd-reward img{width:26px; height:26px; object-fit:contain; flex:0 0 auto;} .sd-none{font-size:13px; color:var(--muted);} .sd-conds{display:flex; flex-direction:column; gap:5px; margin-bottom:14px;} .sd-cond{display:flex; justify-content:space-between; align-items:center; padding:7px 11px; border-radius:10px; background:#efe7d6; border:1px solid #d7c9ab; font-size:13px; color:#6a5738;} .sd-cond.ok{background:linear-gradient(180deg,#e6f7e4,#d6efd2); border-color:#8fc98a; color:#2f6b2c;} .sd-cond b{font-weight:800;}