/* RW-076: 운명의 놀이터 - 운명의_놀이터_컨셉비교.md §5 그대로 구현. village.css의 .shop/.village-map 컴포넌트를 그대로 재사용(신규 CSS 컴포넌트 최소화, §5-1 원칙). */ .pg-badge{ background:var(--card); border:1px solid var(--border); border-radius:999px; padding:6px 16px; font-size:.78rem; color:var(--muted); margin-top:-8px; } /* 2026-08-20 사람 직접 지시: CSS 그라디언트 placeholder를 사람이 생성한 세로형 원화 (운명의 놀이터.png → assets/village/playground.jpg, 1024x1536)로 교체. .village-map의 마을용 aspect-ratio/높이를 그대로 상속하고 배경만 갈면 되도록 원본 비율이 같다(2:3). 시설 버튼 좌표(playground.html)는 이 그림의 실제 시설 위치에 재계약됨 — 배치: 회전목마(상좌)·미끄럼틀(상우)·소원나무+벤치(중좌)·게임부스(중우)·포춘분수(하중앙). */ /* ── 놀이터 배경 · 시간대 (2026-08-21 사람 지시 `새 폴더\0821.txt` 2·7항) ──────── ★ 그림 파일명을 CSS 에 직접 쓰지 않고 변수로 뺀다 — 지시문 7항이 [나중에 내가 교체하기 쉽게] 라고 했다. 시간대별 원화가 준비되면 아래 세 줄의 **파일명만** 바꾼다: assets/village/playground-time-day.jpg / -sunset.jpg / -night.jpg 지금은 셋 다 같은 그림(playground.jpg — 마을과 달리 시간대 원화가 아직 없다)이고, 분위기는 아래 ::before 색보정 한 겹이 만든다. 그림이 들어오면 이 한 겹은 그대로 둬도 되고(색이 더 진해진다) --pg-tint 를 transparent 로 비워도 된다. ★ 색은 감이 아니다 — 마을 원화 3장의 하늘 대역 실측색(village.css 시간대 테마 주석)에서 색상만 가져오고 알파는 낮게 잡았다. soft-light 라 밝은 데는 덜, 어두운 데는 더 먹는다. */ /* 2026-09-05 놀이터 배경·UI 개선 §2 — 낮/노을/밤이 갈리던 배경을 [늘 밤]으로 통일한다. 입구(entry-scene.js)도 밤 그림 한 장뿐이다(낮/노을/밤 3장인 타로집·사주집·도사집과 다르다) — 놀이터도 같은 결로 맞춘다. 그래서 세 `data-phase` 값 전부 같은 야간 배경을 가리키고, 시간대 색보정(--pg-tint)도 전부 끈다 — 그림 자체가 이미 밤이라 마을 낮 시간에 덧씌우면 장면이 안 맞고, 밤 틴트를 또 덧씌우면 과하게 어두워진다(요청 §2 금지 — "낮 이미지를 단순히 어둡게 만드는 필터 처리"와 같은 문제가 반대 방향으로 난다). 옛 낮 배경 파일(playground-bleed-0901.jpg)은 지우지 않았다 — 자산 규칙(CLAUDE.md §7-3). */ /* 2026-09-12 — 수작업_대장 #105 [놀이터 하단 WORLD EXTENSION] 도착본 반입. 분수 아래로 돌길이 꽃밭 정원까지 이어지는 진짜 확장 원화(1024x1898 — 기존 1024x1536 상단은 그대로, 아래로 362px 늘었다)로 교체 — playground-ui.js 의 [같은 원화 오려붙이기] 우회를 걷어냈다 (village-fullbleed.js 의 놀이터 월드 높이·안전영역·앵커도 같이 갱신). 옛 20260910 판은 지우지 않고 그대로 둔다. */ :root, :root[data-phase="sunset"], :root[data-phase="night"]{ --pg-art:url("assets/village/playground-day-20260912.jpg"); --pg-tint:transparent; } .pg-map{ background:#100c17 var(--pg-art) center/cover no-repeat; } /* z-index 를 주지 않는다 — 주는 순간 뒤에 오는 시설 버튼(.shop z-index:5)·광장 라벨보다 위로 올라갈 수 있다. 위치만 잡아 두면 배경 위·자식들 아래에 그대로 깔린다. */ .pg-map::before{ content:""; position:absolute; inset:0; pointer-events:none; background:var(--pg-tint); mix-blend-mode:soft-light; transition:background-color var(--dn-dur, 1.6s) ease-in-out; } /* 밤에는 색만으로 부족하다 — 실제로 어두워져야 [밤]이 된다. 지도 안쪽만 눌러서 시설 버튼(자기 배경이 있다)은 읽히는 채로 둔다. */ .pg-map::after{ content:""; position:absolute; inset:0; pointer-events:none; background:#070a1c; opacity:calc(clamp(0, calc((var(--dn,0) - 0.30) / 0.45), 1) * .42); transition:opacity var(--dn-dur, 1.6s) ease-in-out; } .pg-attraction{ width:88px; /* 2026-08-20 사람 직접 지시(버튼 위치 어긋남 조치)의 짝 수정: village.css .shop의 중심 앵커 translate(-50%,-50%)를 제거함(마을 히트박스는 좌상단 기준 박스라서). 놀이터 시설 버튼은 반대로 [시설 중심점] 규약이고 대장 #112의 보정 좌표도 중심 앵커 전제 실측치라, 여기서만 중심 앵커를 유지한다 — #112 적용 시 이 전제를 바꾸지 말 것. */ transform:translate(-50%,-50%); } .pg-attraction .shop-neon{ animation-delay:.3s; } /* 시설별 콘텐츠 목록 오버레이 - coins.js .tarot-coin-overlay와 동일한 시각 언어 */ .pg-overlay{ position:fixed; inset:0; background:rgba(20,16,10,.6); display:flex; align-items:center; justify-content:center; padding:20px; z-index:40; } .pg-overlay.hidden{ display:none; } .pg-panel{ background:var(--card); border-radius:16px; max-width:340px; width:100%; max-height:80vh; overflow-y:auto; padding:22px 20px 20px; position:relative; box-shadow:0 12px 40px rgba(0,0,0,.35); color:var(--text); font-family:inherit; } .pg-panel h2{ margin:0 0 14px; font-size:1.05rem; } .pg-close{ position:absolute; right:12px; top:10px; background:none; border:none; font-size:1.4rem; line-height:1; color:var(--muted); cursor:pointer; padding:4px 8px; /* #96 뒤로가기 감사: 팝업 닫기도 44px 터치영역 하한(M6-3 §4와 동일 원칙) */ min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; } .pg-close:hover{ color:var(--accent); } .pg-menu-list{ display:flex; flex-direction:column; gap:8px; } .pg-menu-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid var(--border); border-radius:12px; padding:12px 14px; background:none; font-family:inherit; font-size:.86rem; color:var(--text); cursor:pointer; text-align:left; min-height:44px; } .pg-menu-item:hover{ border-color:var(--accent); } .pg-menu-item .pg-item-tag{ font-size:.7rem; color:var(--muted); } /* 퀴즈 진행 화면 - reading.css #chat/.msg/.choices 그대로 상속(신규 스타일 불요) */ .pg-quiz{ width:100%; display:flex; flex-direction:column; align-items:center; } .pg-quiz.hidden{ display:none; } .pg-quiz-back{ position:static; margin-bottom:8px; align-self:flex-start; } /* #140/#151(2026-08-20 03_디자인팀 확정): 이 뒤로가기만