/* ════════════════════════════════════════════════════════════════════
   playground-ui.css — 운명의 놀이터 · PREMIUM
   ────────────────────────────────────────────────────────────────────
   2026-08-27 사람 지시. 조문 그대로 옮겨 둔다:
     · [‹ 마을] 작고 단정한 캡슐 · 반투명 글래스 · 번쩍이는 보라 그라데이션 금지
     · 제목은 [놀이터] 하나 · 큰 이모지 뺀다 · 아래 아주 작은 장식선만
     · 상시 고지 박스 대신 우상단 ⓘ
     · 음악은 얇고 긴 미니 플레이어 — [이 화면의 주인공이 아니다]
     · 시설 이름표는 이름만 · **다크 글래스 캡슐**로 전부 같은 규격
     · 초록 [영업중] 반복 제거 — 상업시설 지도처럼 보인다
     · 평상시엔 조용하고, **누른 것만** 반응한다
     · 샴페인 골드는 화면의 5% 이하 — 많아지면 판타지 RPG 가 된다

   ★ 토큰은 village-ui.css 가 먼저 정의한다. 여기선 [이 화면의 색 규칙]만 더한다.
   ════════════════════════════════════════════════════════════════════ */

body.village-body{
  /* 색·자리 토큰은 premium-hud.css 가 정의한다(같은 값을 두 벌로 두지 않는다 · §15).
     여기는 이 화면에서만 다른 것만 적는다. */

  /* 2026-09-10(6차) 사람 지시 [메인 화면 하단 갈색/회색 영역 제거] — 배경이
     `playground-day-20260910.jpg`(밝은 노을 낮 배경)로 바뀐 뒤에도 이 그라데이션은
     옛 야간 배경(2026-09-05) 가장자리색 그대로였다. 카메라(village-fullbleed.js)가
     안전영역을 다 담으려고 세로를 letterbox 로 살짝 못 채우는 기기에서, 그 틈으로
     옛 [밤빛 남색→회갈색] 그라데이션이 비쳐 "원화가 중간에 끊기고 다른 패널이
     붙은 것"처럼 보였다 — 이게 신고된 [갈색/회색 영역]의 정체다.
     새 값은 지금 배경을 PIL 로 실측한 것이다(8px 간격 가로 평균 · y 0/16/30/52/65/78/90/98/100%) —
     감으로 고르지 않았다. 새 이미지를 만들지 않고(§9 금지) 이 폴백 색만 그림에 맞춘다. */
  background:linear-gradient(180deg,
    #9a7da6 0%, #da906e 16%, #a78262 30%, #c48e6c 52%, #ba8d6f 65%, #b38e6b 78%, #af8769 90%, #876d5d 100%);
  padding-top:calc(var(--pg-row2) + 34px + var(--vg-s2, 8px));
}

/* 화면 전환 페이드 — [터치 → 살짝 눌림 → 0.22초 페이드 → 마을] */
body.village-body.pg-leaving{ opacity:0; transition:opacity .22s ease; }

/* ══ ① ‹ 마을 ═══════════════════════════════════════════════════ */
/* 보이는 크기는 36px, **누를 수 있는 자리는 44px** — 조문 [실제 터치 영역은 충분히 크게] */
/* ══ ② 제목 — 상단 중앙, 아래 아주 작은 장식선 ═════════════════ */
body.village-body .village-title{
  position:fixed; z-index:21;
  top:var(--pg-row1); left:0; right:0; margin:0; padding:0; width:auto;
  height:36px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--pg-ink); font:600 .92rem/1 var(--font-ui,"Malgun Gothic",sans-serif);
  letter-spacing:.06em; text-align:center;
  text-shadow:0 1px 6px rgba(18,11,32,.55);
  pointer-events:none;
}
body.village-body .village-title::after{
  content:""; display:block; width:22px; height:1px; margin-top:5px;
  background:var(--pg-gold); opacity:.75;
}
body.village-body > .sub{ display:none; }   /* [시설을 눌러…] — 눌러 보면 아는 것이다 */

/* ══ ③ ⓘ 안내 ═════════════════════════════════════════════════ */
/* 누르면 뜨는 고지 — 법적 문구라 지우지 않고 [필요할 때] 보인다 */
body.village-body .pg-badge{
  position:fixed; z-index:23;
  left:var(--vg-s3, 12px); right:var(--vg-s3, 12px);
  top:calc(var(--pg-row1) + 36px + var(--vg-s2, 8px));
  margin:0; width:auto; max-width:none;
  padding:9px 14px; border-radius:var(--vg-r-md, 14px);
  border:1px solid var(--pg-line);
  background:var(--pg-glass); color:var(--pg-ink);
  font-size:.68rem; line-height:1.45; text-align:center;
  box-shadow:var(--pg-sh);
}

/* ══ ④ 음악 미니 플레이어 ═══════════════════════════════════════
   [음악은 분위기를 만드는 보조 기능이지 이 화면의 주인공이 아니다] */
/*  ★ 2026-08-31 복구 — 이 규칙은 **선택자 줄이 통째로 없어져 있었다.**
    남은 것은 이 선언 뭉치뿐이라 CSS 파서가 여기부터 아래 .pg-attraction .shop-neon 까지를
    한 덩어리로 삼켜 **둘 다 버렸다.** 그 결과 음악 칩이 자기 자리(둘째 줄)로 못 내려가
    [‹ 마을] 버튼과 **같은 자리(12,12)에 완전히 겹쳤고**, z-index 가 낮아(21 < 22)
    놀이터에서 음악을 켤 수 없었다(2026-08-31 실측: 칩 자리를 눌러도 A.backhome 이 잡힌다).
    v0.1.102 동기화본에도 같은 상태였다 — 오늘 생긴 것이 아니라 그 전부터 깨져 있었다.
    (원인은 bash 큰따옴표 안의 백틱이 파일 내용을 먹은 것으로 보인다. 같은 자국이
     아래 133행 주석에도 남아 있다 — 거기 딸렸던 규칙은 무엇이었는지 알 수 없어 두었다.)

    ★ village-ui.css 의 마을용 규칙이 특이도로 먼저 걸린다 — position 을 다시 적어 주지
      않으면 top/left 가 통째로 무시돼 칩이 화면 맨 아래로 흘러간다(2026-08-27 실측: top=813).
      자리를 옮길 땐 position 부터 되돌린다. */
body.village-body .bgm-chip{
  position:fixed;
  top:var(--pg-row2); left:var(--vg-s3, 12px); right:calc(var(--vg-s3, 12px) + 176px);   /* 은화 pill(실측 163px) + 여백 — 겹치면 제목이 잘린다 */
  width:auto; min-width:0; height:34px; min-height:34px;
  padding:0 12px; gap:9px; justify-content:flex-start;
  border:1px solid var(--pg-line); border-radius:var(--vg-r-pill, 999px);
  background:var(--pg-glass-soft); color:var(--pg-ink);
  box-shadow:none;                      /* [강한 그림자 없음] */
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font-size:.72rem;
}
/* ♫ 는 샴페인 골드 포인트. 재생 중에만 아주 미세하게 — 음표가 날아다니지 않는다 */
/* ══ ⑤ 시설 이름표 — 전부 같은 규격의 다크 글래스 캡슐 ═════════ */
.pg-attraction .shop-neon{
  display:inline-block;
  padding:5px 12px; border-radius:var(--vg-r-pill, 999px);
  border:1px solid var(--pg-line);
  background:var(--pg-glass-soft);
  color:var(--pg-ink);
  font:600 .72rem/1.25 var(--font-ui,"Malgun Gothic",sans-serif);
  letter-spacing:.01em; white-space:nowrap;
  box-shadow:0 2px 10px rgba(18,11,32,.20);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  animation:none; text-shadow:none;      /* playground.css:59 네온 깜빡임을 끈다 */
  transition:background-color .18s ease, box-shadow .18s ease;
}
/* ⑥ 초록 [영업중] · 부제 — 상업시설 지도처럼 보이게 하는 주범. 감춘다(껍데기는 남긴다) */
.pg-attraction .shop-badge,
.pg-attraction .shop-name{ display:none; }

/* ══ ⑦ 평상시엔 조용하고, 누른 것만 살아난다 ═══════════════════ */
.pg-attraction{ transition:transform .18s ease; }
.pg-attraction:active{ transform:translate(-50%,-50%) scale(1.02); }
.pg-attraction:active .shop-neon{
  background:var(--pg-glass);
  box-shadow:0 0 0 1px rgba(201,169,97,.45), 0 4px 18px rgba(185,165,217,.35);
}

/* ══ ⑩ 배경에 아주 조금만 생명력 — 벚꽃잎 3장 ═════════════════
   [나뭇잎이 정신없이 날리는] 연출이 아니다. 아주 느리게 셋만 내려온다. */
.pg-petal{
  position:fixed; z-index:2; top:-24px; width:9px; height:9px; border-radius:60% 0 60% 0;
  background:rgba(247,205,220,.72); pointer-events:none;
  animation:pg-fall linear infinite;
}
@keyframes pg-fall{
  0%{ transform:translate(0,-24px) rotate(0deg); opacity:0; }
  10%{ opacity:.85; }
  90%{ opacity:.6; }
  100%{ transform:translate(26px, 102vh) rotate(220deg); opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .pg-petal{ display:none; } }

/* ══ 나머지 자리 정리 ══════════════════════════════════════════ */
body.village-body .tarot-audio-widget{
  top:auto; left:var(--vg-s3, 12px);
  bottom:calc(var(--banner-ad-height, 0px) + env(safe-area-inset-bottom, 0px) + 16px);
  border:1px solid var(--pg-line); background:var(--pg-glass-soft); box-shadow:none;
}
.pg-map{ margin-top:0; margin-bottom:calc(var(--banner-ad-height, 0px) + 14px); }

/* 보이는 크기 36px, 누를 수 있는 자리는 44px */
/* 젤리가 얹던 광택·반짝임을 끈다 */
/* village-ui.css 의 [] 이
   특이도(0,3,1)로 위 규칙(0,2,1)을 이긴다 — 같은 무게로 되받는다.
   그 규칙은 **마을** 화면용이다(거기선 칩이 맨 윗줄에 선다). 놀이터는 둘째 줄이다. */

/* ════════════════════════════════════════════════════════════════════
   2026-08-31 사람 지시 — 놀이터를 마을과 같은 세계로 (§3·§4·§6·§18·§19)
   ────────────────────────────────────────────────────────────────────
   사람이 정한 것 (원문):
     "놀이터 화면이 마을 메인 화면과 별도 앱처럼 보이는 것" 이 문제다.
     "같은 마을 안의 다른 장소로 이동한 것" 처럼 느껴지게 한다.

   ★ 새 토큰을 만들지 않는다. `village-ui.css` 의 --vg-* 를 그대로 쓴다 —
     그 파일은 이 화면에 **이미 실려 있다**(playground.html:24). 두 벌을 만들지 않는다.
   ★ 배경·시설 좌표는 한 픽셀도 안 건드린다(지시 §2·§21).
   ════════════════════════════════════════════════════════════════════ */

/* ── §4 시설 이름표 = 마을 건물 명패와 같은 것 ─────────────────────
   앞판은 유리(--pg-glass-soft)에 blur 를 얹은 [다른 앱] 느낌이었다.
   마을은 크림 명패(.vg-sign-plate)다 — 값을 그쪽에서 그대로 가져온다. */
.pg-attraction .shop-neon{
  padding:3px 10px;
  border:1px solid var(--vg-line, #dcc4a1);
  background:var(--vg-cream-soft, rgba(250,244,232,.92));
  color:var(--vg-ink, #4a3312);
  font:600 .70rem/1.25 var(--font-ui,"Malgun Gothic",sans-serif);
  box-shadow:var(--vg-sh-1, 0 1px 4px rgba(40,26,6,.16));
  -webkit-backdrop-filter:none; backdrop-filter:none;   /* 마을 명패는 흐리지 않는다 */
  text-shadow:none;
  /* ★ 두 줄로 깨지지 않게 못박는다 — [포춘 나무 벤치] 가 두 줄로 접혔다(2026-08-31 실측).
     이름 자체도 짧게 줄였지만(§14), 좁은 화면에서 또 접히지 않게 여기서도 막는다. */
  white-space:nowrap; word-break:keep-all;
}
/* 명패가 지도 밖으로 나가지 않게 — 가장자리 시설의 이름이 잘리는 것을 막는다 */
.pg-attraction{ max-width:none; }
.pg-attraction:active .shop-neon{ transform:scale(.97); }

/* ── §3 상단을 마을과 같은 결로 ───────────────────────────────────
   놀이터만 다른 제목·부제를 쓰지 않는다. 마을의 .village-title/.sub 규약을 따른다. */
.village-body .village-title{ color:var(--vg-ink, #4a3312); }

/* ── §6 팝업 — 검정 패널을 크림으로 ───────────────────────────────
   "현재 팝업은 도깨비 마을 전체 분위기와 어울리지 않는다"(사람 원문). */
.pg-panel{
  background:var(--vg-cream, #f8ecd9);
  border:1px solid var(--vg-line, #dcc4a1);
  border-radius:18px;
  color:var(--vg-ink, #4a3312);
  box-shadow:0 10px 30px rgba(40,26,6,.22);
  max-width:330px;
}
.pg-panel h2{
  color:var(--vg-ink, #4a3312);
  font-size:1.06rem; letter-spacing:-.01em; margin:0 0 4px;
}
/* 팝업 부제 — 시설마다 한 줄. 제목 바로 아래 */
.pg-panel .pg-sub{
  margin:0 0 14px; font-size:.8rem; line-height:1.5;
  color:var(--vg-ink-sub, #7a6141);
}
.pg-close{ color:var(--vg-ink-sub, #7a6141); }

/* 팝업 안 카드 — 크림 위에 아주 옅은 베이지. 카드 전체가 눌린다(§7) */
.pg-menu-list button,
.pg-menu-list a{
  display:flex; align-items:center; gap:10px;
  width:100%; text-align:left; text-decoration:none;
  padding:12px 13px; border-radius:13px; min-height:56px;
  border:1px solid var(--vg-line, #dcc4a1);
  background:rgba(255,255,255,.62);
  color:var(--vg-ink, #4a3312);
  font-family:inherit; cursor:pointer;
  transition:background-color .16s ease, transform .12s ease;
}
.pg-menu-list button:active,
.pg-menu-list a:active{ transform:scale(.985); background:rgba(255,255,255,.86); }
.pg-item-ico{ flex:0 0 auto; font-size:1.22rem; line-height:1; }
.pg-item-txt{ flex:1; min-width:0; }
.pg-item-ttl{ display:block; font-size:.9rem; font-weight:600; line-height:1.4; word-break:keep-all; }
.pg-item-sub{ display:block; font-size:.72rem; color:var(--vg-ink-sub, #7a6141); margin-top:2px; }
/* §7 — 오른쪽의 [테스트] 글자를 지우고 화살표만 남긴다 */
.pg-item-arrow{ flex:0 0 auto; color:var(--vg-line, #dcc4a1); font-size:1.1rem; line-height:1; }

/* §8 — 포춘분수의 오늘 콘텐츠는 한 단계 더 강조한다 */
.pg-menu-list button.is-today{
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,246,224,.92));
  border-color:var(--vg-gold, #c9a961);
  box-shadow:0 2px 10px rgba(160,120,40,.18);
}

/* ── §18 딤 완화 — 팝업은 읽히되 뒤 놀이터가 보이게 ────────────────── */
.pg-overlay{ background:rgba(38,26,10,.36); }

/* ── §19 광고 위 빈 갈색 영역 없애기 ──────────────────────────────
   사람 원문: *"놀이터 배경과 광고 사이에 큰 빈 갈색 영역이 생기지 않도록"*

   ★ 원인은 **비율이다.** 그림이 1024x1536 이고 .pg-map 이 그 aspect-ratio 를 지킨다.
     폭 412 화면이면 지도 높이가 618px 인데 화면은 915px — 아래 199px 가 남는다(실측).
   ★ 지도를 늘려서 채우지 않는다. 시설 좌표가 % 라서 높이를 바꾸면 이름표가
     그림 속 시설에서 어긋난다(지시 §2·§21 — 시설 재배치 금지).
   ★ 그래서 **그림의 아래 가장자리 색으로 이어 붙인다.** #a4987a 는 감이 아니라
     playground.jpg 맨 아래 줄의 평균 색이다(2026-08-31 PIL 로 실측).
     그러면 그림이 광고 직전까지 자연스럽게 이어져 보인다. */
/*  ★ 배경을 여기서 새로 칠하지 않는다 — 이 파일 위쪽 `body.village-body` 가
      이미 그림 가장자리 실측색으로 그라데이션을 깔고 있다(#c6d9e6 → #b9bfa0 → #ac9f7a).
      2026-08-31 에 그걸 못 보고 #a4987a 를 한 벌 더 만들었다가 걷어냈다 — 두 길을 내지 않는다.
      남은 문제는 [색]이 아니라 [빈 높이]였다. 그래서 아래 min-height 로 지도를 늘린다. */
.pg-map{ margin-bottom:0; }
/*  ★ 지도를 늘려서 채우지 않는다 — 시설 좌표가 % 라 높이를 바꾸면 이름표가
      그림 속 시설에서 어긋난다(지시 §2·§21 시설 재배치 금지). 실측: 폭 412 에서 지도 618px.
      아래 남는 자리는 위의 실측 그라데이션이 받는다. 여기서는 **광고와 겹치지만** 막는다. */
body.has-banner-ad{
  padding-bottom:calc(var(--banner-ad-height, 0px) + env(safe-area-inset-bottom, 0px));
}

/*  ★ 남는 자리를 **위로** 보낸다 (2026-08-31).
      지도 비율은 못 건드리니(시설 좌표가 % 다) 빈 높이 자체는 없앨 수 없다.
      대신 지도를 아래로 붙이면 그림이 광고 직전까지 닿고, 남는 곳은
      이미 상단바가 있는 위쪽으로 간다 — 거기는 원래 비어 보이는 자리다.
      실측(412x915): 지도 618px · 상단 98px · 아래 199px 였다. */
/*  ★ 지도 높이는 **손대지 않는다.** 두 가지를 시도했다가 둘 다 되돌렸다(2026-08-31):
      ① margin-top:auto 로 아래에 붙이기 → 빈 곳이 위로 가서 더 커 보였다.
      ② 높이에 맞춰 키우고 좌우 자르기 → 가장자리 시설 이름표가 화면 밖으로 나갔다
         (회전목마 -141px · 포춘나무 -166px 실측). 시설이 잘리면 §21 위반이다.
      그림 비율(1024/1536)이 세로 화면보다 짧은 것은 **그림의 성질**이라 UI 로 못 없앤다.
      남는 자리는 위쪽 실측 그라데이션이 받고, 그 위에 하루가 서 있게 한다(아래 .pg-haru).
      실측(412x915): 지도 618px · 위 98px · 아래 199px. */
body.village-body{ overflow-x:hidden; }
/* ── §20 작은 화면 — 명패가 서로 겹치지 않게 한 단계 줄인다 ───────── */
@media (max-width:360px){
  .pg-attraction .shop-neon{ padding:2px 8px; font-size:.64rem; }
  .pg-haru{ font-size:.8rem; padding:8px 13px; }
}
@media (max-height:680px){
  .pg-attraction .shop-neon{ font-size:.66rem; }
}

/* ── §11·§12 하루 — 놀이터 안에서도 사라지지 않는다 ─────────────────
   ★ 새 캐릭터를 만들지 않는다. 마을이 쓰는 haru.png 를 그대로 쓴다. */
.pg-haru{
  /*  ★ 지도 **아래 빈 자리**에 세운다 (2026-08-31).
      그림 비율 탓에 남는 199px 를 비워 두면 [빈 갈색 영역]으로 읽힌다(사람 지적 §19).
      거기에 하루가 서 있으면 그 자리가 [하루가 있는 곳]이 된다 — 없애지 못하는 공간을 쓴다.
      ★ 지도 안이 아니라 화면 기준이라 시설을 하나도 안 가린다. */
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--banner-ad-height, 0px) + env(safe-area-inset-bottom, 0px) + 18px);
  z-index:8; max-width:min(86%, 352px);   /* 2026-09-02 사람 지시 — 넓은 기기에서도 폰과 같은 폭 */
  display:flex; align-items:center; gap:9px;
  border-color:var(--vg-line, #dcc4a1);
  background:var(--vg-cream-soft, rgba(250,244,232,.92));
  color:var(--vg-ink, #4a3312);
  box-shadow:var(--vg-sh-1, 0 1px 4px rgba(40,26,6,.16));
  text-align:left;
}
.pg-haru-face{
  flex:0 0 auto; width:30px; height:30px; border-radius:50%;
  border:1.5px solid var(--vg-cream, #f8ecd9);
  background:var(--vg-cream, #f8ecd9); object-fit:cover;
}
.pg-haru-say{ min-width:0; }

/* ════════════════════════════════════════════════════════════════════
   2026-08-31 (2차) — UI 의 존재감을 낮춘다 (사람 지시 §1~§13)
   ────────────────────────────────────────────────────────────────────
   사람이 정한 최종 기준 (원문):
     "UI 를 화려하게 만드는 것이 아니라 **UI 가 원화 안에 자연스럽게 들어가게** 만드는 것"
     "배경 원화가 UI 보다 먼저 보이는가?"

   ★ 새 토큰을 만들지 않는다 — village-ui.css 의 --vg-* 를 쓴다(이미 실려 있다).
   ★ 배경·시설 좌표는 여전히 한 픽셀도 안 건드린다.
   ════════════════════════════════════════════════════════════════════ */

/* ── §1·§2 표지판 — 마을에 실제로 서 있는 안내판처럼 ────────────────
   앞판은 [크림 알약 + 이모지] 였다. 이모지를 빼고 전용 라인 아이콘으로 바꾸면서
   글자도 한 단계 줄인다 — 시설보다 표지판이 먼저 눈에 띄면 안 된다(§2). */
.pg-attraction .shop-neon{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px 3px 7px;
  font:600 .655rem/1.2 var(--font-ui,"Malgun Gothic",sans-serif);
  letter-spacing:.005em;
  border-color:rgba(190,158,96,.55);            /* 얇은 황동 — 1px 선까지만 */
  background:rgba(252,247,238,.90);
  box-shadow:0 1px 3px rgba(60,42,12,.14);      /* 아주 약하게. drop shadow 를 키우지 않는다 */
  transition:transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s ease, background-color .22s ease;
}
.pg-ico{
  width:13px; height:13px; flex:0 0 auto; display:block;
  color:#b08a3e;                                 /* 얇은 골드 라인 — 면을 칠하지 않는다 */
  opacity:.92;
}

/* ── §3 시설 터치 반응 — 동화책에서 장소를 하나 발견한 정도 ───────────
   "1.02~1.04배 · 부드러운 빛 · 0.3~0.6초 · 과도한 게임 이펙트 금지"
   ★ 고른 시설만 반응한다. 나머지는 그대로 둔다(§3 마지막). */
.pg-attraction.is-picked .shop-neon{
  transform:scale(1.035);
  background:rgba(255,252,246,.97);
  box-shadow:0 0 0 3px rgba(214,182,116,.28), 0 2px 8px rgba(60,42,12,.18);
}
.pg-attraction.is-picked::after{
  content:""; position:absolute; left:50%; top:50%;
  width:78px; height:78px; margin:-39px 0 0 -39px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,244,214,.55) 0%, rgba(255,244,214,0) 68%);
  animation:pg-glow .52s ease-out both;
}
@keyframes pg-glow{
  from{ opacity:0; transform:scale(.72); }
  45% { opacity:1; }
  to  { opacity:0; transform:scale(1.18); }
}

/* ── §8 오늘의 추천 — 배너를 만들지 않는다. 표지판 옆 작은 점 하나 ──── */
.pg-attraction.is-today .shop-neon::after{
  content:""; width:5px; height:5px; border-radius:50%;
  background:#d9b45c; box-shadow:0 0 0 2px rgba(217,180,92,.26);
  margin-left:1px; flex:0 0 auto;
  animation:pg-today 2.6s ease-in-out infinite;
}
@keyframes pg-today{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }

/* ── §7 상단 HUD 슬림 ──────────────────────────────────────────────
   ★ 가운데 긴 회색 바의 정체는 **BGM 칩**이었다(폭 212px · 곡 제목이 펼쳐져 있었다).
     마을은 village-ui.css:70 에서 이미 정사각 아이콘으로 접는데, 놀이터는 body 에
     premium-hud 가 함께 붙어 있어 premium-hud.css:84 가 그것을 다시 펼치고 있었다.
     기능(음악 켜고 끄기)은 남기고 **마을과 같은 크기로 접는다** — 없애지 않는다(§7). */
body.village-body.premium-hud .bgm-chip{
  min-width:var(--vg-hud-h, 36px); width:var(--vg-hud-h, 36px);
  min-height:var(--vg-hud-h, 36px); height:var(--vg-hud-h, 36px);
  padding:0; gap:0; justify-content:center;
  /*  ★ 2026-08-31 — **자리도 여기서 정한다.** 마을은 `village-ui.css:292`
      (`body.village-body.bgm-chip-on .bgm-chip`, 특이도 0-3-1)에서 칩을 맨 윗줄 12px 로
      올린다. 그 근거는 [마을 좌상단엔 뒤로가기 pill 이 없다] 인데, **놀이터엔 있다** —
      그대로 두면 칩(12,12,28x28)이 [‹ 마을](12,12,64x36) 밑에 통째로 깔리고 z 도 낮아
      (21 < 22) 음악을 켤 수가 없다(2026-08-31 실측: 칩 한가운데를 눌러도 A.backhome).
      이 규칙은 같은 0-3-1 이고 village-ui.css 보다 **나중에 실리므로**(playground.html:24→25)
      되받는다. 자리를 세 번째 파일에 또 적지 않기 위해 여기 한 줄로 둔다. */
  top:var(--pg-row2);
}
body.village-body.premium-hud .bgm-chip .bgm-chip-title{ display:none; }

/* 제목도 한 단계 눕힌다 — 상단 UI 보다 풍경이 먼저 보여야 한다(§7 마지막) */
.village-body .village-title{
  font-size:.9rem; font-weight:600; opacity:.86;
  text-shadow:0 1px 3px rgba(40,26,6,.35);
}

/* ── §4 Bottom Sheet — 아래에서 올라온다 ───────────────────────────
   "화면 중앙을 너무 많이 가려 놀이터 안에 있다는 느낌이 끊긴다"(사람 원문). */
.pg-overlay{
  align-items:flex-end;                 /* 가운데 → 아래 */
  padding:0;
  background:rgba(38,26,10,.32);        /* §18 검게 덮지 않는다 */
}
.pg-panel{
  width:100%; max-width:520px; margin:0 auto;
  border-radius:22px 22px 0 0;
  border:1px solid rgba(190,158,96,.42); border-bottom:0;
  background:rgba(252,247,238,.97);
  box-shadow:0 -6px 24px rgba(40,26,6,.18);
  padding:16px 16px calc(18px + var(--banner-ad-height, 0px) + env(safe-area-inset-bottom, 0px));
  /* §4 기본 35~42% · 내용이 많으면 안에서 스크롤 */
  min-height:35dvh; max-height:74dvh; overflow-y:auto;
  animation:pg-sheet-up .3s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes pg-sheet-up{ from{ transform:translateY(14%); opacity:.4; } to{ transform:none; opacity:1; } }
/* 위쪽 손잡이 — 아래에서 올라온 것이라는 표시 */
.pg-grip{
  display:block; width:38px; height:4px; border-radius:999px;
  background:rgba(120,96,54,.26); margin:0 auto 12px;
}
.pg-close{ top:12px; right:12px; }

/* ── §15 광고와 겹치지 않게 ────────────────────────────────────────
   시트는 자기 padding 으로 광고를 피하고, 하루는 시트가 열리면 비켜선다. */
body.pg-sheet-open .pg-haru{ opacity:0; pointer-events:none; transition:opacity .2s ease; }

@media (prefers-reduced-motion: reduce){
  .pg-panel{ animation:none; }
  .pg-attraction.is-picked::after{ animation:none; opacity:0; }
  .pg-attraction.is-today .shop-neon::after{ animation:none; }
}

/*  ★ 광장 라벨 [놀이터] 를 숨긴다 (2026-08-31 §11 — 배경 위 큰 흰색 텍스트 제거).
    상단 제목과 같은 말이라 두 번 보이고, 자리도 지도 왼쪽 위로 어긋나 있었다
    (실측 top:99 left:0 — 중앙 광장이 아니다). 지우지 않고 숨긴다 — 되돌릴 수 있게. */
.pg-map .plaza{ display:none; }

/* ════════════════════════════════════════════════════════════════════
   2026-08-31 (3차) — 팝업을 [메뉴창]에서 [놀이기구의 작은 초대장]으로
   ────────────────────────────────────────────────────────────────────
   사람 지시 §2 원문: "메뉴창이 아니라 놀이기구의 작은 초대장 / 티켓처럼 보이게 한다."
   §31: "배경은 동화 같은 파스텔 놀이공원인데 팝업만 개발자 메뉴처럼 보이는 현상을
        완전히 제거한다."

   ★ 2차(위)에서 이미 크림 시트·라인 아이콘·터치 반응까지 왔다. 3차는 그 위에
     **§20 타이포 계단 · §21 여백 · §4 딤 · §5 일러스트 · §6 CTA · §14 배지** 를 얹는다.
   ★ 배경 원화와 시설 좌표는 여전히 한 픽셀도 안 건드린다(§0-1·2).
   ════════════════════════════════════════════════════════════════════ */

/* ── §4 딤 — 뒤의 놀이터가 보여야 한다 ─────────────────────────────
   2차는 0.32 였다. 지시가 준 범위(35~45%)의 아래쪽인 0.40 으로 올리고,
   아주 약한 blur 를 더한다 — 시선은 시트로 가되 풍경은 여전히 읽힌다. */
.pg-overlay{
  background:rgba(38,26,10,.40);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}

/* ── §21 여백 — 좌우 20~24px ────────────────────────────────────────
   2차는 16px 이라 카드가 시트 가장자리에 붙어 [목록]처럼 보였다. */
.pg-panel{
  padding:14px 22px calc(20px + var(--banner-ad-height, 0px) + env(safe-area-inset-bottom, 0px));
  /*  ★ 2026-08-31 실기기(SM-F966N · 411x903 · 배너 64px) 실측으로 고친 것 —
      높이 상한을 `74dvh` 로만 잡으면 **배너에 가린 몫까지 화면으로 쳐서** 시트가 모자란다.
      시트 아래쪽 64px 은 배너 밑에 깔리는 padding 이라 내용이 놓이는 자리가 아니다.
      그대로 두면 4칸 시설(회전목마·게임존)에서 시트가 잘려 **마지막 카드와 [전부 무료] 줄을
      스크롤해야 보였다**(실측: 맨아래 글 bottom 918 · 배너선 839 · 시트안스크롤 true).
      브라우저(배너 없음)에선 602px 로 안 잘려 안 보이던 문제다 — 폰에서만 났다.
      상한에 배너 높이를 **더해** 준다. 배너가 없으면 var 가 0 이라 예전 값 그대로다. */
  max-height:calc(74dvh + var(--banner-ad-height, 0px));
}

/* ── §17 등장 — opacity 0→1 · scale 0.96→1 · 200~300ms ─────────────
   2차는 translateY 만 있었다. 지시가 정한 곡선으로 바꾼다. 아래에서 올라오는
   시트라 아주 작은 이동(6%)은 남긴다 — 그게 없으면 [떠 있는 창]으로 돌아간다.
   ★ 게임 UI 처럼 튕기지 않게 spring 을 쓰지 않는다(§17 마지막). */
@keyframes pg-sheet-up{
  from{ opacity:0; transform:translateY(6%) scale(.96); }
  to  { opacity:1; transform:none; }
}
.pg-panel{ animation:pg-sheet-up .26s cubic-bezier(.2,.8,.3,1) both; }

/* ── §5·§8 미니 일러스트 ────────────────────────────────────────────
   그림이 들어오기 전에는 채색 SVG 가, 들어온 뒤에는 그 그림이 보인다.
   자리는 지금 잡아 둔다 — 나중에 넣으면 시트 높이가 통째로 바뀐다. */
.pg-art{
  position:relative; width:62px; height:62px; margin:2px auto 8px;
  display:flex; align-items:center; justify-content:center;
}
.pg-art-svg{ width:100%; height:100%; display:block; }
.pg-art-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; opacity:0;                 /* 뜨기 전엔 안 보인다 */
}
.pg-art.has-img .pg-art-img{ opacity:1; }
.pg-art.has-img .pg-art-svg{ visibility:hidden; }   /* 진짜 그림이 이긴다 */

/* ── §20 타이포 계단 ────────────────────────────────────────────────
   2차에서 [원화가 먼저 보이게] 전부 한 단계씩 줄였는데, 그 규칙이 걸리는 곳은
   **원화 위에 뜨는 표지판**이다. 시트 안은 원화를 가리지 않으므로 지시의 계단을 따른다.
   (표지판 .shop-neon 은 2차 크기 .655rem 그대로 둔다 — 아래에서 다시 손대지 않는다.) */
.pg-panel h2{
  font-size:1.28rem;      /* ≈20.5px — 지시 20~22 */
  font-weight:700; line-height:1.3; letter-spacing:-.01em;
  margin:0 0 5px; text-align:center;
}
.pg-panel .pg-sub{
  font-size:.85rem;       /* ≈13.6px — 지시 13~14 */
  font-weight:400; line-height:1.5; text-align:center;
  margin:0 0 18px;        /* §21 제목↔콘텐츠 18~24 */
  color:var(--vg-ink-sub, #6b512a);
}
.pg-item-ttl{
  font-size:.97rem;       /* ≈15.5px — 지시 15~16 */
  font-weight:600; line-height:1.35;
}
.pg-item-sub{
  font-size:.8rem;        /* ≈12.8px — 지시 12~13 */
  font-weight:400; line-height:1.45; margin-top:2px;
  color:var(--vg-ink-sub, #6b512a);
}
.pg-item-meta{
  display:block;
  font-size:.72rem;       /* ≈11.5px — 지시 11~12 */
  font-weight:500; margin-top:3px; letter-spacing:.01em;
  color:#9a7f52;
}

/* ── §6 카드 — 아이콘 · 글 · CTA 세 칸 ──────────────────────────────
   [테스트]/[게임] 라벨은 2차에서 이미 지웠다. 3차는 그 자리에 **자연스러운 CTA** 를 둔다. */
.pg-menu-list{ display:flex; flex-direction:column; gap:9px; }   /* §21 8~12 */
.pg-menu-list button{ align-items:flex-start; padding:13px 14px; min-height:64px; }
.pg-item-head{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.pg-item-ico{
  width:34px; height:34px; flex:0 0 auto; margin-top:1px;
  display:flex; align-items:center; justify-content:center;
  border-radius:11px;
  background:var(--pg-ico-bg, rgba(201,169,97,.13));
  color:var(--pg-ico-line, #b08a3e);
}
.pg-item-ico svg{
  width:19px; height:19px; display:block;
  fill:var(--pg-ico-fill, rgba(201,169,97,.22));    /* 옅은 파스텔 면 */
  stroke:currentColor; stroke-width:1.35;            /* 그 위에 얇은 선 */
  stroke-linecap:round; stroke-linejoin:round;
}
.pg-item-cta{
  flex:0 0 auto; align-self:center; white-space:nowrap;
  font-size:.76rem; font-weight:600; letter-spacing:-.01em;
  color:var(--pg-ico-line, #b08a3e); opacity:.9;
}

/* ── §14 TODAY 배지 — 한 시설에 하나뿐 ──────────────────────────────
   ★ HOT/NEW/무료 를 같이 붙이지 않는다. 배지가 둘 이상이면 그건 강조가 아니라 소음이다. */
/*  ★ 이름이 pg-today-tag 인 이유 — pg-badge 는 **이미 놀이터가 쓰고 있다**
    (playground.css 의 .pg-badge · village.css · 화면 위쪽에 fixed 로 뜨는 안내 막대).
    그 이름을 재사용했더니 카드 안의 내 span 이 position:fixed 를 물려받아
    시트를 가로지르는 검은 막대로 나왔다(2026-08-31 실측 · 실제로 그렇게 찍혔다).
    한 이름에 두 뜻을 주지 않는다 — 기존 것을 고치지 않고 **내 것 이름을 바꿨다**. */
.pg-today-tag{
  flex:0 0 auto;
  font-size:.6rem; font-weight:700; letter-spacing:.09em;
  padding:2px 6px 2px 7px; border-radius:999px;
  background:#d9b45c; color:#3d2c0c;
}

/* ── §15 무료 안내 — 시트 아래 한 줄로 **한 번만** ──────────────────
   카드마다 [무료]를 박으면 고급스러운 게 아니라 싸 보인다(지시 §15 마지막). */
.pg-free{
  margin:14px 0 0; text-align:center;
  font-size:.72rem; letter-spacing:.01em;
  color:#a08a5e;
}

/* ── 시설별 포인트 컬러 (§8) ────────────────────────────────────────
   시트 하나에 테마만 갈아 끼운다. 금색을 전 화면에 남발하지 않는다(§0-11) —
   포인트는 **아이콘 칸과 CTA 글자 두 곳뿐**이고, 나머지는 전부 같은 크림이다. */
.pg-overlay[data-art="carousel"]{ --pg-ico-bg:rgba(232,180,200,.18); --pg-ico-fill:rgba(232,180,200,.34); --pg-ico-line:#b9748f; }
.pg-overlay[data-art="slide"]   { --pg-ico-bg:rgba(150,205,214,.20); --pg-ico-fill:rgba(150,205,214,.34); --pg-ico-line:#5e97a3; }
.pg-overlay[data-art="fountain"]{ --pg-ico-bg:rgba(140,200,210,.20); --pg-ico-fill:rgba(196,229,234,.46); --pg-ico-line:#5b93a0; }
.pg-overlay[data-art="arcade"]  { --pg-ico-bg:rgba(174,152,204,.20); --pg-ico-fill:rgba(201,188,228,.40); --pg-ico-line:#7c68ad; }
.pg-overlay[data-art="tree"]    { --pg-ico-bg:rgba(160,190,140,.20); --pg-ico-fill:rgba(207,227,196,.46); --pg-ico-line:#6d8f5c; }

/* ── §5 닫기 — 현재보다 작고 얇고 세련되게 ──────────────────────────── */
.pg-close{
  width:28px; height:28px; font-size:1rem; line-height:1;
  opacity:.5; border:0; background:transparent;
}
.pg-close:active{ opacity:.85; }

@media (prefers-reduced-motion: reduce){
  .pg-panel{ animation:none; }
}

/* ── §21 반응형 — 숫자를 기계적으로 박지 않는다 ─────────────────────
   작은 화면에서 시트를 압축한다. 위 값은 412x915 기준이고, 짧은 화면(≤700px)에서
   그대로 쓰면 시트가 화면의 74% 를 먹어 뒤의 놀이터가 거의 안 보인다(§27).
   ★ 글자 크기(§20 계단)는 **건드리지 않는다** — 읽히는 것이 먼저다.
     줄이는 것은 그림·여백처럼 [없어도 읽히는 것]뿐이다.
   실측(2026-08-31 · 360x640): 압축 전 474px(74%) · 카드 2장이 접힘. */
@media (max-height:700px){
  .pg-art{ width:44px; height:44px; margin:0 auto 6px; }
  .pg-panel{ padding-top:10px; }
  .pg-panel .pg-sub{ margin-bottom:13px; }
  .pg-menu-list{ gap:7px; }
  .pg-menu-list button{ min-height:58px; padding:10px 12px; }
  .pg-free{ margin-top:10px; }
}
/* 아주 좁은 화면 — 카드 안 세 칸이 서로 밀지 않게 CTA 를 한 단계 줄인다 */
@media (max-width:360px){
  .pg-item-cta{ font-size:.72rem; }
  .pg-item-ico{ width:31px; height:31px; border-radius:10px; }
  .pg-item-ico svg{ width:17px; height:17px; }
}

/* ── 배너가 떠 있을 때 — 그만큼 시트 안을 죈다 ──────────────────────
   실기기 실측(2026-08-31 · SM-F966N 411x903 · 배너 64px):
     시트 안 내용 767px · 쓸 수 있는 높이 732px → **정확히 35px 모자랐다.**
     그래서 4칸 시설(회전목마·게임존)에서 [여기 있는 건 전부 무료야] 줄이 배너 밑으로
     들어가 잘렸다(무료줄 bottom 854 · 배너선 839).
   ★ 상한을 더 올리지 않는다 — 그러면 시트가 화면을 다 덮어 [놀이터 안에 있다]는 느낌이
     끊긴다(지시 §27). 배너가 가져간 자리는 **시트 안에서 되찾는다.**
   ★ 글자 크기(§20 계단)는 여기서도 안 건드린다. 죄는 것은 그림과 여백뿐이다.
   합계 −39px (필요한 35px 보다 4px 여유). */
body.has-banner-ad .pg-art{ width:46px; height:46px; margin-bottom:6px; }   /* −16 */
body.has-banner-ad .pg-panel .pg-sub{ margin-bottom:14px; }                 /* −4  */
body.has-banner-ad .pg-menu-list{ gap:8px; }                                /* −3  */
body.has-banner-ad .pg-menu-list button{ padding:11px 13px; }               /* −16 (4장) */

/* ── 미니 일러스트가 실물로 들어온 뒤 (2026-08-31 · v0.1.107) ────────
   앞판의 62px(배너 있을 때 46px)은 **자리를 잡아 두려고** 넣은 임시 SVG 기준이었다.
   그림이 실물로 들어왔더니 46px 에서는 회전목마가 무슨 그림인지 안 보였다(실기기 확인).
   지시 §5 가 팝업 맨 위에 일러스트를 두라고 한 이유가 [이게 무슨 놀이기구인지]를
   글보다 먼저 알리는 것이므로, 안 보이면 그 칸은 없는 것과 같다.

   ★ 글자 크기(§20 계단)는 **여기서도 안 건드린다.** 이 폰은 시스템 글꼴 배율이 커서
     rem 이 약 25% 크게 잡힌다(실측: .97rem 제목이 21px 예상 → 실제 27px).
     그건 사용자가 고른 설정이라 앱이 되돌릴 것이 아니다.
   ★ 대신 [없어도 읽히는 것]에서 되찾는다 — 카드 안쪽 여백과 [약 2분] 줄의 줄간격.
     카드 여백 11→9 (4장이면 −16) · 메타 줄간격을 1.25 로 못박음.
   ★ 시트 높이 상한은 그대로다. 시트가 더 커지지 않게 하면서 그림만 키운다. */
.pg-art{ width:76px; height:76px; margin:2px auto 8px; }
body.has-banner-ad .pg-art{ width:70px; height:70px; margin:0 auto 6px; }
body.has-banner-ad .pg-menu-list button{ padding:9px 13px; }
.pg-item-meta{ line-height:1.25; }

/* 짧은 화면에서는 그림이 자리를 너무 먹지 않게 한 단계 줄인다 */
@media (max-height:700px){
  .pg-art{ width:54px; height:54px; }
  body.has-banner-ad .pg-art{ width:50px; height:50px; }
}

/* ════════════════════════════════════════════════════════════════════
   PHASE 2 — 팝업 공통 디자인 시스템 (2026-08-31 사람 지시 §1~§6·§11·§12·§21)
   ────────────────────────────────────────────────────────────────────
   ★ 앞의 여러 절이 같은 속성을 조금씩 덮어 왔다. **이 절이 마지막이고 여기가 정본이다.**
     값을 고칠 때 위쪽을 뒤지지 말고 여기만 본다.
   ★ 배경 원화·시설 좌표는 여전히 한 픽셀도 안 건드린다.
   ════════════════════════════════════════════════════════════════════ */

/* ── §2 상단 — 스티커를 키우되 팝업 상단을 늘리지 않는다 ─────────────
   지시가 준 계단 그대로:  핸들 →20~24→ 스티커 →10~14→ 제목 →6~8→ 한 줄 →24~28→ 콘텐츠
   앞판은 핸들 아래 여백이 12px 로 좁고 제목~콘텐츠가 18px 로 붕 떠 있었다. */
.pg-panel{ padding-top:10px; }
.pg-grip{ margin:0 auto 22px; }                 /* 핸들 → 스티커 22px */
.pg-art{ width:78px; height:78px; margin:0 auto 12px; }   /* 스티커 → 제목 12px */
.pg-panel h2{ margin:0 0 7px; }                 /* 제목 → 한 줄 7px */
.pg-panel .pg-sub{ margin:0 0 6px; }            /* 한 줄 아래는 §11 무료 문구가 받는다 */

/* ── §11 무료 안내 — 광고에서 떼어 위로 올린다 ───────────────────────
   원문: "하단에서 [여기 있는 건 전부 무료야] → 광고 가 바로 이어져
          [무료 대신 광고를 봐야 한다] 는 의미처럼 읽힐 수 있다."
   그래서 **콘텐츠가 시작되기 전** 작은 한 줄로 옮긴다. 배너처럼 키우지 않는다. */
.pg-free{
  margin:0 0 24px;                               /* 한 줄 → 콘텐츠 24px (§2) */
  text-align:center; font-size:.72rem; letter-spacing:.01em;
  color:#a8895c; opacity:.95;
}

/* ── §3 타이포 위계 — 다 똑같이 진해 보이지 않게 ────────────────────
   1 제목 · 2 카드제목 · 3 설명 · 4 메타. 색과 굵기로 네 단을 만든다. */
.pg-panel h2{ color:#4a3312; font-weight:700; }
.pg-panel .pg-sub{ color:#7d6440; font-weight:400; }
.pg-item-ttl{ color:#4a3312; font-weight:600; }
.pg-item-sub{ color:#7d6440; font-weight:400; }
.pg-item-meta{ color:#a08c6c; font-weight:500; }        /* 4순위 — 본문처럼 안 보이게 */

/* ── §4 카드 — 배경과는 분리, 다만 무거운 흰 상자는 아니게 ──────────
   강한 그림자 금지. 얇은 border + 아주 약한 depth 만. */
.pg-menu-list{ display:flex; flex-direction:column; gap:9px; }
.pg-menu-list button{
  display:flex; align-items:center; gap:12px;
  padding:12px 13px; min-height:64px;
  border-radius:14px;
  border:1px solid rgba(206,183,146,.62);
  background:rgba(255,253,249,.72);
  box-shadow:0 1px 2px rgba(74,51,18,.045);            /* depth 는 이 한 줄이 전부다 */
  transition:background-color .16s ease, border-color .16s ease, transform .12s ease;
}
.pg-item-ico{
  width:38px; height:38px; flex:0 0 auto; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--pg-ico-bg); color:var(--pg-ico-line);
}
.pg-item-ico svg{ width:20px; height:20px; }
.pg-item-txt{ flex:1; min-width:0; }
.pg-item-sub{ margin-top:3px; }
.pg-item-meta{ margin-top:4px; }

/* ── §5 CTA — 웹 링크가 아니라 아주 연한 알약 ───────────────────────
   원문: "[해보기 >] 형태는 일반 웹 링크처럼 보이므로 개선한다."
   ★ 다만 카드마다 강한 버튼이 반복돼 쇼핑앱처럼 보이면 안 된다(§5 마지막) —
     그래서 배경은 accent 의 **10% 안팎**이고 테두리를 두지 않는다. */
.pg-item-cta{
  flex:0 0 auto; align-self:center; white-space:nowrap;
  display:inline-flex; align-items:center; gap:3px;
  padding:6px 11px 6px 12px; border-radius:999px;
  background:var(--pg-cta-bg); color:var(--pg-ico-line);
  font-size:.76rem; font-weight:600; letter-spacing:-.01em;
}

/* ── §6 놀이기구별 accent — 쓰는 자리는 넷뿐이다 ────────────────────
   아이콘 칸 · CTA · 추천/완료 · 터치 반응. **카드 전체를 색칠하지 않는다.** */
.pg-overlay[data-art="carousel"]{ --pg-ico-bg:rgba(216,150,172,.16); --pg-ico-fill:rgba(232,180,200,.34); --pg-ico-line:#b06f8b; --pg-cta-bg:rgba(216,150,172,.13); }
.pg-overlay[data-art="slide"]   { --pg-ico-bg:rgba(120,186,200,.16); --pg-ico-fill:rgba(150,205,214,.34); --pg-ico-line:#4f8a97; --pg-cta-bg:rgba(120,186,200,.13); }
.pg-overlay[data-art="fountain"]{ --pg-ico-bg:rgba(112,180,196,.16); --pg-ico-fill:rgba(196,229,234,.46); --pg-ico-line:#4d8794; --pg-cta-bg:rgba(112,180,196,.13); }
.pg-overlay[data-art="arcade"]  { --pg-ico-bg:rgba(158,134,196,.16); --pg-ico-fill:rgba(201,188,228,.40); --pg-ico-line:#7059a4; --pg-cta-bg:rgba(158,134,196,.13); }
.pg-overlay[data-art="tree"]    { --pg-ico-bg:rgba(138,172,118,.17); --pg-ico-fill:rgba(207,227,196,.46); --pg-ico-line:#5d8150; --pg-cta-bg:rgba(138,172,118,.13); }

/* ── §행운분수 UI 개편(2026-09-06 1차 + 2차 재감리) ──────────────────────
   공용 배경(크림)·테두리(--vg-line, 샴페인골드에 가깝다)는 다섯 시설이 같이 쓰는 값이라
   그대로 둔다. 이 시설만: ① 패널 배경 톤을 크림→아쿠아로(완전 불투명 — 재감리 §1),
   ② 잉크 위계를 다시 가른다 — 본문은 짙은 남청/차콜, 아쿠아/민트는 포인트에만,
   샴페인골드는 [행운 강조]에만, 라벤더는 보조 메타에만(재감리 §5, 청록 일색 금지). */
.pg-overlay[data-art="fountain"] .pg-panel{
  /* ★ 재감리 §1 — 예전 값(rgba(...,.6))이 반투명이라 패널 뒤 지도(하루 말풍선·다른 시설
     이름표)가 비쳐 보였다(사람 실측). 그라데이션 둘째 색도 **완전 불투명**이라야 한다. */
  background:linear-gradient(165deg, var(--vg-cream, #f8ecd9), #dcedf0 82%);
}
.pg-overlay[data-art="fountain"] .pg-panel h2,
.pg-overlay[data-art="fountain"] .pg-item-ttl{ color:#2b3245; }              /* 짙은 남청/차콜 — 제목 */
.pg-overlay[data-art="fountain"] .pg-panel .pg-sub{ color:#4a5568; }         /* 짙은 남청/차콜 — 본문 카피 */
.pg-overlay[data-art="fountain"] .pg-subcopy{ color:#3f707a; }              /* 아쿠아 포인트는 서브카피 한 줄만 */
.pg-overlay[data-art="fountain"] .pg-item-sub{ color:#5a6472; }
.pg-overlay[data-art="fountain"] .pg-item-meta{ color:#8073a8; }            /* 라벤더 — 보조 메타("약 1분") */
.pg-overlay[data-art="fountain"] .pg-price-tag{ background:rgba(232,196,118,.24); color:#8a6a1e; }  /* 샴페인골드 — 행운 강조 배지 */
.pg-overlay[data-art="fountain"] .pg-footnote{ color:#4a5568; }

/* ── §행운분수 재감리 §2 — Hero 비주얼(패널 위 분수 아이콘)을 대표 비주얼로 키운다 ──
   기존 78px(§4 정본)의 약 2.2배. 카드가 2열로 줄어 확보된 세로 여백 안에서 키운다
   (재감리 §7 — 패널이 화면 대부분을 덮지 않게). 물빛 sparkle 은 아주 작게 둘만(과한 파티클 금지). */
.pg-overlay[data-art="fountain"] .pg-art{
  position:relative; width:172px; height:172px; margin:-6px auto 4px;
}
.pg-overlay[data-art="fountain"] .pg-art::before,
.pg-overlay[data-art="fountain"] .pg-art::after{
  content:""; position:absolute; width:5px; height:5px; border-radius:50%;
  background:#eaf7f9; box-shadow:0 0 6px 1px rgba(196,229,234,.9);
  animation:pgf-hero-spark 2.4s ease-in-out infinite;
}
.pg-overlay[data-art="fountain"] .pg-art::before{ top:18%; left:22%; animation-delay:0s; }
.pg-overlay[data-art="fountain"] .pg-art::after{ top:28%; right:20%; animation-delay:.8s; }
@keyframes pgf-hero-spark{ 0%,100%{ opacity:0; transform:scale(.6); } 50%{ opacity:1; transform:scale(1); } }
@media (prefers-reduced-motion: reduce){
  .pg-overlay[data-art="fountain"] .pg-art::before,
  .pg-overlay[data-art="fountain"] .pg-art::after{ animation:none; opacity:.7; }
}
body.has-banner-ad .pg-overlay[data-art="fountain"] .pg-art{ width:132px; height:132px; }

/* ── §행운분수 재감리 §3·§4 — 두 콘텐츠를 동등한 2열 카드로 ───────────────
   기존 `.pg-menu-item`(가로 줄) 마크업은 그대로 두고(§17 데이터만 다르다), 이 시설만
   세로 카드 2열로 다시 짠다. 카드 전체가 이미 <button> 이라 그 자체가 CTA다 —
   그래서 화살표 알약(.pg-item-cta)은 감춘다(사람 지시 "큰 CTA 버튼을 또 넣지 않는다"). */
.pg-overlay[data-art="fountain"] .pg-menu-list{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.pg-overlay[data-art="fountain"] .pg-menu-item{
  flex-direction:column; align-items:center; text-align:center; gap:6px;
  min-height:150px; padding:16px 12px 14px; justify-content:flex-start;
}
.pg-overlay[data-art="fountain"] .pg-item-ico{ width:44px; height:44px; border-radius:14px; }
.pg-overlay[data-art="fountain"] .pg-item-ico svg{ width:24px; height:24px; }
.pg-overlay[data-art="fountain"] .pg-item-txt{ width:100%; }
.pg-overlay[data-art="fountain"] .pg-item-foot{ justify-content:center; }
.pg-overlay[data-art="fountain"] .pg-item-cta{ display:none; }

/* ── §7 카드 터치 — 손으로 만지는 작은 그림책 ───────────────────────
   150~200ms · 아주 미세하게 눌리고 accent 가 살짝 배어난다.
   ★ bounce·glow·게임 버튼 효과를 쓰지 않는다(§7 마지막 셋). */
.pg-menu-list button:active{
  transform:scale(.988);
  background:var(--pg-cta-bg);
  border-color:var(--pg-ico-line);
}

/* ── §8 오늘의 추천 · §9 완료 — 한 팝업에 추천은 하나뿐 ─────────────
   ★ 완료 카드가 [꺼진 것] 처럼 보이면 안 된다(§9) — 흐리게 하지 않고,
     테두리와 작은 표만 다르게 둔다. 다시 눌러 또 할 수 있다. */
.pg-menu-list button.is-today{
  border-color:var(--pg-ico-line);
  background:linear-gradient(180deg, rgba(255,255,255,.86), var(--pg-cta-bg));
}
.pg-today-tag, .pg-done-tag{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:3px;
  font-size:.62rem; font-weight:700; letter-spacing:.04em;
  padding:2px 7px; border-radius:999px; line-height:1.6;
}
.pg-today-tag{ background:var(--pg-ico-line); color:#fffdf8; }
.pg-done-tag { background:var(--pg-cta-bg); color:var(--pg-ico-line); }

/* ── §21 포춘나무 — [고민저장소]·[보관함] 은 시간이 아니라 갈래다 ──────
   원문: "약 1분 같은 시간 메타정보와 동일한 위치/스타일로 보여 의미가 혼동될 수 있다."
   그래서 시간(.is-time)은 그대로 두고, 갈래(.is-tag)는 **작은 태그 꼴**로 갈라 준다. */
.pg-item-meta.is-tag{
  display:inline-block; margin-top:5px;
  padding:2px 8px; border-radius:6px;
  background:rgba(120,96,54,.09); color:#8a7350;
  font-size:.68rem; font-weight:600; letter-spacing:.01em;
}

/* ── §12 광고 분리 — 콘텐츠와 광고가 한 덩어리로 안 보이게 ───────────
   원문: "콘텐츠 마지막 → 16~20px 여백 → subtle divider → 광고 영역"
   배너는 네이티브 오버레이라 시트 안에 없다. 그래서 시트 **바닥에 선 하나**를 두어
   [여기서 앱이 끝나고 아래는 광고다] 를 눈으로 가른다. 광고를 지우지 않는다(§12 첫 줄). */
body.has-banner-ad .pg-panel::after{
  content:""; display:block;
  margin:18px calc(-22px) 0;                    /* 좌우 padding 을 되돌려 시트 폭 전체로 */
  height:1px; background:rgba(120,96,54,.16);
}

@media (prefers-reduced-motion: reduce){
  .pg-menu-list button:active{ transform:none; }
}

/* ── PHASE 2 보정 (브라우저 검수에서 잡은 넷) ────────────────────────
   411x903 · 배너 64px · 루트 글꼴 20px(폰 실측 배율) 로 재현해서 잡았다. */

/*  ① 스티커 크기의 정본은 여기다. 앞 절의 `body.has-banner-ad .pg-art{70px}` 가
       특이도(0,2,0)로 PHASE 2 의 `.pg-art{78px}`(0,1,0)를 이겨 67px 로 나왔다.
       배너가 있어도 스티커는 줄이지 않는다 — §1 이 정한 [보이는 크기 65~75px]는
       배너 유무로 달라질 값이 아니다. 자리는 아래 ②에서 카드로 만든다. */
body.has-banner-ad .pg-art,
.pg-art{ width:78px; height:78px; margin:0 auto 12px; }

/*  ② 카드를 조인다 — 4칸 시설(회전목마·게임존)이 큰 글꼴에서 넘쳐 스크롤이 생겼다.
       글자 크기(§3 위계)는 안 건드리고 여백만 줄인다(§23 [글씨를 작게 만들지 않는다]). */
.pg-menu-list{ gap:8px; }
.pg-menu-list button{ padding:10px 12px; min-height:60px; gap:11px; }
.pg-item-ico{ width:36px; height:36px; }
.pg-grip{ margin:0 auto 18px; }
.pg-free{ margin:0 0 18px; }

/*  ③ 배지가 제목을 셋째 줄로 밀지 않게 — 제목이 자기 칸 안에서 접히고 배지는 옆에 남는다.
       (실측: 포춘분수 첫 카드가 167px 까지 커졌다. 다른 카드는 91~113px.) */
.pg-item-head{ align-items:center; }
.pg-item-ttl{ flex:1 1 auto; min-width:0; }

/*  ④ 그래도 안 들어가면 스크롤은 자연스럽게 — 큰 글꼴 설정을 쓰는 사람에게
       [글씨를 줄여서] 맞추지 않는다(§23). 상한만 한 단계 넉넉히 준다. */
.pg-panel{ max-height:calc(78dvh + var(--banner-ad-height, 0px)); }

/* ── PHASE 2 보정 2 ──────────────────────────────────────────────────
   실기기 실측: 안드로이드 `font_scale = 1.3` · 루트 글꼴 20.8px. */

/*  ⑤ 배지가 제목을 둘째 줄로 밀지 않게 — 한 줄로 못박는다.
       `flex-wrap:wrap` 이 남아 있어 배지가 아래로 내려갔다(실측: 배지 top 31 · 머리 54px).
       제목은 `min-width:0` 이라 자기 칸 안에서 접힌다 — 잘리지 않는다. */
.pg-item-head{ flex-wrap:nowrap; }

/*  ⑥ 큰 글꼴(≥1.15배)에서는 스티커와 여백이 자리를 내준다 — 글자는 그대로 둔다(§23).
       이 규칙이 없으면 4칸 시설이 스크롤로 넘어가고, 있으면 한 화면에 들어온다. */
body.pg-bigfont .pg-art{ width:62px; height:62px; margin:0 auto 10px; }
body.pg-bigfont .pg-grip{ margin:0 auto 14px; }
body.pg-bigfont .pg-free{ margin:0 0 14px; }
body.pg-bigfont .pg-panel h2{ margin-bottom:5px; }

/* ── PHASE 2 보정 3 — 배지 자리 ──────────────────────────────────────
   제목 줄에 배지를 붙였더니 카드 높이가 93 / 119 / 142 / 169 로 제각각이 됐다.
   §4 는 [카드 내부 padding·간격·radius 통일]을 요구한다 — 배지 하나가 그걸 깨고 있었다.
   메타 줄로 내리니 배지가 있든 없든 줄 수가 같아진다. */
.pg-item-foot{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  margin-top:4px;
}
.pg-item-foot .pg-item-meta{ margin-top:0; }
.pg-item-ttl{ display:block; }

/* ════════════════════════════════════════════════════════════════════
   2026-09-01 블리드 원화(사람 결재) — 놀이터도 마을과 같은 카메라를 쓴다.
   ────────────────────────────────────────────────────────────────────
   원화가 playground-bleed-0901.jpg(1256x1907 · 놀이터 코어는 x 25~75% · y 18.5~68% 상자)로 바뀌었다.
   village-fullbleed.js 가 이 상자(.pg-map)를 원화 비율로 키워 화면을 덮게 px 로 놓는다 —
   그래서 지도는 흐름(flow)에서 빠져 fixed 여야 한다(village-fullbleed.css:52~62 와 같은 규칙).
   ★ village-fullbleed.css 를 통째로 넣지 않는 이유: 그 파일은 html{overflow:hidden} 을 걸어
     흐름 안에 남는 퀴즈 화면(.pg-quiz — playground.js:652 가 지도를 hidden 으로 바꾸고 보여 준다)의
     스크롤을 막는다. 필요한 것은 지도 한 상자뿐이라 그것만 가져온다.
   ★ 시설 좌표(.pg-attraction · .plaza)는 원화 % 그대로다 — 새 원화 기준으로 옮겨 적었다(playground.html). */
body.village-body .pg-map{
  position:fixed; left:0; top:0;
  width:100vw; height:100dvh;              /* 스크립트가 돌기 전 첫 프레임용. 이후 JS 가 px 로 덮어쓴다 */
  max-width:none; min-height:0; margin:0; flex-shrink:0;
  aspect-ratio:auto;                       /* village.css:146 의 1024/1536 잠금 해제 */
  border:none; border-radius:0; box-shadow:none;
  overflow:hidden; z-index:0;
}
body.village-body .pg-map[hidden]{ display:none !important; }   /* 퀴즈 화면일 때(playground.js:652) */

/* ════════════════════════════════════════════════════════════════════
   2026-09-05 (2차) 놀이터 UI 연결감·반응형 개선 §3 — 회청색 빈 영역 제거
   ────────────────────────────────────────────────────────────────────
   ★ 왜 카메라 배율(village-fullbleed.js)을 안 건드렸나 — 한 번 [항상 화면을 덮는다]로
     바꿔서 실제로 테스트했다가 **더 나쁜 결과**로 되돌렸다: 폴드 접힘(344px)처럼 좁은
     화면에서는 다섯 시설 중 둘(미끄럼틀·게임존)이 안전영역 밖으로 완전히 밀려나
     [화면에 없다] 가 됐다(요청 §2 [시설별 터치 기능 절대 유지] 위반 — 여백 제거보다
     훨씬 무겁다). 그래서 카메라 공식은 마을과 같은 값으로 되돌렸다(다섯 시설 항상 보장).
   ★ 대신 **이 프로젝트가 이미 쓰는 수법**으로 빈 곳을 없앤다 — 마을 지도의
     `블리드만들기()`(village-fullbleed.js)와 같은 발상: 같은 그림을 화면 전체에 깔되
     흐리게·확대해서, 진짜 지도가 못 덮는 위·아래(또는 좌·우) 띠에도 [같은 그림의 연장]이
     보이게 한다. 마을의 그 함수는 `<img class="vg-art">` 를 복제하는데 놀이터 배경은
     `<img>` 가 아니라 CSS `background-image`(`--pg-art`)라 그 함수가 못 붙는다
     (`블리드만들기()` 안의 `if (!원본) return;`). 그래서 여기서는 새 DOM 하나 없이
     `body::before` 의사요소로 **같은 변수(`--pg-art`)** 를 다시 그린다 — 이미지 자산을
     새로 만들지 않는다(요청 §12 "배경 이미지를 새로 생성하거나 교체하지 않는다").
   ★ 이 층은 흐릿하므로 시설이 겹쳐 보여도 헷갈리지 않는다 — 진짜 시설(선명한 `.pg-map`)이
     항상 그 위에 덮인다(z-index 로 아래에 둔다). 순수 검정·순수 회색이 아니라 [같은 밤
     그림의 흐린 연장]이라 [원본이 다른 화면으로 이어졌다]는 인상을 준다(요청 §3). */
/* 2026-09-11 [놀이터 광장 FULL SCREEN WORLD 전환] §1·§3 로 여기 있던 `#pg-ground-extend`
   (같은 원화의 분수 아래 지면 조각을 반복해 붙이던 임시 우회)는 2026-09-12 지웠다 —
   수작업_대장 #105 도착본(진짜 하단 확장 원화, playground.css:33 의 -20260912.jpg)이
   그 구간을 실제 그림으로 덮어 더 필요 없다. 아래 `::before` 블러 필러(§11)는 이미지
   로드 실패 대비 안전망이라 그대로 남긴다. */

body.village-body.premium-hud::before{
  content:""; position:fixed; inset:0; z-index:-1;
  /* 2026-09-11 — [앱 전체 브라운/황갈색 플래시] 신고 재조사에서 찾은 실체: 이 배경의
     background-color 가 #c9a882(탄/황갈색)였다. `--pg-art`(playground.css:33)는 이미지
     URL 이라 파일이 뜨기 전까지는 이 color 만 화면 전체(position:fixed;inset:0)에 깔린다
     — village-fullbleed.js 가 `.pg-map` 크기를 잡기 전 첫 프레임에 이 층만 보이면 그게
     바로 [브라운 플래시]다. `.pg-map`(playground.css:36)·`.village-map`(village.css:162)
     이 이미 같은 상황에서 쓰는 다크 네이비 #100c17 로 맞춘다 — 그러면 이미지가 늦게 떠도
     이 앱의 바탕색(밤하늘)과 같은 톤이라 [플래시]가 아니라 [자연스러운 전환]으로 읽힌다. */
  background:#100c17 var(--pg-art) center/cover no-repeat;
  /* 2026-09-10(6차) — 배경이 밤(어두운 원화)에서 낮(밝은 노을 원화)으로 바뀐 뒤에도
     이 블리드 필터는 야간용 그대로였다(brightness .72 — 어둡게 죽인다). 그 결과 이미
     차분한 색인 이 그림의 맨 아래(돌길 그늘) 가장자리가 블러+추가 감광이 겹쳐 [질감
     없는 짙은 갈색 박스]로 보였다 — 신고된 [하단 갈색/회색 영역]의 실체다. 밝기를
     원래 그대로 두고 채도만 살짝 올려, 블러된 가장자리도 [같은 낮 그림의 연장]으로
     읽히게 한다(이미지 교체·새 색 만들기 없음 — 같은 --pg-art, 필터 값만 조정). */
  filter:blur(24px) saturate(1.12);
  transform:scale(1.16);              /* 블러가 가장자리를 파먹는 만큼 여유를 둔다 */
  pointer-events:none;
}

/* ════════════════════════════════════════════════════════════════════
   2026-09-05 놀이터 배경·UI 개선 — 입구(entry-scene.js)와 세계관 통일
   ────────────────────────────────────────────────────────────────────
   요청 §4·§5·§7·§8. 위 절들(2026-08-27~31)이 이미 [원화 위에 자연스럽게]란
   방향으로 아이보리 계열을 골라 뒀다 — 이번은 그 반대 방향(입구와 같은 짙은 남색+금색)이
   사람의 새 지시다. **아이보리 규칙을 지우지 않는다** — 파일 뒤에 새 규칙을 얹어
   그 규칙을 이긴다(이 파일이 이미 그렇게 겹쳐 온 방식과 같다 · §14 [전역 스타일 안 번지게]는
   `.pg-panel`/`.pg-menu-list`(시설 상세 시트)는 이번에 손대지 않아서 자동으로 지켜진다 —
   그 시트는 여전히 크림이다, 요청 §10 은 지도 화면만 다룬다).
   ════════════════════════════════════════════════════════════════════ */

/* ── 시설 이름표 — 2026-09-12 [VISUAL POLISH] §3 사람 재지시로 되돌린다.
   "짙은 남색+흰 글자"는 [검은 메뉴 버튼]처럼 읽힌다는 지적 — warm ivory translucent +
   champagne gold thin border + deep plum text로 [마을 안에 뜬 location label] 톤으로.
   ★ 어두운 배경 지점이 실기기에서 가독성 문제로 확인되면 그 핀만 아래 예외 규칙으로
     dark translucent glass 로 되돌릴 수 있다(§3 마지막 — 지금은 다섯 핀 전부 동일). */
.pg-attraction .shop-neon{
  background:rgba(255,251,244,.90);
  border-color:rgba(201,169,97,.62);
  color:#4a3550;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 2px 8px rgba(90,60,40,.18);
}
.pg-ico{ color:#b08a3e; opacity:.94; }           /* 아이보리 위라 아이콘을 차분한 골드로 되돌린다 */
.pg-attraction.is-picked .shop-neon{
  background:rgba(255,253,248,.97);
  box-shadow:0 0 0 3px rgba(214,182,116,.30), 0 4px 14px rgba(90,60,40,.22);
}
/*  완료 표시(§22) — 대형 체크 아이콘 대신 이름표 옆 아주 작은 금별 하나.
    JS(완료표시그리기())가 `.pg-attraction`에 `is-done-today`만 토글한다. */
.pg-attraction .pg-done-check{
  margin-left:3px; color:#c9a961; font-size:.68em; vertical-align:middle;
}

/* ════════════════════════════════════════════════════════════════════
   2026-09-05 (2차) 놀이터 UI 연결감·반응형 개선 §5 — 이름표 방향·연결점
   ────────────────────────────────────────────────────────────────────
   ★ 왜 잘렸었나 — `.pg-attraction`(버튼)은 폭 88px 로 시설 좌표에 **중심** 정박한다
     (playground.css:53 · `transform:translate(-50%,-50%)`). 그 안의 `.shop-neon`(라벨
     알약)은 보통 인라인 흐름대로 버튼의 **왼쪽 끝부터** 오른쪽으로 자라는데, 라벨 폭이
     88px 를 넘으면(예: "고민 미끄럼틀" 실측 102px) 화면 오른쪽 가장자리 시설(미끄럼틀·
     게임존, x87%)에서는 그 초과분이 **화면 밖으로 튀어나갔다**(2026-09-05 412×915 실측:
     라벨 오른쪽 끝 420px > 화면 폭 412px).
   ★ 고치는 법 — 버튼(터치 영역·글로우 위치·오늘의 추천 배지는 전부 이 버튼 기준이라
     하나도 안 건드린다) 대신 **라벨의 정렬 방향만** 뒤집는다.
   ★★ `text-align:right` 로 처음 시도했다가 **효과가 전혀 없었다**(2026-09-05 실측 —
     `<button>` 은 크로미움이 내부적으로 콘텐츠를 앵커 박스로 감싸 렌더링해서, 부모에
     `text-align`(어떤 값이든 · left/right/center 전부 동일하게 무시됨을 실측으로 확인)을
     줘도 자식 정렬이 안 바뀐다 — CSS 문법 오류가 아니라 `<button>` 고유의 내부 렌더링
     경로다. 그래서 버튼을 **명시적으로 flex 컨테이너로 선언**해 그 내부 경로를 대신한다
     — 우리가 직접 flex 를 선언하면 `justify-content` 가 정상적으로 먹는다. */
.pg-attraction{ display:flex; align-items:center; justify-content:flex-start; }
.pg-attraction.pg-flip{ justify-content:flex-end; }
/* 아이콘이 계속 [시설에 가장 가까운 쪽]에 남게 순서를 뒤집는다 — 라벨이 왼쪽으로
   자라면 시설(오른쪽 끝)에 가까운 것은 아이콘이 아니라 글자여야 부자연스럽지 않다.
   DOM 순서는 그대로 두고(마크업·접근성 라벨은 안 바꾼다) 시각 순서만 CSS 로 뒤집는다. */
.pg-attraction.pg-flip .shop-neon{ flex-direction:row-reverse; }
/* 오늘의 추천 배지(§6)는 `.shop-neon` 기준으로 이미 중앙 정렬이라(위 `left:50%`) 라벨이
   어느 쪽으로 펼쳐지든 저절로 그 라벨 위 가운데에 남는다 — 이 규칙을 따로 안 건드린다. */

/* ── 이름표 ↔ 시설 연결점 — 작은 점 하나(요청 §5 "방향을 가리키는 꼬리 또는 연결점") ──
   ★ 버튼(`.pg-attraction`)의 정중앙에 둔다 — 라벨이 좌우 어느 쪽으로 펼치든 이 점의
     자리는 안 바뀐다(버튼 자체는 이 절에서 안 건드리는 요소라 항상 시설의 실제 좌표에
     그대로 있다). `.pg-attraction.is-picked::after`(글로우)와 같은 자리·같은 좌표계를
     쓰되 다른 이름이라 서로 안 덮는다. */
.pg-attraction::before{
  content:""; position:absolute; left:50%; top:50%;
  width:5px; height:5px; margin:-2.5px 0 0 -2.5px;
  border-radius:50%; pointer-events:none; z-index:1;
  background:var(--pg-gold, #d7b56d);
  box-shadow:0 0 4px rgba(215,181,109,.65);
}

/* ── 오늘의 추천 — 점 대신 작은 금색 캡슐, 라벨 위에(요청 §6) ─────────
   ★ 새 DOM 을 안 만든다 — `.shop-neon::before` 생성 콘텐츠로 라벨 **위**에 띄운다.
     자리는 `position:absolute`(부모 `.pg-attraction` 은 이미 위치 기준점이다 · playground.css). */
.pg-attraction.is-today .shop-neon{ position:relative; }
.pg-attraction.is-today .shop-neon::after{
  content:"오늘의 추천";
  position:absolute; left:50%; bottom:100%; transform:translateX(-50%);
  margin-bottom:5px;
  width:auto; height:auto; border-radius:999px; background:none;
  padding:2px 9px; font-size:.6rem; font-weight:700; letter-spacing:.04em;
  color:#3d2c0c; background:linear-gradient(180deg,#f3d896,#d9a441);
  white-space:nowrap; animation:none; box-shadow:0 2px 6px rgba(10,6,20,.3);
}

/* ── 하루 — 2026-09-06 개편으로 floating NPC + 말풍선이 됐다. 이 절의 값은
   맨 끝 [놀이터 UI 개편] 절이 최종으로 다시 덮는다 — 거기가 정본이다. ── */
.pg-haru-say{
  display:block; font-size:.86rem; line-height:1.4;
  /* §8 마지막 — 대사가 길어지면 두 줄까지만, 그 뒤는 카드가 커지는 대신 잘라 안전하게 */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* ── 제목이 길어져 옆 pill 과 겹치는 것을 막는다(요청 §4 마지막 — 작은 화면에서도
   안 잘리게) ───────────────────────────────────────────────────────────
   ★ [놀이터]→[운명의 놀이터]로 늘면서 `left:0;right:0`(playground-ui.css:39) 가 중앙 100%
     폭을 다 쓰다가 오른쪽 재화 pill 과 겹쳤다(2026-09-05 412x915 실측).
   ★ 2026-09-05(2차) — 고정 px(76/96/68/88)를 **절대 좌표로 못박지 않는다**(요청 §4 마지막
     "절대 좌표로만 고정하지 않는다"). [‹ 마을] pill 과 은화 위젯은 둘 다 글자 길이·글꼴
     확대 설정에 따라 폭이 바뀐다 — 고정값은 은화가 10008 처럼 다섯 자리로 늘면 다시
     겹친다(2026-09-05 v0.1.250 실기기 실측으로 확인한 문제 그대로). `playground-ui.js`
     의 헤더레이아웃() 이 두 pill 을 실측해 이 두 변수를 매번 다시 채운다 — 값이 아직
     없을 때(스크립트가 돌기 전 첫 프레임)만 아래 폴백을 쓴다. */
body.village-body .village-title{
  left:var(--pg-title-left, 76px); right:var(--pg-title-right, 96px);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* 2026-09-05(3차) — 뒤로가기 라벨이 길어(예: [‹ 놀이터]) 제목 칸이 좁아질 때
   playground-ui.js 헤더레이아웃() 이 재는 두 눈금. 글자를 줄이는 쪽이 점 세 개(ellipsis)
   보다 낫다 — 전체 낱말이 보여야 무슨 화면인지 안다. */
body.village-body .village-title.pg-title-tight{ font-size:.8rem; letter-spacing:.03em; }
body.village-body .village-title.pg-title-tighter{ font-size:.7rem; letter-spacing:.01em; }
@media (max-width:360px){
  body.village-body .village-title{ font-size:.78rem; }
}

/* ── 재화 표시 — 은화 위젯을 헤더 줄로 옮기고 같은 언어로(요청 §4) ──────
   ★ 위젯 자체는 `coins.js` 가 만든다(실제 잔액 데이터) — 새 표시를 만들지 않는다.
   ★ "별" 재화는 이 프로젝트에 없다(전체 검색 0건) — 시안의 두 번째 숫자는 지어내지 않고
     비운다. 은화 하나만 진짜 데이터로 보여 준다. */
body.village-body.premium-hud #tarot-coin-widget{
  position:fixed; z-index:22;
  top:var(--pg-row1); right:calc(12px + 36px + 8px);   /* ⓘ(36px, right:12px) 왼쪽에 나란히 */
  min-height:36px; height:36px; padding:0 12px;
  border:1px solid var(--pg-line); border-radius:999px;
  background:linear-gradient(180deg, var(--pg-hi), transparent 42%), var(--pg-glass);
  color:var(--pg-ink); box-shadow:var(--pg-sh);
  font-size:.78rem;
}
body.village-body.premium-hud #tarot-coin-widget .coin-countdown{ display:none; }   /* [시간으로 쌓이던] 옛 표시 — 이 화면엔 안 어울린다 */
body.village-body.premium-hud #tarot-coin-widget .coin-streak:not(.hidden){
  border-left-color:var(--pg-line); color:#d9a441;
}
/* 좁은 화면 — 재화 패널의 간격·글자부터 줄인다(요청 §4 — 숫자 축약은 그다음 수단).
   `playground-ui.js` 의 헤더레이아웃() 이 이 규칙이 적용된 **뒤의** 실측 폭으로
   --pg-title-left/right 를 계산하므로 순서를 반대로 둘 필요가 없다(둘 다 CSS 캐스케이드
   시점이 아니라 레이아웃 시점에 읽힌다). */
@media (max-width:360px){
  body.village-body.premium-hud #tarot-coin-widget{
    padding:0 8px; font-size:.68rem; gap:4px;
  }
}

@media (prefers-reduced-motion: reduce){
  .pg-attraction.is-today .shop-neon::after{ animation:none; }
}

/* ════════════════════════════════════════════════════════════════════
   2026-09-05(2차) 회전목마 화면 연결감 개선
   ────────────────────────────────────────────────────────────────────
   사람 지시 원문: "전혀 다른 화면으로 이동한 느낌이 아니라 같은 놀이터 안에서
   회전목마 앞으로 가까이 이동한 것처럼 연결한다." 시안(이미지 3)은 구조·분위기
   참고일 뿐이라 통째로 넣지 않고, 배경/일러스트는 **확정 원화·기존 자산을 그대로
   재사용**해 컴포넌트로 짠다(§14).
   ★ 배경·시설 좌표는 여전히 한 픽셀도 안 건드린다.
   ════════════════════════════════════════════════════════════════════ */

/* ── §11 딤·확대 — [다른 화면]이 아니라 [같은 곳을 가까이서 본다] ─────────
   앞판은 오버레이가 화면 전체를 40% 검게+흐리게 덮어, 시트 위로 보이는 놀이터
   조각까지 흐려 보였다(이미지 1 실제 화면 — 위쪽 산이 뿌옇다). 위는 거의 안 덮고
   시트에 가까워질수록만 짙어지는 그라데이션으로 바꾼다 — 배경이 원래 색 그대로
   보여야 [같은 곳]으로 읽힌다. */
.pg-overlay{
  background:linear-gradient(180deg,
    rgba(23,23,47,0) 0%, rgba(23,23,47,.08) 42%, rgba(23,23,47,.30) 100%);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}

/* [화면이 회전목마 쪽으로 아주 살짝 확대] — `.pg-map` 은 카메라 엔진(village-fullbleed.js)이
   width/height/left/top(px) 로만 다루는 월드 상자라 transform 을 못 쓴다(그 파일 §18 —
   mix-blend-mode:screen 광원이 새 스택 문맥에 섞여 밤 조명이 깨진다고 명시돼 있다).
   그래서 **배경 그림 자체**(background-size/position)만 살짝 키운다 — 상자 크기·좌표는
   그대로다. 자리는 playground.js 시설반응() 이 누른 시설의 %(left/top)를 그대로 넣는다. */
.pg-map{
  background-position:var(--pg-zoom-x, center) var(--pg-zoom-y, center);
  transition:background-size .42s cubic-bezier(.2,.8,.3,1), background-position .42s cubic-bezier(.2,.8,.3,1);
}
body.pg-zoomed .pg-map{ background-size:122%; }
@media (prefers-reduced-motion: reduce){
  .pg-map{ transition:none; }
  body.pg-zoomed .pg-map{ background-size:cover; background-position:center; }   /* §12 확대 없이 페이드·시트만 */
}

/* ── §6 회전목마 대표 영역 — 확정 야간 배경을 확대·크롭해 재사용 ──────────
   새 시설(관람차 등)을 그리지 않는다 — 같은 파일(playground-night-20260905.jpg)의
   회전목마 자리(좌상단, playground.html 의 left:12%/top:35%)를 확대해 깐 뒤,
   그 위에 이미 있는 회전목마 대표 그림(pgart-carousel · carousel.png)을 얹는다.
   [자리]만 여기서 만든다 — 그림은 새로 만들지 않는다. */
.pg-overlay[data-art="carousel"] .pg-art{
  width:calc(100% + 44px); height:180px;
  margin:2px -22px 14px;
  border-radius:20px 20px 0 0;
  display:block; position:relative; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(23,23,47,.06) 0%, rgba(36,26,58,.58) 60%, rgba(252,247,238,.98) 100%),
    url("assets/village/playground-night-20260905.jpg") 14% 30%/320% no-repeat;
  box-shadow:inset 0 -16px 22px -16px rgba(23,23,47,.5);
}
/* 아주 작은 별빛 — 그림을 새로 그리지 않고 box-shadow 점 넷으로 반짝임만 얹는다 */
.pg-overlay[data-art="carousel"] .pg-art::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(1.6px 1.6px at 20% 22%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1.4px 1.4px at 78% 16%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1.8px 1.8px at 60% 28%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(1.3px 1.3px at 34% 38%, rgba(255,255,255,.65), transparent 60%);
}
/* 회전목마 아래 부드러운 달빛 — 그림 없이 방사형 그라데이션 한 겹 */
.pg-overlay[data-art="carousel"] .pg-art::after{
  content:""; position:absolute; left:50%; bottom:8px; transform:translateX(-50%);
  width:118px; height:24px; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,244,214,.55), rgba(255,244,214,0) 72%);
}
.pg-overlay[data-art="carousel"] .pg-art-svg,
.pg-overlay[data-art="carousel"] .pg-art-img{
  position:absolute; left:50%; right:auto; top:auto; bottom:14px;
  width:110px; height:110px; margin:0;
  transform:translateX(-50%);
  filter:drop-shadow(0 10px 14px rgba(20,12,34,.4));
}
.pg-overlay[data-art="carousel"] .pg-art.has-img .pg-art-svg{ visibility:hidden; }
.pg-overlay[data-art="carousel"] .pg-close{
  top:10px; right:10px; opacity:.92; color:#FFF8ED;
  background:rgba(23,23,47,.38); border-radius:50%;
}
@media (max-height:700px){
  .pg-overlay[data-art="carousel"] .pg-art{ height:146px; }
  .pg-overlay[data-art="carousel"] .pg-art-svg,
  .pg-overlay[data-art="carousel"] .pg-art-img{ width:88px; height:88px; bottom:10px; }
}
body.has-banner-ad .pg-overlay[data-art="carousel"] .pg-art{ height:150px; }

/* ── §6 문구 — 회전목마 시트 전용(다른 시설은 안 건드린다) ────────────── */
.pg-overlay[data-art="carousel"] .pg-panel h2{ margin-top:2px; }
.pg-overlay[data-art="carousel"] .pg-free{
  display:table; margin:0 auto 16px; padding:5px 13px;
  border:1px solid rgba(215,181,109,.55); border-radius:999px;
  background:rgba(215,181,109,.14); color:#8a6a2e; font-weight:600;
}

/* ── §7 메뉴별 색상 — 카드마다 다른 accent(값이 있는 항목만) ──────────────
   토큰은 요청 §10 값 그대로: purpleAccent #7550AD · roseAccent #C95073 ·
   mintAccent #399A96 · honeyAccent #B9822E. 쓰는 자리는 기존 관행과 같다
   (아이콘 칸 · CTA) — 카드 전체를 칠하지 않는다. */
.pg-menu-list button[data-accent="lavender"]{ --pg-ico-bg:rgba(117,80,173,.14); --pg-ico-fill:rgba(117,80,173,.28); --pg-ico-line:#7550AD; --pg-cta-bg:rgba(117,80,173,.13); }
.pg-menu-list button[data-accent="rose"]    { --pg-ico-bg:rgba(201,80,115,.13); --pg-ico-fill:rgba(201,80,115,.26); --pg-ico-line:#C95073; --pg-cta-bg:rgba(201,80,115,.13); }
.pg-menu-list button[data-accent="mint"]    { --pg-ico-bg:rgba(57,154,150,.14); --pg-ico-fill:rgba(57,154,150,.28); --pg-ico-line:#399A96; --pg-cta-bg:rgba(57,154,150,.13); }
.pg-menu-list button[data-accent="honey"]   { --pg-ico-bg:rgba(185,130,46,.15); --pg-ico-fill:rgba(185,130,46,.30); --pg-ico-line:#B9822E; --pg-cta-bg:rgba(185,130,46,.14); }
/* §7 버튼 규칙 — 회전목마만 CTA 를 진한 알약(금색 얇은 외곽선)으로. 다른 네 시설은
   기존 §5(옅은 10% 알약)를 그대로 쓴다 — 전역 `.pg-item-cta` 는 안 건드린다. */
.pg-overlay[data-art="carousel"] .pg-menu-list button[data-accent] .pg-item-cta{
  background:var(--pg-ico-line); color:#FFF8ED;
  border:1px solid rgba(215,181,109,.6);
  padding:7px 13px 7px 14px;
}

/* ── §8 오늘의 랜덤 케미 — 티켓형 카드 (일반 카드와 다른 모양) ──────────── */
/* ★ 2026-09-05(3차 실기기 실측) — `.pg-ticket`(0,1,0)만으로는 §4 카드 공통 규칙
   `.pg-menu-list button{background:...크림...}`(680행 · 0,1,1)에 진다 — 이 티켓도
   `<button>` 태그라 그 규칙을 그대로 맞는다. 실기기에서 진한 남색 배경이 크림으로
   덮여 밝은 글자(#FFF8ED)가 밝은 바탕 위에 얹혀 거의 안 보였다(실측 스크린샷 확인).
   선택자를 `.pg-menu-list button.pg-ticket`(0,2,1)로 올려 반드시 이기게 한다. */
.pg-menu-list button.pg-ticket{
  display:flex; align-items:center; gap:12px; width:100%;
  margin-top:2px; padding:12px 15px; min-height:64px;
  border-radius:16px; border:1px solid rgba(215,181,109,.55);
  background:linear-gradient(135deg,#17172F,#242044 65%);
  color:#FFF8ED; text-align:left; cursor:pointer; position:relative;
  font-family:inherit; box-shadow:none;
}
.pg-ticket-art{
  flex:0 0 auto; width:40px; height:40px; display:flex; align-items:center; justify-content:center;
}
.pg-ticket-art svg{ width:100%; height:100%; display:block; }
.pg-ticket-div{
  flex:0 0 auto; align-self:stretch; width:0;
  border-left:2px dashed rgba(255,248,237,.32);
}
.pg-ticket-txt{ flex:1; min-width:0; }
.pg-ticket-head{ display:flex; align-items:center; gap:7px; }
.pg-ticket-ttl{ font-size:.95rem; font-weight:700; color:#FFF8ED; }
.pg-ticket-new{
  flex:0 0 auto; font-size:.6rem; font-weight:700; letter-spacing:.05em;
  padding:2px 7px; border-radius:999px; background:#C95073; color:#FFF8ED;
}
.pg-ticket-sub{ display:block; margin-top:2px; font-size:.78rem; color:rgba(255,248,237,.78); }
.pg-ticket-cta{
  flex:0 0 auto; white-space:nowrap; font-size:.78rem; font-weight:700;
  padding:7px 13px 7px 14px; border-radius:999px;
  background:#D7B56D; color:#3E302B; border:1px solid rgba(255,248,237,.4);
}
/* §4 카드 공통 :active(0,2,1 — background:var(--pg-cta-bg) 로 밝게 바꾼다)가 티켓에도
   걸려 눌렀을 때 남색이 밝은 색으로 뒤집혔다 — 같은 이유로 선택자를 올려 이긴다. */
.pg-menu-list button.pg-ticket:active{ transform:scale(.988); background:linear-gradient(135deg,#17172F,#242044 65%); border-color:rgba(215,181,109,.75); }

/* ── 배너 있을 때 5칸(4카드+티켓)이 넘치는 것 고침 (2026-09-05 3차 · 실기기 SM-F966N 실측) ──
   원문(사람 신고): "하단 패널 전체 덮히지 않고 또 중간에 틈이 생기는데" · 실기기 CDP 로 재니
   `.pg-panel` clientHeight 784px vs scrollHeight 930px — **146px 초과**로 티켓 카드가
   광고 배너 보호 여백(`padding-bottom:100px`) 안쪽으로 밀려 들어가 광고와 겹쳐 보였다.
   원인은 티켓 카드(§8)를 다섯 번째 항목으로 추가하면서 그 높이만큼을 어디서도 안 줄인 것 —
   기존 `body.has-banner-ad` 압축 규칙(§PHASE2)은 **4카드 기준**으로만 맞춰져 있었다.
   ★ 시설 좌표·배경은 안 건드린다 — 이 시트 내부 여백·크기만 추가로 죈다(§21 과 같은 결).
   ★ 특이도를 `body.has-banner-ad .pg-overlay[data-art="carousel"] …` 로 높여 위 어떤
     일반 규칙보다도 확실히 이기게 한다(파일 순서에 기대지 않는다). */
body.has-banner-ad .pg-overlay[data-art="carousel"] .pg-art{ height:96px; margin-bottom:8px; }         /* 150→96 : -54 */
body.has-banner-ad .pg-overlay[data-art="carousel"] .pg-panel{ padding-top:6px; }
body.has-banner-ad .pg-overlay[data-art="carousel"] .pg-grip{ margin:0 auto 10px; }                     /* -8 */
body.has-banner-ad .pg-overlay[data-art="carousel"] .pg-panel h2{ margin:0 0 4px; }
body.has-banner-ad .pg-overlay[data-art="carousel"] .pg-free{ margin:0 0 8px; }                          /* -6~-16 */
body.has-banner-ad .pg-overlay[data-art="carousel"] .pg-menu-list{ gap:6px; }                            /* -8 (4칸) */
body.has-banner-ad .pg-overlay[data-art="carousel"] .pg-menu-list button{ padding:8px 12px; min-height:50px; } /* -14×4=-56 */
body.has-banner-ad .pg-overlay[data-art="carousel"] .pg-ticket{ margin-top:0; padding:8px 13px; min-height:48px; } /* -18 */
body.has-banner-ad .pg-overlay[data-art="carousel"] .pg-ticket-art{ width:32px; height:32px; }
/* 합계 약 -160px — 실측 초과분(146px)보다 14px 여유를 둔다. */

/* ── §13 접근성 — 포커스가 눈에 보여야 한다(색으로만 구분하지 않는다) ───── */
.pg-menu-list button:focus-visible,
.pg-menu-list button.pg-ticket:focus-visible{ outline:2px solid #D7B56D; outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  .pg-menu-list button.pg-ticket:active{ transform:none; }
}

/* ════════════════════════════════════════════════════════════════════
   운명의 회전목마 — 입구씬 전면개선 (2026-09-05 4차 · 사람 지시 전문)
   ────────────────────────────────────────────────────────────────────
   ★ 이 절 아래는 전부 `.pgcs`(playground-carousel-scene) 접두사 하나로 새로 짓는다.
     위쪽의 크림/베이지 팝업 규칙(§4~PHASE2)은 다른 네 시설 전용으로 그대로 둔다 —
     회전목마는 지시 §11 [브라운/베이지 금지]에 따라 완전히 다른 팔레트를 쓴다.
   ★ 색 팔레트(지시 §11): Deep Indigo · Midnight Purple · Lavender · Soft Pink ·
     Warm Cream · Soft Gold. 브라운은 쓰지 않는다.
   ════════════════════════════════════════════════════════════════════ */

/* ── 공용 시트 파츠 숨김 스위치 — playground.js 회전목마_공용파츠숨김/복원 이 켠다.
   기존 .pg-art/.pg-menu-list 등은 이미 자기 display 를 갖고 있어(캐스케이드 함정,
   이 파일 여러 곳의 [특이도로 이긴다] 주석과 같은 이유) 단순 [hidden] 속성으로는
   안 가려질 수 있다 — !important 로 확실히 지운다. */
#pg-menu-title.hidden, .pg-art.hidden, .pg-sub.hidden, .pg-menu-list.hidden,
.pg-free.hidden, .pg-grip.hidden, #pg-menu-close.hidden,
/* 2026-09-06(4차) 포춘나무 개편 중 발견 — .pg-subcopy/.pg-footnote 는 이 목록에 없어서
   [hidden] **속성**엔 반응해도(.pg-footnote[hidden]) `classList.add("hidden")` 로 켜는
   **클래스**엔 반응하지 않았다. 그래서 예: 행운분수(서브카피·풋노트 있음)를 본 뒤 회전목마·
   포춘나무(전체화면 게이트)를 열면 이전 시설의 글자가 헤더 위에 겹쳐 보였다(실측: 행운분수 →
   회전목마 전환). 이 목록에 두 클래스를 추가해 원인을 없앤다 — 다섯 시설 전부에 적용된다. */
.pg-subcopy.hidden, .pg-footnote.hidden{ display:none !important; }

/* ── 시트 껍데기 ───────────────────────────────────────────────────
   2026-09-10(2차) 사람 지시 [회전목마 최종 UI 개선] — "MASTER 자체가 화면
   공간이 되도록" · "MASTER 위에 동일한 회전목마 PNG를 중복 배치하지 않는다".
   ★ §11(위 2384행)에서 `.pg-overlay[data-art="carousel"]` 가 이미 이 시설
     전용 MASTER(scene-carousel-20260910.jpg)를 이 오버레이의 배경으로 건다.
     예전엔 패널이 `93dvh`(거의 풀스크린) + 그 안에 **또** `.pgcs-hero` 가
     `carousel.png` 스티커를 따로 띄워, 같은 회전목마가 두 번 보였다.
   ★ 패널 배경을 투명으로 비워 MASTER 가 패널 전체 뒤로 그대로 비치게 하고,
     실제 카드 내용을 담는 `.pgcs-body` 만 크림 카드로 따로 둔다(아래 §③).
     그러면 헤더~히어로 자리는 [MASTER 를 감상하는 자리]가 되고, 그 아래부터
     크림 카드가 시작된다 — 지시가 그린 [상단 / 중앙 MASTER / 그 아래] 구조. */
.pg-overlay.is-carousel-gate{
  align-items:stretch; padding:0;
  background:transparent;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.pg-overlay.is-carousel-gate .pg-panel{
  width:100%; max-width:none; margin:0;
  border-radius:0; border:0;
  background:transparent;
  box-shadow:none;
  height:100%; max-height:100%; min-height:0;
  padding:0; overflow:hidden; display:flex; flex-direction:column;
  animation:pgcs-panel-in .32s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes pgcs-panel-in{ from{ opacity:0; transform:translateY(4%) scale(.97); } to{ opacity:1; transform:none; } }

.pgcs{ display:flex; flex-direction:column; height:100%; min-height:0; color:#fbf1e0; font-family:inherit; }
.pgcs.hidden{ display:none; }

/* ── ① 헤더 — < 놀이터 · 제목 · 은화/정보 ─────────────────────────── */
.pgcs-head{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:12px 14px 10px; z-index:2; position:relative;
}
/* 2026-09-10(2차) — 히어로가 투명해져 MASTER 가 바로 비치므로, 흰 글자
   대비를 지킬 만큼만 헤더 뒤에 옅은 그라데이션을 깐다(§16 과도한 그림자 금지 —
   그래서 외곽선·강한 drop-shadow 대신 이 배경 한 겹만 쓴다). */
.pgcs-head::before{
  content:""; position:absolute; inset:-4px 0 -18px; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,14,36,.42) 0%, rgba(20,14,36,.18) 70%, transparent 100%);
}
.pgcs-back{
  flex:0 0 auto; min-height:34px; padding:0 10px 0 2px;
  background:none; border:0; color:#fbf1e0; font-weight:600;font-size:15px;line-height:1;font-family:inherit;
  display:inline-flex; align-items:center; gap:2px; opacity:.92;
}
.pgcs-back:active{ opacity:.65; }
.pgcs-title{
  flex:1; min-width:0; text-align:center;
  font-weight:700;line-height:1.2;font-family:inherit; letter-spacing:.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pgcs-hud{ flex:0 0 auto; display:flex; align-items:center; gap:6px; }
.pgcs-coin{
  font-size:.72rem; font-weight:600; padding:5px 9px; border-radius:999px;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.14);
  white-space:nowrap;
}
.pgcs-info{
  width:26px; height:26px; border-radius:50%; flex:0 0 auto;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.14);
  color:#fbf1e0; font-size:.74rem; line-height:1;
}
.pgcs-note{
  margin:0 14px 8px; padding:8px 12px; border-radius:12px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  font-size:.68rem; line-height:1.5; color:rgba(251,241,224,.85); text-align:center;
}
.pgcs-note[hidden]{ display:none; }

/* ── 스크롤 되는 몸통 — 헤더만 고정, 나머지는 안에서 스크롤 ─────────────
   2026-09-10(2차) — `display:flex` 를 더했다. `.pgcs-body`(아래 §③, 크림
   카드)가 `flex:1 1 auto` 로 커야 내용이 짧아도 카드 바닥까지 크림으로
   덮인다 — 안 그러면 카드 아래로 MASTER 가 다시 비쳐 [이미지-카드-이미지]
   샌드위치가 된다. */
.pgcs-scroll{
  flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column;
}

/* ── ② 히어로 — 이제는 [MASTER 를 감상하는 빈 자리]다 ─────────────────
   2026-09-10(2차) 지시 "MASTER 위에 동일한 회전목마 PNG를 중복 배치하지
   않는다" — 예전엔 여기서 `carousel.png`(작은 스티커)와 CSS 로 그린 달·별을
   또 띄워, 배경 MASTER(이미 밤하늘·달·회전목마가 다 있다)와 두 번 겹쳤다.
   지금은 배경·투명 — `.pg-overlay`(§11)의 MASTER 가 그대로 비친다.
   높이만 잡아 [MASTER 를 충분히 보여줄 자리]를 예약한다(하루 말풍선 자리도
   여기). `carousel.png`/달/별 DOM 은 playground.js 가 여전히 만들지만
   `display:none` 으로 지워 그림만 안 보이게 한다(JS 를 안 건드린다). */
.pgcs-hero{
  position:relative; height:30vh; min-height:180px; max-height:260px;
  display:flex; align-items:flex-end; justify-content:center;
  background:transparent;
  overflow:hidden;
}
.pgcs-carousel-img,
.pgcs-star,
.pgcs-moon{ display:none; }

/* ── 하루 — 회전목마 옆에 작게(지시 §3, 메인 캐릭터처럼 키우지 않는다) ──── */
.pgcs-haru{
  position:absolute; z-index:3; left:8%; bottom:8px;
  display:flex; align-items:center; gap:0; background:none; border:0; padding:0;
  animation:pgcs-fade-up .5s .5s cubic-bezier(.2,.8,.3,1) both;
}
.pgcs-haru img{
  width:38px; height:38px; border-radius:50%; object-fit:cover;
  border:2px solid rgba(251,241,224,.85); box-shadow:0 3px 10px rgba(0,0,0,.35);
}
.pgcs-haru-bubble{
  margin-left:8px; padding:7px 11px; border-radius:14px 14px 14px 3px;
  background:rgba(255,255,255,.94); color:#3a2a6b;
  font-size:.68rem; line-height:1.4; text-align:left; white-space:nowrap;
  box-shadow:0 3px 10px rgba(0,0,0,.25);
  max-width:min(58vw, 220px); white-space:normal;
}
.pgcs-haru.is-said .pgcs-haru-bubble{ background:rgba(255,244,214,.96); }

/* ── ③ 몸통 — 크림 카드(다른 네 시설과 같은 밝기 기준, 그대로 복제는 아님)
   2026-09-10(2차) 지시 — "포춘나무 화면의 밝고 동화적인 완성도를 기준으로
   삼되, 포춘나무 UI를 그대로 복제하지 않는다." 밝기·따뜻함만 맞추고,
   2열 관계 그리드·추천 리본·3열 보조칸이라는 회전목마만의 구성은 그대로 둔다. */
.pgcs-body{
  flex:1 1 auto;
  padding:18px 16px calc(22px + var(--banner-ad-height, 0px) + env(safe-area-inset-bottom, 0px));
  border-radius:26px 26px 0 0;
  background:linear-gradient(180deg, rgba(255,250,242,.97) 0%, rgba(253,244,248,.98) 100%);
  box-shadow:0 -8px 26px rgba(74,53,100,.14);
}
.pgcs-h2{ margin:0 0 4px; text-align:center; font-size:1.16rem; font-weight:700; color:#4a3564; }
.pgcs-lead{ margin:0 0 3px; text-align:center; font-size:.88rem; font-weight:600; color:#5c4a72; }
.pgcs-tag{ margin:0 0 16px; text-align:center; font-size:.78rem; color:#8a7a9c; }

.pgcs-rel-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:12px;
  animation:pgcs-fade-up .45s .12s cubic-bezier(.2,.8,.3,1) both;
}
.pgcs-rel{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  padding:12px 12px 11px; border-radius:16px; text-align:left;
  border:1px solid var(--pgcs-line, rgba(74,53,100,.10));
  background:var(--pgcs-card-bg, #fbf7f2);
  min-height:88px;
}
.pgcs-rel:active{ transform:scale(.98); background:var(--pgcs-card-bg-hi, #f7f0e8); }
.pgcs-rel-ico{ width:22px; height:22px; color:var(--pgcs-ico, #4a3564); opacity:.9; }
.pgcs-rel-ico svg{
  width:100%; height:100%;
  fill:rgba(74,53,100,.08); stroke:currentColor; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
}
.pgcs-rel-label{ font-size:.86rem; font-weight:700; color:#4a3564; }
.pgcs-rel-say{ font-size:.7rem; line-height:1.35; color:#8a7a9c; }
.pgcs-rel-done{
  position:absolute; top:9px; right:10px; font-size:.6rem; font-weight:700;
  color:var(--pgcs-ico, #4a3564); opacity:.85;
}
/* 지시 §15 — 핑크/민트/라일락/크림 넷을 약하게만 구분한다(가독성 유지). */
.pgcs-rel[data-accent="rose"]    { --pgcs-ico:#c96e93; --pgcs-line:rgba(246,169,198,.4); --pgcs-card-bg:#fdf1f5; --pgcs-card-bg-hi:#fbe6ee; }
.pgcs-rel[data-accent="mint"]    { --pgcs-ico:#3f9a82; --pgcs-line:rgba(143,227,207,.4); --pgcs-card-bg:#f1faf6; --pgcs-card-bg-hi:#e6f5ee; }
.pgcs-rel[data-accent="lavender"]{ --pgcs-ico:#7c68ad; --pgcs-line:rgba(195,178,247,.4); --pgcs-card-bg:#f6f2fc; --pgcs-card-bg-hi:#efe7fa; }
.pgcs-rel[data-accent="honey"]   { --pgcs-ico:#a67c22; --pgcs-line:rgba(242,201,121,.4); --pgcs-card-bg:#fdf7ea; --pgcs-card-bg-hi:#faeed3; }

.pgcs-reco{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:3px;
  width:100%; padding:14px 40px 14px 16px; margin-bottom:12px; border-radius:18px; text-align:left;
  border:1px solid rgba(232,196,118,.5);
  background:linear-gradient(135deg, #fbe3ec 0%, #f3e6fa 60%, #fdf0e0 100%);
  box-shadow:0 6px 18px rgba(154,110,60,.16);
  animation:pgcs-fade-up .45s .18s cubic-bezier(.2,.8,.3,1) both;
}
.pgcs-reco:active{ transform:scale(.99); }
.pgcs-reco-crown{ font-size:.68rem; font-weight:700; letter-spacing:.03em; color:#a6791f; }
.pgcs-reco-ttl{ font-size:.98rem; font-weight:700; color:#4a3564; }
.pgcs-reco-sub{ font-size:.74rem; color:#6d5c82; }
.pgcs-reco-arrow{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  font-size:1.3rem; color:#c9973f; opacity:.9;
}

/* 보조 콘텐츠 — 지시 §"메인 콘텐츠보다 작게": 글자 한 단 더 작고, 카드도 더 낮다. */
.pgcs-sub-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:8px;
  animation:pgcs-fade-up .45s .24s cubic-bezier(.2,.8,.3,1) both;
}
.pgcs-sub-item{
  display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center;
  padding:9px 6px; border-radius:14px;
  border:1px solid rgba(74,53,100,.10); background:#faf7f5;
}
.pgcs-sub-item:active{ background:#f2ece8; transform:scale(.98); }
.pgcs-sub-ico{ width:17px; height:17px; color:#7c68ad; }
.pgcs-sub-ico svg{
  width:100%; height:100%;
  fill:rgba(124,104,173,.10); stroke:currentColor; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
}
.pgcs-sub-ttl{ font-size:.7rem; font-weight:700; color:#5c4a72; }
.pgcs-sub-sub{ font-size:.58rem; color:#9a8bab; line-height:1.3; }

@keyframes pgcs-fade-up{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .pgcs-rel-grid, .pgcs-reco, .pgcs-sub-grid, .pgcs-haru{ animation:none; }
}

/* ── ④ 탑승권 — 놀이공원 티켓처럼(지시 §8) ───────────────────────────── */
/* 2026-09-11 [회전목마 결과화면 UX 통합 후속] — art-director 실측 지적: 질문 화면
   (.pgcs-qstage, 이미 warm cream)으로 들어가기 직전에 이 카드만 짙은 보라(#241a45→
   #3a2a6b)로 남아 있어 §13 "보라돌이 제거" 취지와 안 맞았다. .pgcs-body(:1407)가
   이미 쓰는 ivory 톤을 그대로 옮긴다 — 새 색 발명 없음. */
.pgcs-ticket-scroll{ display:flex; align-items:center; min-height:100%; padding:0 18px 24px; }
.pgcs-ticket{
  width:100%; margin:auto; padding:22px 22px 24px; border-radius:20px;
  background:linear-gradient(160deg, #fffaf3 0%, #fdeee0 55%, #fbe0e8 100%);
  border:1.5px dashed rgba(201,151,63,.55);
  box-shadow:0 10px 26px rgba(120,90,60,.16);
  text-align:center; position:relative;
  animation:pgcs-ticket-in .32s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes pgcs-ticket-in{ from{ opacity:0; transform:scale(.93); } to{ opacity:1; transform:none; } }
.pgcs-ticket-top{ font-size:1rem; font-weight:700; letter-spacing:.02em; color:#c9973f; margin-bottom:14px; }
.pgcs-ticket-pair{
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-size:1.1rem; font-weight:700; color:#3a2a52; margin-bottom:14px;
}
.pgcs-ticket-pair .pgcs-x{ color:#e57ea3; font-weight:400; }
.pgcs-ticket-div{ border-top:1px dashed rgba(74,53,100,.22); margin:0 0 14px; }
.pgcs-ticket-cap{ font-size:.9rem; color:#4a3564; margin-bottom:18px; }
.pgcs-ticket-boarding{
  font-weight:700;line-height:1;font-family:inherit; letter-spacing:.24em; color:rgba(74,53,100,.5);
  margin-bottom:16px;
}
.pgcs-board-btn{
  width:100%; min-height:50px; border-radius:999px; border:1px solid rgba(255,255,255,.2);
  background:linear-gradient(135deg,#f2c979,#e8a86a); color:#3a2410;
  font-size:.92rem; font-weight:700;
}
.pgcs-board-btn.is-boarding{ opacity:.85; }
.pgcs-board-btn:active{ transform:scale(.98); }

/* §8 — [같이 타기] 를 누르면 탑승권 전체가 회전목마처럼 살짝 돌며 출발한다 */
.pgcs-ticket.is-departing{ animation:pgcs-depart .62s cubic-bezier(.3,.1,.2,1) both; }
@keyframes pgcs-depart{
  0%{ transform:none; filter:brightness(1); }
  55%{ transform:scale(1.05) rotate(1.5deg); filter:brightness(1.25); }
  100%{ transform:scale(1.1) rotate(-1deg); filter:brightness(1.5); opacity:.4; }
}
@media (prefers-reduced-motion: reduce){
  .pgcs-ticket.is-departing{ animation:none; }
}

/* ── ⑤ 내 탑승 기록 ───────────────────────────────────────────────── */
.pgcs-log-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.pgcs-log-row{
  display:flex; flex-direction:column; gap:2px; padding:11px 13px; border-radius:12px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
}
.pgcs-log-date{ font-size:.64rem; color:rgba(251,241,224,.55); }
.pgcs-log-rel{ font-size:.84rem; font-weight:700; color:#fff; }
.pgcs-log-res{ font-size:.72rem; color:rgba(251,241,224,.72); }
.pgcs-log-empty{
  list-style:none; text-align:center; padding:40px 12px; color:rgba(251,241,224,.6);
  font-size:.82rem; line-height:1.6;
}

/* ── ⑥ 케미 질문 진행씬 전면개선 (2026-09-06 · 사람 지시 전문) ─────────────
   ★ §0 절대 보존 — 이 절은 순수 표시 레이어다. `body.pgcs-quiz-active` 가 붙어 있을
     때만 걸리고, 그 클래스는 playground.js 의 회전목마_퀴즈진행() 안에서만 켜진다 —
     다른 시설·다른 화면(§0 [다른 놀이터 콘텐츠]·[다른 화면 UI])은 이 절 전체가 안 걸린다.
   ★ 색은 입구씬과 같은 팔레트(Deep Indigo/Midnight Purple/Lavender/Soft Pink/
     Warm Cream/Soft Gold) — 브라운·수정구(🔮)·파란 pill 은 여기 없다. */

/* §3 — 기존 전역 헤더(운명의 놀이터/은화/ⓘ)·기본 챗 UI(🔮 아이콘·브라운 말풍선·
   ← 놀이터로)를 이 화면에서만 감춘다. 다른 화면은 이 body 클래스가 안 붙어 그대로다. */
body.pgcs-quiz-active .village-title,
body.pgcs-quiz-active #pg-info,
body.pgcs-quiz-active #tarot-coin-widget,
body.pgcs-quiz-active #pg-quiz-back,
body.pgcs-quiz-active #chat{ display:none !important; }

/* 2026-09-10(4차) 사람 지시 [회전목마 UI COLOR SYSTEM REMASTER] — 밤하늘 인디고를
   MASTER 와 이어지는 밝은 크림/파스텔로 뒤집는다. 구조(질문카드·선택지·말진행바·
   완주화면)는 그대로, 색만 간다. */
.pgcs-qstage{
  position:fixed; inset:0; z-index:35; overflow:hidden;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, #fdf6ee 0%, #fbe9ee 45%, #f6eefb 100%);
  color:#4a3564; font-family:inherit;
}
.pgcs-qstage.hidden{ display:none; }

/* 은은한 배경 연출(§11) — 배경 parallax·별 반짝임만. 질문 읽기를 방해하지 않는다. */
.pgcs-qsky{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.pgcs-qstar-bg{
  position:absolute; width:3px; height:3px; border-radius:50%;
  background:#fff3d6; box-shadow:0 0 6px 1px rgba(255,243,214,.6);
  animation:pgcs-twinkle 3.2s ease-in-out infinite;
}
.pgcs-qstar-bg.s1{ top:8%; left:12%; }
.pgcs-qstar-bg.s2{ top:14%; left:82%; animation-delay:.8s; }
.pgcs-qstar-bg.s3{ top:22%; left:46%; animation-delay:1.6s; }
.pgcs-qstar-bg.s4{ top:6%; left:64%; animation-delay:2.2s; width:2px; height:2px; }
/* 조명이 한 번 밝아지는 완주 연출(§12 5단계) */
.pgcs-qstage.is-arrived .pgcs-qsky{ animation:pgcs-arrive-glow .7s ease-out both; }
@keyframes pgcs-arrive-glow{
  0%{ background:radial-gradient(120% 60% at 50% 0%, rgba(232,196,118,0) 0%, rgba(232,196,118,0) 100%); }
  45%{ background:radial-gradient(120% 60% at 50% 0%, rgba(232,196,118,.35) 0%, rgba(232,196,118,0) 100%); }
  100%{ background:radial-gradient(120% 60% at 50% 0%, rgba(232,196,118,0) 0%, rgba(232,196,118,0) 100%); }
}

/* §3 전용 헤더 — 낮고 간단하게 */
.pgcs-qhead{
  position:relative; z-index:2; flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:calc(10px + env(safe-area-inset-top,0px)) 14px 8px;
}
.pgcs-qback{
  flex:0 0 auto; min-height:34px; padding:0 8px 0 2px; background:none; border:0;
  color:#4a3564; font-weight:600;font-size:15px;line-height:1;font-family:inherit; opacity:.85;
}
.pgcs-qtitle{
  flex:1; min-width:0; text-align:center; font-weight:700;line-height:1.2;font-family:inherit;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pgcs-qinfo{
  width:24px; height:24px; border-radius:50%; flex:0 0 auto;
  background:rgba(74,53,100,.06); border:1px solid rgba(74,53,100,.14);
  color:#4a3564; font-size:.68rem;
}

/* §4 — 회전목마 진행 트랙(핵심 게임 요소). 질문 수가 달라도(2~4) 그대로 동작한다. */
.pgcs-qtrack{ position:relative; z-index:2; flex:0 0 auto; padding:2px 18px 6px; text-align:center; }
.pgcs-qtrack-row{ position:relative; display:flex; align-items:center; justify-content:space-between; height:22px; margin:0 6px; }
.pgcs-qtrack-row::before{
  content:""; position:absolute; left:10px; right:10px; top:50%; height:2px;
  background:rgba(232,196,118,.28); transform:translateY(-50%); z-index:0;
}
.pgcs-qhorse{
  position:absolute; top:50%; transform:translate(-50%,-50%); left:0;
  font-size:1.05rem; z-index:2; transition:left .4s cubic-bezier(.3,.7,.3,1);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));
}
.pgcs-qstar{
  position:relative; z-index:1; font-size:.92rem; line-height:1;
  color:rgba(180,150,60,.38); transition:color .3s ease, transform .3s ease;
}
.pgcs-qstar.is-on{ color:#c9973f; transform:scale(1.15); text-shadow:0 0 8px rgba(201,151,63,.4); }
.pgcs-qcount{ margin-top:6px; font-size:.7rem; font-weight:700; letter-spacing:.03em; color:#8a7aa8; }
.pgcs-qphrase{ margin-top:2px; font-size:.72rem; color:rgba(74,53,100,.62); min-height:1.2em; }

/* §6·§8 — 질문 카드 + 세로 선택 카드. 화면의 진짜 주인공이라 스크롤 몸통은 이 하나뿐이다. */
.pgcs-qbody{
  position:relative; z-index:2; flex:1 1 auto; min-height:0; overflow-y:auto;
  display:flex; flex-direction:column; align-items:stretch;
  padding:8px 18px calc(16px + var(--banner-ad-height, 0px) + env(safe-area-inset-bottom, 0px));
  max-width:480px; width:100%; margin:0 auto;
}
.pgcs-qcard{
  flex:0 0 auto; text-align:center; margin:6px 0 16px; padding:18px 18px 16px;
  border-radius:20px; position:relative;
  background:rgba(255,250,242,.92);
  border:1px solid rgba(201,151,63,.35);
  box-shadow:0 0 0 1px rgba(255,255,255,.5) inset, 0 8px 22px rgba(74,53,100,.12);
  animation:pgcs-card-in .32s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes pgcs-card-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.pgcs-qcard-n{
  display:inline-block; margin-bottom:8px; padding:3px 12px; border-radius:999px;
  background:rgba(201,151,63,.14); border:1px solid rgba(201,151,63,.4);
  color:#a6791f; font-size:.72rem; font-weight:700; letter-spacing:.04em;
}
.pgcs-qcard-q{ margin:0 0 6px; font-size:1.08rem; font-weight:700; line-height:1.4; color:#3a2a52; word-break:keep-all; }
.pgcs-qcard-sub{ margin:0; font-size:.78rem; color:#8a7aa8; }

.pgcs-qchoices{
  flex:0 0 auto; display:flex; flex-direction:column; gap:10px;
  animation:pgcs-card-in .34s .05s cubic-bezier(.2,.8,.3,1) both;
}
.pgcs-qchoice{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  min-height:64px; padding:12px 14px; border-radius:16px;
  background:var(--pgcs-qc-bg, rgba(255,250,242,.85)); border:1px solid var(--pgcs-qc-line, rgba(74,53,100,.14));
  color:#3a2a52; font-family:inherit; transition:transform .12s ease, background-color .16s ease, border-color .16s ease;
}
/* §4 — 선택지 3~4개가 각각 다른 파스텔로 갈린다(핑크/민트·블루/라일락/버터). 문항마다
   데이터가 달라(질문 다시 그리면 DOM 이 새로 생김) 순서만 고정이면 되는 nth-child 로 충분하다. */
.pgcs-qchoice:nth-of-type(1){ --pgcs-qc-bg: linear-gradient(160deg, rgba(246,169,198,.20), rgba(255,250,242,.85) 75%); --pgcs-qc-line: rgba(246,169,198,.45); }
.pgcs-qchoice:nth-of-type(2){ --pgcs-qc-bg: linear-gradient(160deg, rgba(143,227,207,.20), rgba(255,250,242,.85) 75%); --pgcs-qc-line: rgba(143,227,207,.45); }
.pgcs-qchoice:nth-of-type(3){ --pgcs-qc-bg: linear-gradient(160deg, rgba(195,178,247,.20), rgba(255,250,242,.85) 75%); --pgcs-qc-line: rgba(195,178,247,.45); }
.pgcs-qchoice:nth-of-type(4){ --pgcs-qc-bg: linear-gradient(160deg, rgba(242,201,121,.20), rgba(255,250,242,.85) 75%); --pgcs-qc-line: rgba(242,201,121,.45); }
.pgcs-qchoice-ico{ flex:0 0 auto; font-size:1.15rem; line-height:1; }
.pgcs-qchoice-txt{ flex:1; min-width:0; }
.pgcs-qchoice-lbl{ display:block; font-size:.92rem; font-weight:700; line-height:1.35; word-break:keep-all; }
.pgcs-qchoice-sub{ display:block; margin-top:2px; font-size:.74rem; color:#8a7aa8; word-break:keep-all; }
.pgcs-qchoice-arrow{ flex:0 0 auto; font-size:1.15rem; color:rgba(74,53,100,.32); }
.pgcs-qchoice:active{ transform:scale(.985); filter:brightness(.98); }
/* §4 — 선택 반응: 살짝 확대 → 골드 soft glow → ✨(체크로 상태 구분, 색만으로 안 가른다) */
.pgcs-qchoice.is-picked{
  transform:scale(1.02);
  border-color:#c9973f; box-shadow:0 0 0 1px rgba(201,151,63,.5), 0 6px 18px rgba(201,151,63,.25);
}
.pgcs-qchoice.is-picked .pgcs-qchoice-arrow::after{ content:" ✓"; color:#a6791f; }
.pgcs-qbody.is-locked .pgcs-qchoice:not(.is-picked){ opacity:.5; }
@media (prefers-reduced-motion: reduce){
  .pgcs-qcard, .pgcs-qchoices{ animation:none; }
  .pgcs-qchoice:active, .pgcs-qchoice.is-picked{ transform:none; }
}

/* §12 — 완주 연출. 자동으로 안 넘어간다 — 버튼을 눌러야 다음(§0 결과 로직)으로 간다. */
.pgcs-qdone{
  flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:6px; padding:24px 12px; min-height:280px;
  animation:pgcs-card-in .38s cubic-bezier(.2,.8,.3,1) both;
  position:relative;
}
.pgcs-qdone-emoji{ font-size:2.6rem; margin-bottom:2px; position:relative; }
/* §3 — 완주 celebration. 약 1초 안에 끝나는 sparkle 3개뿐, 반복 없음(과한 이펙트 금지). */
.pgcs-qdone-spark{
  position:absolute; font-size:1rem; opacity:0; pointer-events:none;
  animation:pgcs-qdone-spark-pop .9s ease-out both;
}
.pgcs-qdone-spark.s1{ top:-6px; left:-18px; animation-delay:.05s; }
.pgcs-qdone-spark.s2{ top:-10px; right:-16px; animation-delay:.2s; font-size:.8rem; }
.pgcs-qdone-spark.s3{ bottom:2px; left:50%; margin-left:22px; animation-delay:.35s; font-size:.72rem; }
@keyframes pgcs-qdone-spark-pop{
  0%{ opacity:0; transform:scale(.3) translateY(4px); }
  40%{ opacity:1; transform:scale(1.1) translateY(-4px); }
  100%{ opacity:0; transform:scale(.9) translateY(-10px); }
}
@media (prefers-reduced-motion: reduce){
  .pgcs-qdone-spark{ display:none; }
}
.pgcs-qdone-ttl{ font-size:1.2rem; font-weight:700; color:#3a2a52; }
.pgcs-qdone-sub{ font-size:.86rem; color:#8a7aa8; margin-bottom:14px; }
.pgcs-qdone-btn{
  min-height:50px; padding:0 26px; border-radius:999px; border:1px solid rgba(255,255,255,.2);
  background:linear-gradient(135deg,#f2c979,#e8a86a); color:#3a2410;
  font-size:.9rem; font-weight:700;
}
.pgcs-qdone-btn:active{ transform:scale(.98); }

/* §10 — 하루는 화면 하단 한쪽에 작게. 매 질문마다 말하지 않는다(라이드당 1회). */
.pgcs-qharu{
  position:absolute; left:14px; bottom:calc(14px + var(--banner-ad-height, 0px) + env(safe-area-inset-bottom, 0px));
  z-index:3; display:flex; align-items:center; gap:0; background:none; border:0; padding:0;
  animation:pgcs-fade-up .4s cubic-bezier(.2,.8,.3,1) both;
}
.pgcs-qharu.hidden{ display:none; }
.pgcs-qharu img{
  width:32px; height:32px; border-radius:50%; object-fit:cover;
  border:1.5px solid rgba(251,241,224,.8); box-shadow:0 3px 8px rgba(0,0,0,.35);
}
.pgcs-qharu-say{
  margin-left:7px; padding:6px 10px; border-radius:13px 13px 13px 3px;
  background:rgba(255,255,255,.94); color:#3a2a6b;
  font-size:.66rem; line-height:1.35; max-width:52vw; box-shadow:0 3px 8px rgba(0,0,0,.22);
}

/* §14 반응형 — 세로 공간 부족하면 ①배경장식 ②하루 ③보조설명 순으로 줄인다.
   질문·선택지는 마지막까지 그대로 둔다(검증표 항목). */
@media (max-height:700px){
  .pgcs-qstar-bg{ display:none; }                       /* ① 배경 장식부터 */
  .pgcs-qharu{ display:none; }                           /* ② 하루 */
  .pgcs-qcard-sub{ display:none; }                       /* ③ 보조 설명 */
  .pgcs-qcard{ margin:4px 0 12px; padding:14px 16px 12px; }
  .pgcs-qchoices{ gap:8px; }
  .pgcs-qchoice{ min-height:58px; padding:10px 13px; }
}
@media (max-width:360px){
  .pgcs-qchoice-lbl{ font-size:.86rem; }
  .pgcs-qcard-q{ font-size:1rem; }
}

/* ── ⑦ 결과 — [즉석사진] 카드(지시 §10) ───────────────────────────── */
.pgcs-photo-tag{
  margin:14px auto 6px; padding:5px 13px; border-radius:999px; width:max-content;
  background:rgba(232,196,118,.16); border:1px solid rgba(232,196,118,.4);
  color:#8a6a2e; font-size:.72rem; font-weight:700;
}
.msg.pg-photo-msg{
  position:relative; border-radius:14px; padding:16px 16px 14px !important;
  background:#fffdf7 !important; border:1px solid rgba(215,181,109,.4);
  box-shadow:0 8px 22px rgba(40,26,6,.18), 0 0 0 6px #fffdf7, 0 0 0 7px rgba(215,181,109,.35);
  margin:0 auto 18px !important; max-width:min(88%, 360px);
}

/* ════════════════════════════════════════════════════════════════════
   2026-09-06 사람 지시 — 회전목마 제외 4개 시설 UI 최종 개편
   ────────────────────────────────────────────────────────────────────
   ★ 이 절 아래는 전부 `.pg-overlay:not(.is-carousel-gate)` 범위(회전목마는 위 `.pgcs-*`
     절이 이미 전용으로 그린다 — 이 절의 새 클래스는 회전목마 마크업에 없으므로 저절로 안 걸린다).
   ★ 배경 원화·시설 좌표·회전목마는 한 픽셀도 안 건드린다.
   ════════════════════════════════════════════════════════════════════ */

/* ── §1 서브 카피 — 메인 카피(.pg-sub) 아래 한 줄 더 ────────────────── */
.pg-subcopy{
  margin:-6px 0 16px; text-align:center;
  font-size:.74rem; line-height:1.5; color:#96805c;
}

/* ── §7 하단 감성 한 줄 — 카드 목록 다음, 광고 위 ────────────────────
   예전 "✦ 모두 무료로 즐길 수 있어"(.pg-free) 반복 문구를 대신한다. 시설마다
   다른 한두 줄이라 프로모션 배너처럼 안 보이게 계속 작게 둔다. */
.pg-footnote{
  margin:16px 0 0; text-align:center;
  font-size:.72rem; line-height:1.5; letter-spacing:.01em;
  color:#a08a5e; opacity:.95;
}
.pg-footnote[hidden]{ display:none; }

/* ── §5 Hero 카드 — 대표 콘텐츠는 확실히 크게 ────────────────────────
   시설별 accent(§6 위 `--pg-ico-bg/--pg-ico-line/--pg-cta-bg`)를 그대로 쓰되,
   카드 배경 자체에 옅은 그라데이션을 얹고 CTA 를 솔리드 알약으로 올려 위계를 가른다. */
.pg-menu-item.pg-item-hero{
  position:relative; overflow:hidden;
  min-height:80px; padding:15px 15px;
  /* [PREMIUM 1] 굵은 색 테두리 대신 얇은 라벤더 테두리 + 아주 약한 ambient glow.
     elevation 도 일반 카드(box-shadow 0 1~2px)보다 한 단만 높인다 — 쌓아 올리지 않는다. */
  border:1px solid rgba(195,178,247,.55);
  box-shadow:0 6px 20px rgba(160,140,220,.14), 0 0 0 6px rgba(246,169,198,.05);
  background:linear-gradient(135deg, var(--pg-cta-bg), rgba(255,253,249,.92) 78%);
}
.pg-item-hero .pg-item-ico{ width:46px; height:46px; border-radius:14px; }
.pg-item-hero .pg-item-ico svg{ width:24px; height:24px; }
.pg-item-hero .pg-item-ttl{ font-size:1.03rem; }
/* [PREMIUM 9] "지금 해보기" — 단색 대신 아주 미세한 lavender→muted violet 그라데이션 +
   위쪽 하이라이트 한 줄. 강한 네온·강한 glow는 쓰지 않는다. */
.pg-item-hero .pg-item-cta{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, #8f7fc4, #6d5aa8);
  color:#fffdf8;
  padding:8px 15px 8px 16px; font-size:.8rem; font-weight:700;
}
.pg-item-hero .pg-item-cta::before{
  content:""; position:absolute; inset:0 0 55% 0;
  background:linear-gradient(180deg, rgba(255,255,255,.32), transparent);
  pointer-events:none;
}
/* 2026-09-12(2차 PREMIUM POLISH) §9 — 눌렀을 때 버튼 안쪽을 왼쪽→오른쪽으로 아주
   빠르게 한 번만 스치는 하이라이트. 반복 재생 애니메이션이 아니라 :active 동안만
   재생되는 1회성 스윕이라 계속 누르고 있어도 반짝임이 되풀이되지 않는다. */
.pg-item-hero .pg-item-cta::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 35%, rgba(255,255,255,.55) 48%, transparent 62%);
  background-size:260% 100%; background-position:150% 0; opacity:0;
}
.pg-item-hero .pg-item-cta:active::after{
  opacity:1; animation:pg-cta-sweep .45s ease-out both;
}
@keyframes pg-cta-sweep{
  from{ background-position:150% 0; opacity:1; }
  to{ background-position:-60% 0; opacity:0; }
}
@media (prefers-reduced-motion:reduce){
  .pg-item-hero .pg-item-cta:active::after{ animation:none; opacity:0; }
}
/* [PREMIUM 1] 테두리를 따라 아주 느리고 희미한 빛이 진입 시 딱 한 번만 지나간다.
   반복하지 않는다(iteration-count:1) — §1 마지막 줄 "반복적으로 번쩍이지 않는다". */
.pg-menu-item.pg-item-hero::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.5) 50%, transparent 60%);
  background-size:250% 100%; background-position:150% 0;
  animation:pg-hero-shimmer 1.6s ease-out .5s 1 both;
}
@keyframes pg-hero-shimmer{
  from{ background-position:150% 0; opacity:1; }
  to{ background-position:-50% 0; opacity:0; }
}
@media (prefers-reduced-motion:reduce){
  .pg-menu-item.pg-item-hero::after{ display:none; }
}
/* 미니게임존·포춘나무 Hero 만 두 번째 색조(핑크)를 옅게 섞는다(요청 색 배합 — arcade
   lavender+pink · 포춘나무 sage+pink). 나머지 둘(미끄럼틀·행운분수)은 단일 색조 그대로다. */
.pg-overlay[data-art="arcade"] .pg-item-hero{
  background:linear-gradient(135deg, var(--pg-cta-bg), rgba(246,169,198,.16) 55%, rgba(255,253,249,.92) 88%);
}
.pg-overlay[data-art="tree"] .pg-item-hero{
  background:linear-gradient(135deg, var(--pg-cta-bg), rgba(246,169,198,.14) 55%, rgba(255,253,249,.92) 88%);
}

/* Hero eyebrow — 카드 제목 위 작은 한 줄(예: "오늘의 추천 게임 🔥"). 지금은
   미니게임존 Hero 하나뿐이다(item.eyebrow 가 있을 때만 만들어진다). */
.pg-item-eyebrow{
  display:block; font-size:.64rem; font-weight:700; letter-spacing:.02em;
  color:var(--pg-ico-line); margin-bottom:2px;
}
/* [PREMIUM 4] champagne gold — 이 작은 점 하나가 전체 UI에서 금색을 쓰는 유일한
   자리다(전체의 5% 이하). 큰 테두리·큰 버튼에는 안 쓴다. */
.pg-item-eyebrow::before{
  content:""; display:inline-block; width:5px; height:5px; margin-right:5px;
  border-radius:50%; background:#e8c77a; box-shadow:0 0 4px 1px rgba(232,199,122,.55);
  vertical-align:middle;
}

/* [PREMIUM 10] "오늘 무료" — 일반 텍스트가 아니라 옅은 lavender capsule.
   카드 자체 accent(핑크 계열)와 다른 색을 써서 "이건 이 카드만의 특별 혜택"이라는
   신호를 분리해 준다(§10 원문 그대로 — 연한 lavender bg + 짙은 lavender 글자). */
.pg-item-hero .pg-price-tag{
  background:rgba(195,178,247,.22); color:#5d4a96;
}

/* ── §3 카드별 가격/빈도 표 — "오늘 1회 무료" 같은 작은 표 하나 ─────────
   완료표(.pg-done-tag)와 같은 자리·같은 크기 언어를 쓴다(메타 줄 옆, §9 규칙과 동일). */
.pg-price-tag{
  flex:0 0 auto; display:inline-flex; align-items:center;
  font-size:.62rem; font-weight:700; letter-spacing:.03em;
  padding:2px 7px; border-radius:999px;
  background:var(--pg-cta-bg); color:var(--pg-ico-line);
}

/* ── §C 작은 나열형 카드(미니게임존 보조 셋) — 리스트 메뉴처럼 안 보이게 ─────
   2026-09-12 [미니게임존 메인 화면 UI 통일] §1 — 3열(+ 외톨이 1칸)이 아니라
   2열×2행. 지금 DOM 순서(나는 어떤 타입일까·닮은꼴·혈액형·관상손금)가 이미
   요청한 배치(1행 타입/닮은꼴 · 2행 혈액형/관상손금) 그대로라 순서는 안 건드린다. */
.pg-compact-row{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:9px;
}
.pg-compact-item{
  position:relative; overflow:hidden;
  /* 2026-09-12(2차 PREMIUM POLISH) §4 — "가장 중요하다": justify-content:center 였을 때는
     제목이 1줄이냐 2줄이냐에 따라 전체 콘텐츠 블록의 높이가 달라져 그 위/아래(아이콘·시간)
     Y 좌표가 카드마다 밀렸다. flex-start 로 상단 고정 + 아래 .pg-compact-ttl 이 2줄 높이를
     항상 예약해 [아이콘 Y → 제목 시작 Y → 시간 Y]가 넷 다 항상 같은 자리에 오게 한다. */
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  text-align:center; gap:0; min-height:104px;
  padding:14px 10px 12px; border-radius:16px;
  /* §4·[PREMIUM 2] — milky translucent white 바탕. 카드마다 다른 것은 아래
     data-accent 규칙이 얹는 아주 옅은 tint 하나뿐 — 진하기·불투명도는 넷이 같다. */
  border:1px solid rgba(206,183,146,.5);
  background:rgba(255,253,250,.86);
  /* §8 — 강한 그림자 대신 아주 은은한 바닥 그림자 + 카드 위쪽 안쪽 흰 하이라이트 한 줄
     (아래 ::before 오버레이와 겹쳐 [얇은 유리면] 느낌을 더한다. 두껍게 쌓지 않는다). */
  box-shadow:0 2px 8px rgba(74,51,18,.05), inset 0 1px 0 rgba(255,255,255,.55);
  transition:background-color .16s ease, border-color .16s ease, transform .12s ease, box-shadow .16s ease;
}
/* [PREMIUM 2] 유리 레이어 느낌 — 카드 위쪽만 아주 살짝 밝게(평평한 색 박스가 아니라
   얇은 하이라이트가 있는 면처럼). 진한 glassmorphism(강한 blur)은 쓰지 않는다. */
.pg-compact-item::before{
  content:""; position:absolute; inset:0 0 55% 0; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.55), transparent);
}
.pg-compact-item:active{
  /* §9 — .98 → .985. 눌림이 조금 더 짧고 가볍게 느껴지도록. */
  transform:scale(.985);
  background:var(--pg-cta-bg); border-color:var(--pg-ico-line);
  box-shadow:0 1px 4px rgba(74,51,18,.08);
}
/* [PREMIUM 7] 터치 시 아이콘 둘레에 아주 약한 glow가 잠깐 스친다 */
.pg-compact-item:active .pg-compact-ico{ box-shadow:0 0 0 5px var(--pg-ico-bg); }
.pg-compact-ico{
  position:relative; z-index:1;
  width:32px; height:32px; border-radius:11px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:var(--pg-ico-bg); color:var(--pg-ico-line);
  transition:box-shadow .18s ease;
  /* §4 — 아이콘 다음 제목 시작 Y 까지의 간격을 고정값으로 못박는다(부모 gap:0). */
  margin-bottom:7px;
}
.pg-compact-ico svg{
  width:17px; height:17px; display:block;
  fill:var(--pg-ico-fill); stroke:currentColor; stroke-width:1.35;
  stroke-linecap:round; stroke-linejoin:round;
}
.pg-compact-ttl{
  position:relative; z-index:1;
  font-size:.78rem; font-weight:600; line-height:1.32; color:#4a3312;
  /* §6 — 2열로 넓어진 폭에서도 "나는 어떤 타 / 입일까?"처럼 단어 중간에서
     끊기지 않게. 새 폭에서도 필요하면 그냥 2줄로 자연스럽게 감싼다. */
  word-break:keep-all; overflow-wrap:normal;
  /* 2026-09-12(2차) §4 — 실제 제목이 1줄이든 2줄이든 이 영역 자체 높이를 "2줄 분량"
     으로 항상 고정한다. 1줄 제목은 이 박스 안에서 세로 중앙으로 뜨고, 2줄 제목은
     박스를 꽉 채운다 — 둘 다 박스 아래쪽(=다음 .pg-compact-meta 시작 Y)은 그대로다. */
  min-height:calc(1.32em * 2);
  width:100%;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:4px;
}
.pg-compact-meta{
  position:relative; z-index:1; font-size:.64rem; font-weight:500;
  /* §5 — 제목(진한 브라운) > (설명은 이 카드엔 없음) > 시간, 세 단계 중 가장 옅게.
     기존 #a08c6c 보다 한 톤 더 밝혀 "다 같은 브라운 진하기"로 안 보이게 한다. */
  color:#b6a487;
}
.pg-compact-meta[hidden]{ display:none; }
/* 아주 좁은 화면 — 2×2 도 눌리면 세로 1열로 접는다(억지로 축소하지 않는다). */
@media (max-width:300px){
  .pg-compact-row{ grid-template-columns:1fr; }
}
.pg-compact-item:focus-visible{ outline:2px solid var(--pg-ico-line); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  .pg-compact-item:active{ transform:none; }
}

/* [PREMIUM 6] 진입 애니메이션 — Featured Card 가 먼저, 4개 카드가 50~80ms 간격으로
   뒤따른다. 아주 작은 opacity+translateY 뿐, bounce 없음. 시트 자체(pg-sheet-up)가
   이미 뜨는 동안이라 그 위에 살짝 얹는 정도로만 짧게 잡는다. */
@keyframes pg-card-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.pg-overlay[data-art="arcade"] .pg-menu-item.pg-item-hero{ animation:pg-hero-in-fade .28s ease .04s both; }
@keyframes pg-hero-in-fade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.pg-overlay[data-art="arcade"] .pg-compact-item{ animation:pg-card-in .28s ease both; }
.pg-overlay[data-art="arcade"] .pg-compact-item:nth-child(1){ animation-delay:.14s; }
.pg-overlay[data-art="arcade"] .pg-compact-item:nth-child(2){ animation-delay:.20s; }
.pg-overlay[data-art="arcade"] .pg-compact-item:nth-child(3){ animation-delay:.26s; }
.pg-overlay[data-art="arcade"] .pg-compact-item:nth-child(4){ animation-delay:.32s; }
@media (prefers-reduced-motion:reduce){
  .pg-overlay[data-art="arcade"] .pg-menu-item.pg-item-hero,
  .pg-overlay[data-art="arcade"] .pg-compact-item{ animation:none; }
}

/* 2026-09-12 [미니게임존 메인 화면 UI 통일] §2·§3 — 카드 색은 이제 순서(nth-child)가
   아니라 정체성(data-accent, playground.js 가 심는다)으로 정한다. 넷 다 같은
   불투명도(.13)·같은 테두리 진하기(.42)로 맞춰 [하나만 진하거나 탁해 보인다]는
   지적이 다시 안 생기게 한다. 관상·손금의 예전 누런 베이지(rgba(255,250,240,.9) +
   갈색 테두리)는 여기서 완전히 없앤다 — peach 로 넷째 자리를 채운다. */
/* 2026-09-12(2차 PREMIUM POLISH) §6 — flat rgba 틴트 대신 [카드 중앙은 거의 우유빛
   흰색 · 가장자리에만 옅게 색이 스민다]는 radial-gradient 로 바꾼다. 네 색 모두
   정지점(0%/38%/100%)·가장자리 진하기(.24)·테두리 진하기(.4)를 완전히 같은 값으로
   맞춰 [하나만 색이 먼저 보인다]는 인상이 안 생기게 한다 — 관상·손금(peach)도 예외
   없이 이 표에 있다(예전엔 .15/.45 로 셋보다 살짝 진했다 — 그 차이를 없앤다). */
.pg-overlay[data-art="arcade"] .pg-compact-item[data-accent="rose"]{
  background:radial-gradient(130% 110% at 50% 8%, #fffdfb 0%, rgba(255,253,251,.9) 38%, rgba(246,169,198,.24) 100%);
  border-color:rgba(246,169,198,.4);
}
.pg-overlay[data-art="arcade"] .pg-compact-item[data-accent="mint"]{
  background:radial-gradient(130% 110% at 50% 8%, #fffdfb 0%, rgba(255,253,251,.9) 38%, rgba(143,227,207,.24) 100%);
  border-color:rgba(143,227,207,.4);
}
.pg-overlay[data-art="arcade"] .pg-compact-item[data-accent="lavender"]{
  background:radial-gradient(130% 110% at 50% 8%, #fffdfb 0%, rgba(255,253,251,.9) 38%, rgba(195,178,247,.24) 100%);
  border-color:rgba(195,178,247,.4);
}
.pg-overlay[data-art="arcade"] .pg-compact-item[data-accent="peach"]{
  background:radial-gradient(130% 110% at 50% 8%, #fffdfb 0%, rgba(255,253,251,.9) 38%, rgba(250,190,155,.24) 100%);
  border-color:rgba(250,190,155,.4);
}
.pg-overlay[data-art="arcade"] .pg-compact-item[data-accent="peach"]{ --pg-ico-bg:rgba(224,124,74,.16); --pg-ico-fill:rgba(224,124,74,.28); --pg-ico-line:#c9713f; --pg-cta-bg:rgba(224,124,74,.14); }
/* §7 — 카드 "색"으로 관상·손금이 특별하다는 신호를 주지 않는 대신(위에서 이미 넷을
   완전히 같은 색 강도로 맞췄다), 아주 작은 "AI 분석" 캡슐 배지 하나만 카드 우상단에
   얹는다. absolute 로 그리드 흐름 밖에 있어 §4 의 4칸 내부 그리드(아이콘/제목/시간
   Y 좌표)에는 전혀 영향을 주지 않는다 — "같은 놀이터 콘텐츠, 분석만 조금 더 특별"
   정도로만 읽히게 크기·색을 낮춘다(과하게 강조하지 않는다). */
.pg-overlay[data-art="arcade"] .pg-compact-item[data-accent="peach"]::after{
  content:"AI 분석"; position:absolute; z-index:2; top:7px; right:7px;
  font-size:.5rem; font-weight:700; letter-spacing:.02em; line-height:1;
  color:#c9713f; background:rgba(255,255,255,.82);
  border:1px solid rgba(224,124,74,.32); border-radius:999px;
  padding:2.5px 6px; pointer-events:none;
}

/* "MASTER 위에 동일 시설 이미지를 중복 합성하지 않는다" — 배경이 이미
   부스 MASTER 라 시트 안 작은 arcade.png 스티커(§5 위 1330행대)는 이 시설만 뺀다.
   포춘나무·행운분수는 이번 지시 대상이 아니라 그대로 둔다. */
.pg-overlay[data-art="arcade"] .pg-art{ display:none; }
/* 2026-09-12(2차 PREMIUM POLISH) §11 — 푸터 문구("심심할 때 하나씩! …")가 광고
   영역에 바로 붙어 보이지 않게 아래 여백만 늘린다. `.pg-panel`(§399행대)의
   padding-bottom 이 이미 `--banner-ad-height` 를 더해 광고 자리를 확보하고 있으므로,
   광고 높이·로직은 그대로 두고 그 [확보된 자리] 안에서 푸터 자신의 margin-bottom만
   키운다 — §12 "광고 높이·기능은 건드리지 않는다" 그대로 지킨다. */
.pg-overlay[data-art="arcade"] .pg-footnote{
  margin-bottom:calc(6px + env(safe-area-inset-bottom, 0px));
}
/* "거대한 흰 판이 튀어나오는 느낌을 줄인다 · 상단을 크게 둥글게 · 아이보리
   반투명으로 배경과 자연스럽게 연결" — 모서리를 키우고 톤을 아이보리 쪽으로. */
.pg-overlay[data-art="arcade"] .pg-panel{
  border-radius:30px 30px 0 0;
  background:rgba(255,250,240,.94);
  padding-top:18px;
  /* 2026-09-12(2차 PREMIUM POLISH) §1 — 회전목마 배경 노출을 10~15% 줄여 게임
     선택지가 더 빨리 보이게. 원화(지붕·노을·벚꽃)는 안 자른다 — 그림은 그대로 두고
     시트가 그 위를 더 많이 덮게만 한다(기본 35dvh → 48dvh, 화면의 약 13%p 더). */
  min-height:48dvh;
}
/* §2 HEADER 위계 — "나도 몰랐던 나를 발견해봐!"(메인)와 "짧고 재미있는 심리게임 ✨"
   (서브)의 시각적 경쟁을 줄인다. 메인은 굵게 키우고, 서브는 더 작고 옅게, 둘 사이
   간격도 좁힌다. */
.pg-overlay[data-art="arcade"] .pg-panel .pg-sub{
  font-weight:700; font-size:.92rem; color:#5a4020; margin-bottom:4px;
}
.pg-overlay[data-art="arcade"] .pg-subcopy{
  font-size:.7rem; color:#a8916c; margin-top:0; margin-bottom:14px; font-weight:400;
}

/* ════════════════════════════════════════════════════════════════════
   2026-09-10(2차) 사람 지시 [행운분수 최종 POLISH]
   ────────────────────────────────────────────────────────────────────
   §1 "패널 시작 위치를 8~12% 아래로" · §2 "패널 안 작은 분수 일러스트 제거
   (MASTER에 이미 실제 분수가 있다)" · §4 [오늘의 동전 던지기]를 대표 콘텐츠로
   (FACILITIES.fountain 의 hero:true 는 playground.js 에서 켰다) · §6 카드 색은
   아이보리+아쿠아+민트+옅은 라벤더/피치.
   ════════════════════════════════════════════════════════════════════ */
.pg-overlay[data-art="fountain"] .pg-art{ display:none; }
.pg-overlay[data-art="fountain"] .pg-panel{
  min-height:24dvh; max-height:calc(64dvh + var(--banner-ad-height, 0px));
  padding-top:16px;
}
/* 카드 3장 — 대표(아쿠아) + 보조 둘(민트·라벤더/피치를 아주 옅게). */
.pg-overlay[data-art="fountain"] .pg-menu-item:nth-of-type(2){
  background:linear-gradient(160deg, rgba(143,227,207,.14), rgba(255,253,249,.92) 78%);
  border-color:rgba(143,227,207,.4);
}
.pg-overlay[data-art="fountain"] .pg-menu-item:nth-of-type(3){
  background:linear-gradient(160deg, rgba(246,169,198,.12), rgba(255,253,249,.92) 78%);
  border-color:rgba(230,190,210,.4);
}
/* §4 "오늘의 동전 던지기를 대표 콘텐츠 · 첫 번째 가로형 대형 카드로". 2026-09-06
   재감리(위 §759행)가 두 카드를 같은 크기의 세로 2열로 못박아 hero:true 를 켜도
   그대로였다 — hero 카드만 그 규칙을 되돌려 가로 카드+보이는 CTA로 되살린다. */
.pg-overlay[data-art="fountain"] .pg-menu-item.pg-item-hero{
  grid-column:1 / -1;
  flex-direction:row; align-items:center; text-align:left; justify-content:flex-start;
  min-height:84px; padding:15px;
  background:linear-gradient(135deg, rgba(120,186,200,.16), rgba(255,253,249,.92) 78%);
  border-color:var(--pg-ico-line);
}
.pg-overlay[data-art="fountain"] .pg-item-hero .pg-item-txt{ width:auto; text-align:left; }
.pg-overlay[data-art="fountain"] .pg-item-hero .pg-item-foot{ justify-content:flex-start; }
.pg-overlay[data-art="fountain"] .pg-item-hero .pg-item-cta{ display:inline-flex; }

/* ── §11 시트 높이 — 초기 배경 45~50% / 시트 50~55% 정도로 ───────────────
   앞선 여러 절이 쌓아 올린 78dvh(+배너 높이) 상한은 4칸 세로 카드가 기준이었다.
   이번 개편으로 각 시설이 [Hero 1~2장 + 보조 카드/나열형]으로 줄어 그만큼 안 필요하다.
   ★ 배경(놀이터)이 안 보일 만큼 시트가 화면을 덮지 않게 하는 것이 목적이라, 카드가
     그래도 넘치면 **시트 안 스크롤**로 받는다(overflow-y:auto 는 이미 있다) — 억지로
     글자·카드를 더 줄이지 않는다(§23 과 같은 결). 회전목마(.is-carousel-gate)는
     그 절이 이미 `height:93dvh` 로 못박아 특이도가 더 높아 이 규칙에 안 걸린다. */
.pg-overlay:not(.is-carousel-gate) .pg-panel{
  min-height:0; max-height:calc(60dvh + var(--banner-ad-height, 0px));
}

/* 2026-09-06(4차) — 옛 `.pgsl-*`(고민 미끄럼틀 작은-시트 게이트) 규칙은 여기 있었다.
   시설 전체가 독립 풀스크린 씬(playground-slide.js/.css, `.pgsw-*`)으로 옮겨가며 지웠다. */

/* ════════════════════════════════════════════════════════════════════
   운명의 회전목마 — 케미 결과 화면 전면개선 (2026-09-06 · 사람 지시 전문)
   ────────────────────────────────────────────────────────────────────
   ★ §0 순수 표시 레이어 — 여기 색·모양은 전부 장식이고, 안의 문장·숫자는
     전부 playground.js 가 서버 card 필드에서 그대로 옮겨 적은 것이다.
   ★ 입구씬·질문씬과 같은 팔레트(Deep Indigo/Midnight Purple/Lavender/
     Soft Pink/Warm Cream/Soft Gold) — 브라운·회색 결과표 느낌 없음.
   ════════════════════════════════════════════════════════════════════ */

/* 2026-09-11 [운명의 회전목마 결과화면 UX·UI 통합 개선] §13 — "보라돌이 UI" 제거.
   .pgcs-qstage(질문·완주 화면, :1562)가 이미 쓰는 warm cream→blush→lavender 팔레트를
   그대로 이어받는다(새 색 발명 금지 — 질문에서 결과로 넘어갈 때 배경이 안 끊긴다). */
.pgcs-rstage{
  position:fixed; inset:0; z-index:35; overflow:hidden;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, #fdf6ee 0%, #fbe9ee 45%, #f6eefb 100%);
  color:#4a3564; font-family:inherit;
}
.pgcs-rstage.hidden{ display:none; }

.pgcs-rhead{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:calc(10px + env(safe-area-inset-top,0px)) 14px 8px;
}
.pgcs-rback{
  flex:0 0 auto; min-height:34px; padding:0 8px 0 2px; background:none; border:0;
  color:#4a3564; font-weight:600;font-size:15px;line-height:1;font-family:inherit; opacity:.9;
}
.pgcs-rtitle{
  flex:1; min-width:0; text-align:center; font-weight:700;line-height:1.2;font-family:inherit;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pgcs-rinfo{
  width:24px; height:24px; border-radius:50%; flex:0 0 auto;
  background:rgba(74,53,100,.08); border:1px solid rgba(74,53,100,.16);
  color:#4a3564; font-size:.68rem;
}

.pgcs-rscroll{
  flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:4px 16px calc(20px + var(--banner-ad-height, 0px) + env(safe-area-inset-bottom, 0px));
  max-width:480px; width:100%; margin:0 auto;
}

/* §16 — 티켓 오픈 연출: 카드가 아래에서 살짝 올라오며 골드 빛이 한 번 스친다(0.8~1.2s) */
.pgcs-rstage.is-opened .pgcs-rscroll{ animation:pgcs-rstage-flash .28s ease-out both; }
@keyframes pgcs-rstage-flash{ from{ filter:brightness(1.6); } to{ filter:brightness(1); } }

/* ── ①②③ 로딩 / 실패 ────────────────────────────────────────────── */
.pgcs-rloading, .pgcs-rfail{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; min-height:60vh; text-align:center; padding:24px;
}
.pgcs-rloading-emoji{ font-size:2.4rem; animation:pgcs-rloading-spin 1.8s linear infinite; }
@keyframes pgcs-rloading-spin{ 0%,100%{ transform:rotate(-6deg); } 50%{ transform:rotate(6deg); } }
.pgcs-rloading-txt{ font-size:.86rem; color:rgba(74,53,100,.78); }
/* §17 — 🎠→🎟️ 교차. 새 로딩 엔진이 아니라 기존 emoji 흔들림에 텍스트 교차만 얹는다. */
.pgcs-rloading-emoji-swap{ position:relative; display:inline-block; width:1em; height:1em; }
.pgcs-rloading-emoji-swap span{
  position:absolute; inset:0; animation:pgcs-rloading-emoji-fade 1.8s ease-in-out infinite;
}
.pgcs-rloading-emoji-swap span:last-child{ animation-delay:.9s; }
@keyframes pgcs-rloading-emoji-fade{
  0%, 40%{ opacity:1; } 50%, 90%{ opacity:0; } 100%{ opacity:1; }
}
.pgcs-rloading-dots{ display:flex; gap:6px; margin-top:2px; }
.pgcs-rloading-dots span{
  width:6px; height:6px; border-radius:50%; background:#c9973f;
  animation:pgcs-rloading-dot-bounce 1.1s infinite ease-in-out;
}
.pgcs-rloading-dots span:nth-child(2){ animation-delay:.15s; }
.pgcs-rloading-dots span:nth-child(3){ animation-delay:.3s; }
@keyframes pgcs-rloading-dot-bounce{
  0%, 60%, 100%{ opacity:.35; transform:translateY(0); }
  30%{ opacity:1; transform:translateY(-3px); }
}
.pgcs-rfail-emoji{ font-size:2.2rem; }
.pgcs-rfail-txt{ font-size:.92rem; font-weight:600; }
.pgcs-rfail-btn{
  margin-top:6px; min-height:46px; padding:0 22px; border-radius:999px;
  border:1px solid rgba(255,255,255,.2);
  background:linear-gradient(135deg,#f2c979,#e8a86a); color:#3a2410; font-size:.86rem; font-weight:700;
}
@media (prefers-reduced-motion: reduce){
  .pgcs-rloading-emoji{ animation:none; }
  .pgcs-rstage.is-opened .pgcs-rscroll{ animation:none; }
  .pgcs-rloading-emoji-swap span{ animation:none; }
  .pgcs-rloading-emoji-swap span:last-child{ opacity:0; }
  .pgcs-rloading-dots span{ animation:none; }
}

/* ── ②③ 기념사진 히어로 카드 — ivory/peach-cream + champagne gold 테두리 ────────── */
.pgcs-rphoto{
  margin:10px 0 14px; padding:22px 20px 20px; border-radius:22px; text-align:center;
  background:linear-gradient(160deg, #fffaf3 0%, #fdeee0 55%, #fbe0e8 100%);
  border:1px solid rgba(201,151,63,.4);
  box-shadow:0 10px 26px rgba(120,90,60,.16), 0 0 0 6px rgba(255,255,255,.5) inset;
  position:relative; overflow:hidden;
  animation:pgcs-card-in .36s cubic-bezier(.2,.8,.3,1) both;
}
.pgcs-rphoto::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 60% at 50% -10%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%);
}
.pgcs-rphoto-tag{
  display:inline-block; margin-bottom:10px; padding:4px 12px; border-radius:999px;
  background:rgba(74,53,100,.07); border:1px solid rgba(74,53,100,.16);
  font-size:.68rem; font-weight:700; letter-spacing:.02em; color:#4a3564;
}
.pgcs-rphoto-figs{ font-size:2rem; line-height:1; margin-bottom:6px; }
.pgcs-rphoto-figs .pgcs-rphoto-x{ margin:0 10px; font-size:1.1rem; vertical-align:middle; color:#e57ea3; }
.pgcs-rphoto-pair{ font-size:.9rem; font-weight:600; color:#4a3564; margin-bottom:12px; }
.pgcs-rphoto-pair .pgcs-rphoto-x2{ color:#e57ea3; margin:0 4px; }

/* §5 — 점수 시각화: 헬스앱 progress bar가 아니라 회전목마 트랙처럼 숫자를 감싸는 얇은 arc.
   mbti.js mq게이지그리기(원둘레 2π·52=326.7)와 같은 계산을 그대로 재사용한다(새 공식 없음). */
.pgcs-rscore-wrap{ position:relative; width:min(38vw,142px); height:min(38vw,142px); margin:2px auto 0; }
.pgcs-rscore-arc{ width:100%; height:100%; transform:rotate(-90deg); }
.pgcs-rscore-track{ fill:none; stroke:rgba(74,53,100,.12); stroke-width:8; }
.pgcs-rscore-fill{
  fill:none; stroke:#c9973f; stroke-width:8; stroke-linecap:round;
  stroke-dasharray:326.7; stroke-dashoffset:326.7;
  transition:stroke-dashoffset .9s cubic-bezier(.2,.8,.3,1);
}
.pgcs-rscore{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:2rem; font-weight:800; line-height:1; color:#3a2a52;
}
@media (prefers-reduced-motion: reduce){ .pgcs-rscore-fill{ transition:none; } }

.pgcs-rtype{
  display:inline-block; margin-top:10px; padding:6px 16px; border-radius:999px;
  background:rgba(74,53,100,.07); border:1px solid rgba(74,53,100,.18);
  font-size:1rem; font-weight:700; color:#3a2a52;
}

/* ── ④ 케미 지표 2x2 ──────────────────────────────────────────────── */
.pgcs-rmetric-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pgcs-rmetric{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:12px 8px; border-radius:14px;
  background:rgba(255,250,240,.85); border:1px solid rgba(214,194,249,.4);
}
.pgcs-rmetric-label{ font-size:.72rem; color:rgba(74,53,100,.62); }
.pgcs-rmetric-grade{ font-size:.92rem; font-weight:700; color:#c9973f; }

/* ── 공용 카드 — 잘맞는이유/조심/싸우면/대화스타일/미션/해석문단이 같은 틀을 쓴다 ──── */
.pgcs-rcard{
  margin:0 0 12px; padding:16px 16px 14px; border-radius:18px;
  background:rgba(255,250,240,.85); border:1px solid rgba(214,194,249,.4);
  animation:pgcs-card-in .32s cubic-bezier(.2,.8,.3,1) both;
}
.pgcs-rcard-ttl{ margin:0 0 10px; font-size:.9rem; font-weight:700; color:#3a2a52; }
.pgcs-rreasons{ margin:0; padding:0 0 0 1.1em; display:flex; flex-direction:column; gap:6px; text-align:left; }
.pgcs-rreasons li{ font-size:.84rem; line-height:1.55; color:#4a3564; }
.pgcs-rplain{ margin:0; font-size:.84rem; line-height:1.65; color:#4a3564; white-space:pre-wrap; text-align:left; }

/* §7 — 관계를 한 문장으로: oneLiner를 hero 밖 독립 section으로 승격(새 문장 생성 아님) */
.pgcs-rline{ background:rgba(255,250,240,.85); border-color:rgba(246,185,215,.4); }
.pgcs-rline-txt{ margin:0; font-size:.92rem; font-weight:600; line-height:1.55; color:#4a3564; text-align:left; }

/* §6 — 조심할 점: 경고이지만 무겁지 않게, 부드러운 골드 톤 */
.pgcs-rcaution{ background:rgba(201,151,63,.09); border-color:rgba(201,151,63,.3); }
.pgcs-rcaution-txt{ margin:0; font-size:.84rem; line-height:1.6; color:#5a3f1f; text-align:left; }

/* §7·§8 — 싸우면?/대화 스타일: 짧은 말풍선 두 줄. 실제 대화가 아니라 예시임을 톤으로만 표현 */
.pgcs-rfight, .pgcs-rchat{ display:flex; flex-direction:column; gap:8px; margin-bottom:4px; }
.pgcs-rfight-bubble, .pgcs-rchat-line{
  max-width:78%; padding:9px 13px; border-radius:14px; font-size:.82rem; line-height:1.4;
}
.pgcs-rfight-bubble.me, .pgcs-rchat-line.me{
  align-self:flex-end; background:linear-gradient(135deg,#e8a86a,#f2c979); color:#3a2410;
  border-bottom-right-radius:4px;
}
.pgcs-rfight-bubble.them, .pgcs-rchat-line.them{
  align-self:flex-start; background:rgba(74,53,100,.08); color:#4a3564;
  border-bottom-left-radius:4px;
}
.pgcs-rfight-result, .pgcs-rchat-summary{
  margin:8px 0 0; font-size:.78rem; color:rgba(74,53,100,.62); text-align:center;
}

/* §9 — 오늘 해볼 것: 살짝 더 밝혀서 CTA 느낌 (핑크만 포인트로 — 대형 보라 카드 연속 금지) */
.pgcs-rmission{ background:rgba(246,169,198,.16); border-color:rgba(246,169,198,.38); }
.pgcs-rmission-ttl{ margin:0; font-size:.9rem; font-weight:700; color:#3a2a52; line-height:1.5; text-align:left; }
.pgcs-rmission-sub{ margin:6px 0 0; font-size:.78rem; color:rgba(74,53,100,.66); text-align:left; }

/* ── ⑩ 공유 / 저장 ─────────────────────────────────────────────────── */
.pgcs-ractions{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:6px 0 12px; }
.pgcs-raction{
  min-height:50px; border-radius:999px; border:1px solid rgba(201,151,63,.4);
  background:linear-gradient(135deg,#f2c979,#e8a86a); color:#3a2410; font-size:.84rem; font-weight:700;
}
.pgcs-raction-alt{ background:rgba(255,250,240,.9); color:#4a3564; border-color:rgba(214,194,249,.5); }
.pgcs-raction:active{ transform:scale(.98); }

/* §10 — 하루의 한마디(인라인, 새 창구 아님) — 짧은 코멘트를 아바타+말풍선으로 바로 보여준다 */
.pgcs-rharu-say{
  display:flex; align-items:flex-start; gap:10px; margin-bottom:10px;
  animation:pgcs-card-in .32s cubic-bezier(.2,.8,.3,1) both;
}
.pgcs-rharu-say img{ width:40px; height:40px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.8); flex:0 0 auto; box-shadow:0 3px 10px rgba(120,90,60,.18); }
.pgcs-rharu-bubble{
  flex:1; min-width:0; padding:11px 14px; border-radius:16px; border-bottom-left-radius:4px;
  background:rgba(255,250,240,.9); border:1px solid rgba(246,185,215,.4);
}
.pgcs-rharu-bubble b{ display:block; font-size:.78rem; font-weight:700; color:#3a2a52; margin-bottom:3px; }
.pgcs-rharu-comment{ margin:0; font-size:.84rem; line-height:1.55; color:#4a3564; text-align:left; }

/* ── ⑪ 하루에게 더 물어보기 — 매우 중요한 CTA(지시 원문) ─────────────── */
.pgcs-rharu{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  min-height:66px; padding:12px 14px; margin-bottom:12px; border-radius:18px;
  background:linear-gradient(135deg, rgba(214,194,249,.35), rgba(201,151,63,.14));
  border:1px solid rgba(201,151,63,.35); color:#3a2a52;
}
.pgcs-rharu img{ width:40px; height:40px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.8); flex:0 0 auto; }
.pgcs-rharu-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.pgcs-rharu-txt b{ font-size:.86rem; font-weight:700; }
.pgcs-rharu-txt span{ font-size:.72rem; color:rgba(74,53,100,.62); }
.pgcs-rharu-arrow{ flex:0 0 auto; font-size:1.2rem; color:#c9973f; }
.pgcs-rharu:active{ transform:scale(.99); }

/* ── ⑫ 다시 타기 ───────────────────────────────────────────────────── */
.pgcs-rreplay{
  width:100%; min-height:48px; margin-bottom:8px; border-radius:999px;
  background:none; border:1px solid rgba(74,53,100,.24); color:#4a3564; font-size:.84rem; font-weight:600;
}
.pgcs-rreplay:active{ background:rgba(74,53,100,.06); }

@media (prefers-reduced-motion: reduce){
  .pgcs-rphoto, .pgcs-rcard, .pgcs-rharu-say{ animation:none; }
  .pgcs-raction:active, .pgcs-rharu:active{ transform:none; }
}

/* ── §14 반응형 — 세로 공간 부족해도 카드·버튼이 다 스크롤로 들어와야 한다 ─────
   (질문씬과 같은 원칙 — 배경장식부터 줄이고, 카드 내용은 줄이지 않는다) */
@media (max-height:700px){
  .pgcs-rphoto{ padding:16px 16px 14px; margin:6px 0 10px; }
  .pgcs-rphoto-figs{ font-size:1.6rem; }
  .pgcs-rscore-wrap{ width:min(30vw,112px); height:min(30vw,112px); }
  .pgcs-rscore{ font-size:1.7rem; }
  .pgcs-rcard{ padding:13px 14px 12px; margin-bottom:9px; }
}
@media (max-width:360px){
  .pgcs-rphoto-pair{ font-size:.82rem; }
  .pgcs-rtype{ font-size:.88rem; padding:5px 13px; }
}

/* ════════════════════════════════════════════════════════════════════
   ── 포춘나무 (2026-09-06 4차 개편 → 5차 [포춘나무 화면 최종 UI 수정 지시] +
      사람이 붙인 참조 시안 ChatGPT Image 2026-09-06 16_15_33) ──
   4차는 회전목마처럼 자기 헤더를 가진 전체화면이었다. 5차 지시 §0·§3·첨부 시안 —
   "새로 만드는 게 아니다. 기존처럼 화면 중앙 패널 하나 + 뒤의 놀이터 밤 배경이
   자연스럽게 보여야 한다" · 시안은 **둥근 모서리 전부 + 화면 중앙에 뜨는 카드**를
   보여준다(아래쪽만 둥근 바텀시트가 아니다) — 그래서 오버레이를 가운데 정렬하고
   패널을 사방 라운드로 바꾼다. 딤·safe-area·배너 대응은 공용 `.pg-overlay`/`.pg-panel`
   규칙을 그대로 물려받는다(§17 "기존 기능 삭제 후 새로 구현 금지") — 여기서 바꾸는
   것은 정렬(가운데)·모서리(전체 라운드)·색조(팔레트) 뿐이다.
   ════════════════════════════════════════════════════════════════════ */
/* 2026-09-10(4차) 사람 지시 [포춘나무 화면 최종 개선] §1·§3 — "화면 중앙의 거대한
   흰색 카드가 MASTER를 지나치게 가린다 · 패널 시작 위치를 아래로 · bottom sheet
   스타일로". 5차(위 주석)는 [화면 중앙 카드]를 의도적으로 골랐지만, 이번 지시가
   그 판단을 뒤집는다(§ 최근지시 우선) — 다른 네 시설과 같은 [아래에서 올라오는
   시트]로 바꿔 MASTER(나무·별·쪽지·하트문양·꽃·랜턴·잠든 고양이)가 위로 드러나게 한다. */
.pg-overlay.is-tree-gate{
  align-items:flex-end; justify-content:center; padding:0;
}
.pg-overlay.is-tree-gate .pg-panel{
  /* warm ivory/cream + soft sage/pink 톤 + champagne gold 포인트(§9). 진한 브라운·
     두꺼운 금테·검정/네이비 대형 영역 없음 — 테두리 1.5px, 포인트는 얇은 색조뿐. */
  width:100%; max-width:520px; margin:0 auto;
  border-radius:30px 30px 0 0;
  border:1.5px solid rgba(224,180,90,.4); border-bottom:0;
  background:linear-gradient(180deg, rgba(255,250,244,.95) 0%, rgba(253,246,238,.97) 40%, rgba(247,241,235,.98) 100%);
  box-shadow:0 -10px 34px rgba(70,90,60,.16);
  min-height:0; max-height:min(70dvh, calc(62dvh + var(--banner-ad-height, 0px)));
  padding-top:30px;                     /* 히어로 사진을 지운 자리 — ×버튼과 안 겹치게 */
}
/* ★ 실측 버그 — `.pgtr-hero`(position:relative)가 `#pg-menu-close`(position:absolute)보다
   DOM 순서상 뒤에 있어(나무_그리기 가 `.pg-panel` 맨 끝에 `.pgtr` 를 붙인다) z-index 가
   둘 다 auto 일 때 **나중에 그려지는 쪽이 위로 덮는다** — X 를 눌러도 그림이 클릭을
   먼저 받아 안 닫혔다(elementFromPoint 로 확인: 닫기 버튼 자리의 최상단 요소가 .pgtr-hero
   였다). 이 화면에서만 닫기를 확실히 위로 올린다. */
.pg-overlay.is-tree-gate #pg-menu-close{ z-index:5; }

.pgtr{ display:flex; flex-direction:column; min-height:0; font-family:inherit; }
.pgtr.hidden{ display:none; }
.pgtr-scroll{ flex:1 1 auto; min-height:0; }

/* ── 나무 비주얼 — 패널 맨 위, 가장 먼저 눈에 들어온다(지시 §4) ───────────────
   장식은 원화(tree.png)에 이미 있다(잎·꽃·마음 태그·별빛 하나) — DOM 반짝임을
   덧대지 않는다(지시 §4 마지막 줄 "장식을 중복시키지 않는다"). 시안은 더 화려한
   나무 원화를 보여주지만 **지시 §4 "임의로 새 이미지를 생성·교체하지 않는다"** 가
   시안보다 우선이다 — 지금 쓰는 tree.png 그대로 둔다. */
/* 2026-09-10(4차) §2 — "카드 내부 중복 나무 이미지 제거 · 배경 MASTER 자체가
   HERO VISUAL." 이 사진(tree-hero.jpg)은 배경이 밤 지도 크롭이던 5차 때는
   [카드 안의 유일한 나무 그림]이라 필요했지만, 지금은 시트 뒤가 이미 나무
   MASTER 라 같은 나무가 두 번(배경+카드) 보인다 — 그림만 지운다(DOM/JS 그대로). */
.pgtr-hero{ display:none; }
/* 지시 §11 STEP2 — CTA 를 누른 순간 나무가 한 번 은은하게 빛난다. */
.pgtr-hero.is-glow{ animation:pgtr-hero-glow .5s ease-out; }
@keyframes pgtr-hero-glow{
  0%{ filter:brightness(1); } 45%{ filter:brightness(1.14) saturate(1.12); } 100%{ filter:brightness(1); }
}
@media (prefers-reduced-motion: reduce){ .pgtr-hero.is-glow{ animation:none; } }

/* ── 장식 문구 — 시안처럼 ✦ 로 양쪽을 여민다(제목·성장 문구·하단 한 줄 공용). ──── */
.pgtr-orn{ display:flex; align-items:center; justify-content:center; gap:6px; }
.pgtr-orn::before, .pgtr-orn::after{
  content:""; flex:1 1 auto; max-width:22px; height:1px; background:rgba(224,180,90,.45);
}

/* ── 타이틀 · 카피 · privacy badge(지시 §5) — 시안은 인디고/보라 계열 글자다
   (브라운이 아니다 — 고민해결소로 이어질 라벤더/인디고와도 더 잘 붙는다). ──────── */
.pgtr-body{ padding:8px 6px 2px; text-align:center; }
.pgtr-h2{ margin:0 0 4px; font-size:1.14rem; font-weight:700; color:#453a72; letter-spacing:.01em; }
.pgtr-lead{ margin:0; font-size:.82rem; font-weight:600; color:#5c5480; line-height:1.4; }
.pgtr-tag{ margin:0 0 8px; font-size:.82rem; font-weight:600; color:#5c5480; line-height:1.4; }
.pgtr-badge{
  display:inline-block; margin:0 0 10px; padding:4px 11px; border-radius:999px;
  background:rgba(255,255,255,.6); border:1px solid rgba(160,150,180,.3);
  color:#5c5480; font-size:.66rem; font-weight:600;
}

/* ── 성장 3단 — 씨앗 → 새싹 → 포춘나무(지시 §6). progress bar·XP·연속출석 없음.
   시안은 세 원 모두 같은 톤(옅은 라벤더/핑크)이고 **현재 단계에만** gold glow 를
   준다 — 지나간/남은 단계를 흑백으로 죽이지 않는다. ──────────────────────────── */
.pgtr-growth-row{ margin:0 0 12px; }
/* 2026-09-10(3차) — "마음을 맡길수록 나무가 자라요"의 뜻이 더 또렷이 보이게
   라벨만 한 단 또렷하게(굵기·색). 3단 구조·연출은 그대로다. */
.pgtr-growth-label{ margin:0 0 8px; font-size:.74rem; font-weight:600; color:#6d6390; }
.pgtr-growth-steps{ display:flex; align-items:center; justify-content:center; }
.pgtr-gstep{ display:flex; flex-direction:column; align-items:center; gap:3px; width:62px; }
.pgtr-gstep-ico{
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1rem; background:rgba(210,190,220,.22); border:1px solid rgba(190,170,210,.4);
}
.pgtr-gstep-txt{ font-size:.66rem; font-weight:600; color:#6d6390; }
/* 현재 단계만 champagne gold glow(지시 §6 — "마지막/현재 단계에 은은한 glow"). */
.pgtr-gstep.is-current .pgtr-gstep-ico{
  background:rgba(232,196,118,.24); border-color:#e0b45a;
  box-shadow:0 0 0 3px rgba(232,196,118,.22), 0 0 12px rgba(232,196,118,.45);
}
.pgtr-gstep.is-current .pgtr-gstep-txt{ color:#8a6a1f; font-weight:700; }
/* 2026-09-10(4차) §5 — "단순 아이콘 나열이 아니라 씨앗─새싹─포춘나무 진행 바처럼".
   구조(3단 · 연출)는 그대로 두고 연결선만 [지나온 길]과 [남은 길]로 가른다. */
.pgtr-gstep-line{ flex:0 0 22px; height:2px; border-radius:1px; background:rgba(190,170,210,.35); margin-bottom:15px; }
.pgtr-gstep.is-done + .pgtr-gstep-line{ background:linear-gradient(90deg, #b7d3a5, #e0b45a); }

/* ── Primary CTA — deep indigo/navy-purple + champagne gold 포인트 + cream 글자(지시 §7) ── */
.pgtr-cta{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  padding:11px 14px; border-radius:16px; margin-bottom:8px; font-family:inherit;
  border:1px solid transparent;
}
.pgtr-cta:active{ transform:scale(.98); }
@media (prefers-reduced-motion: reduce){ .pgtr-cta:active{ transform:none; } }
.pgtr-cta-ico{ flex:0 0 auto; font-size:1.25rem; line-height:1; }
.pgtr-cta-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.pgtr-cta-ttl{ font-size:.9rem; font-weight:700; line-height:1.3; }
.pgtr-cta-sub{ font-size:.7rem; line-height:1.35; }
/* 2026-09-10(4차) 사람 지시 — "검은색 또는 남색의 무거운 버튼은 사용하지 않는다.
   soft sage green + cream + subtle gold 계열." 3차(바로 위 이력)는 남색을 옅게만
   낮췄는데, 이번 지시가 색 계열 자체를 바꾼다(§ 최근지시 우선) — sage 를 메인으로. */
.pgtr-cta-primary{
  background:linear-gradient(150deg, #cfe0c4 0%, #a9c79a 100%);
  border-color:rgba(224,180,90,.55);
  box-shadow:0 6px 16px rgba(90,110,70,.22), inset 0 0 0 1px rgba(255,255,255,.4);
}
.pgtr-cta-primary .pgtr-cta-ico{
  color:#3f5c34; text-shadow:0 1px 2px rgba(255,255,255,.4);
}
.pgtr-cta-primary .pgtr-cta-ttl{ color:#2e4326; }
.pgtr-cta-primary .pgtr-cta-sub{ color:#4c6640; }

/* ── Secondary CTA — cream 바탕 + lavender/indigo 글자, Primary 보다 강도를 낮춘다(지시 §8) ── */
.pgtr-cta-secondary{
  background:rgba(255,253,248,.82);
  border-color:rgba(230,180,195,.32);
}
.pgtr-cta-secondary .pgtr-cta-ico{ color:#c98a9e; }
.pgtr-cta-secondary .pgtr-cta-ttl{ color:#4a3f3a; }
.pgtr-cta-secondary .pgtr-cta-sub{ color:#8a7d72; }

/* ── 하단 감성 한 줄 — CTA 보다 눈에 띄면 안 된다(지시 §9) ─────────────────── */
.pgtr-foot{ margin:4px 0 0; text-align:center; font-size:.66rem; line-height:1.5; color:#8a84a0; }

/* ── 지시 §11 STEP3 — CTA 위치에서 떠오르는 작은 빛(2~4개, 700ms 안에 사라진다).
   화면 전체를 덮는 파티클이 아니다 — 버튼 근처에서만 짧게. ─────────────────── */
.pgtr-spark{
  position:fixed; z-index:500; width:6px; height:6px; border-radius:50%;
  background:radial-gradient(circle, #fff6d8 0%, #cdbdf0 70%, transparent 100%);
  box-shadow:0 0 8px 2px rgba(205,189,240,.55);
  pointer-events:none;
  animation:pgtr-spark-rise .65s ease-out forwards;
}
@keyframes pgtr-spark-rise{
  0%{ opacity:0; transform:translateY(0) scale(.6); }
  25%{ opacity:1; }
  100%{ opacity:0; transform:translateY(-70px) scale(1.05); }
}

/* ── 반응형 — 짧은 화면은 히어로를 더 줄이고, 폴드 좁은 화면도 줄바꿈만 될 뿐
   overflow 는 나지 않는다(가로 폭에 의존하는 값이 없다 · 지시 §16). ───────── */
@media (max-height:700px){
  .pgtr-hero{ height:22vh; min-height:140px; }
}

/* ════════════════════════════════════════════════════════════════════
   2026-09-06 놀이터 메인 화면 최종 개편 — 이 절이 정본이다(파일 맨 끝 · 위를 다 이긴다).
   ────────────────────────────────────────────────────────────────────
   사람 지시 요약:
     §1 광고 위까지 풀스크린(카메라·배경은 이미 되어 있다 — village-fullbleed.js)
     §3 [오늘의 놀이] 진행도를 하루 말풍선에서 떼어 헤더 쪽 독립 칩으로
     §4 하단을 크게 덮던 검정 패널 대신 우하단 floating NPC(반신) + 말풍선
     §6 [오늘의 추천]을 쇼핑 배지가 아니라 아주 작은 문구로
     §8 배경에 미세한 생동감 — 하늘 별 몇 개 · 시설별 은은한 glow(전부 동시에 안 켜진다)
   ★ 배경 원화·시설 좌표·5개 콘텐츠 라우팅은 여전히 한 픽셀도 안 건드린다.
   ════════════════════════════════════════════════════════════════════ */

/* ── §3 오늘의 놀이 진행도 칩 — 재화 pill 바로 아래(row2), 오른쪽 ─────────
   자리는 bgm-chip(row2·왼쪽)과 짝을 이루는 오른쪽 자리다 — 지금까지 비어 있었다. */
.pg-progress-chip{
  position:fixed; z-index:22;
  top:var(--pg-row2, 56px); right:var(--vg-s3, 12px);
  display:inline-flex; align-items:center; gap:4px;
  height:28px; padding:0 9px; border-radius:999px;
  border:1px solid var(--pg-line, rgba(255,255,255,.24));
  background:var(--pg-glass-soft, rgba(38,28,56,.56));
  color:var(--pg-ink, #f6efe3);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:none;
  font:600 .68rem/1 var(--font-ui,"Malgun Gothic",sans-serif); letter-spacing:.01em;
  white-space:nowrap;
}
.pg-progress-label{ opacity:.82; }
.pg-progress-count{ color:var(--pg-gold, #c9a961); font-weight:700; }
.pg-progress-stars{ display:inline-flex; gap:1px; font-size:.66rem; }
.pg-progress-star{ color:var(--pg-gold, #c9a961); opacity:.92; }
.pg-progress-star:not(.is-on){ opacity:.32; color:var(--pg-ink, #f6efe3); }
@media (max-width:360px){
  .pg-progress-chip{ padding:0 8px; gap:4px; font-size:.62rem; height:27px; }
}
/*  3/3 을 채운 그 순간에만 별이 순서대로 반짝인다 — 0.6~1초, js 가 클래스를 곧 뗀다
    (미션UI그리기() · setTimeout 1000ms) 그래서 반복되지 않는다. */
.pg-progress-chip.pg-progress-done .pg-progress-star.is-on{
  animation:pg-progress-pop .5s ease-out both;
  animation-delay:calc(var(--pg-star-i) * .14s);
}
@keyframes pg-progress-pop{
  0%{ transform:scale(1); text-shadow:none; }
  45%{ transform:scale(1.5); text-shadow:0 0 8px rgba(217,180,92,.85); }
  100%{ transform:scale(1); text-shadow:none; }
}
@media (prefers-reduced-motion: reduce){
  .pg-progress-chip.pg-progress-done .pg-progress-star.is-on{ animation:none; }
}

/* ── §4 하루 — 우하단 floating NPC(반신) + 말풍선(캐릭터 왼쪽 위) ──────────
   ★ 화면 하단을 크게 덮던 검정 패널을 걷는다. 캐릭터는 늘 남고, 말풍선만
     시간이 지나면 사라진다(.pg-bubble-faded, playground.js 말풍선페이드예약()).
   ★ 새 캐릭터를 만들지 않는다 — 마을·입구씬이 이미 쓰는 full/haru.png(투명 배경 전신)를
     그대로 쓰고, 여기서는 상반신만 보이게 위쪽만 잘라 쓴다. */
.pg-haru{
  position:fixed; z-index:8; left:auto;
  /* 2026-09-10(추가 수정) §4 — 하루를 20~25% 키운 만큼 오른쪽 여백을 살짝 좁혀
     "조금 더 오른쪽"으로 옮긴다(분수 핀과는 여전히 안 겹친다 — 분수는 화면 하단
     중앙 86%/50%, 하루는 우측 고정이라 축이 다르다). */
  right:10px; transform:none;   /* ★ §11·§12 절의 옛 translateX(-50%) 를 되돌린다 — 거긴 가운데 정박, 여긴 우측 정박이다 */
  /* 2026-09-12 FINAL VISUAL POLISH §14·§15 — 광고 배너와 몸 사이가 너무 가까워
     [광고판 위에 서 있는] 느낌이 났다는 지적으로 12px → 32px(+20px, 요청 15~25px 범위). */
  bottom:calc(var(--banner-ad-height, 0px) + env(safe-area-inset-bottom, 0px) + 32px);
  max-width:min(60vw, 224px);
  display:flex; flex-direction:column; align-items:flex-end; gap:4px;
  padding:0; margin:0; border:0; background:none; box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  text-align:left; cursor:default; font-size:1rem;
  animation:pg-haru-in2 .42s cubic-bezier(.2,.8,.3,1) both;
}
.pg-haru[hidden]{ display:none; }
.pg-haru:active{ transform:none; }
/*  2026-09-13 FINAL PREMIUM POLISH §14 — 발밑 아주 약한 접지 그림자. `.pg-haru-avatar`
    자체는 `overflow:hidden`(반신 크롭에 필요 — 손대지 않는다)이라 그 안에 그림자를
    못 넣는다 — 대신 안 잘리는 부모(`.pg-haru`, position:fixed)에 얹고, `align-items:
    flex-end`로 아바타가 오른쪽에 붙는 것과 같은 폭(74px)만큼만 오른쪽에 맞춘다.
    검은 그림자·강한 glow 금지 — 배경 노을과 섞이는 옅은 갈색. */
.pg-haru::after{
  content:""; position:absolute; right:0; bottom:-3px; width:74px; height:10px;
  background:radial-gradient(ellipse, rgba(70,45,20,.24) 0%, rgba(70,45,20,0) 72%);
  pointer-events:none;
}
@keyframes pg-haru-in2{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){ .pg-haru{ animation:none; } }

/*  말풍선 — 크림→연보라 파스텔, 캐릭터보다 과하게 크지 않다. 최대 2줄(§8 .pg-haru-say 상속).
    2026-09-10(추가 수정) §5 — 폭/높이를 약 12% 줄이고(패딩·글자 크기) 캐릭터와의 간격도
    좁힌다(위 .pg-haru gap 6→4px) — "캐릭터+말풍선이 하나의 인터랙션"으로 보이게. */
.pg-haru-bubble{
  position:relative; max-width:100%;
  /* 2026-09-11 [FULL SCREEN WORLD 전환] §6 — 말풍선이 분수·광장을 가린다는 지적.
     캐릭터 곁의 작은 NPC 대사 태그로 더 좁힌다(패딩·최대폭 축소, 글자 한 단계 더 작게).
     최대 2줄(.pg-haru-say line-clamp)은 그대로 — 내용이 잘리지, 카드가 안 커진다. */
  max-width:min(52vw, 176px);
  padding:6px 10px; border-radius:12px 12px 4px 12px;
  background:linear-gradient(160deg, #faf3e8 0%, #efe2f6 100%);
  border:1px solid rgba(201,169,97,.4);
  color:#4a3550;
  font:500 .66rem/1.34 var(--font-ui,"Malgun Gothic",sans-serif);
  box-shadow:0 6px 16px rgba(20,10,30,.24);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:opacity .5s ease, transform .5s ease;
}
.pg-haru-bubble .pg-haru-say{ color:inherit; }
.pg-haru-bubble:active{ transform:scale(.98); }
/*  꼬리 — 말풍선 오른쪽 아래에서 캐릭터 쪽을 가리킨다 */
.pg-haru-bubble::after{
  content:""; position:absolute; right:18px; bottom:-5px;
  width:10px; height:10px; background:#efe2f6;
  border-right:1px solid rgba(201,169,97,.4); border-bottom:1px solid rgba(201,169,97,.4);
  transform:rotate(45deg); border-radius:0 0 3px 0;
}
/*  시간이 지나면 말풍선만 사라진다 — 캐릭터는 그대로 화면에 남는다(요청 §4) */
.pg-haru.pg-bubble-faded .pg-haru-bubble{
  opacity:0; transform:translateY(6px) scale(.96); pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  .pg-haru-bubble{ transition:none; }
}

/*  캐릭터 — 반신만 보이게 위쪽만 남기고 자른다(전신 자산의 위 55%). 배경 박스를 두지 않는다 —
    PNG 자체가 투명이라 그림자만 얹으면 [무대 위에 서 있는] 느낌이 난다. */
/* 2026-09-10(추가 수정) §4 — 하루가 [작은 장식 캐릭터]처럼 안 보이게 약 22%(20~25% 안) 확대.
   에셋·비율(66:128)은 그대로, 크기만 키운다(§ "새 이미지·재디자인 금지"). */
/* 2026-09-12 [VISUAL POLISH] §4 — 하단에서 다소 크게 보인다는 지적으로 약 8% 축소
   (80→74px · 156→144px, 비율 그대로 · MASTER 원화·포즈는 한 픽셀도 안 바꾼다). */
.pg-haru-avatar{
  flex:0 0 auto; width:74px; height:144px; overflow:hidden;
  border:0; padding:0; margin:0; background:none; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.pg-haru-avatar img{
  /*  ★ 옛 원형 아바타 규칙(border-radius:50%·테두리·크림 배경, §11·§12 절)을 여기서 지운다 —
      그 규칙의 선택자(.pg-haru-face)보다 이 선택자(.pg-haru-avatar img)가 더 구체적이라
      값을 하나하나 되돌리지 않으면 30px 원형 크롭이 그대로 남는다. */
  display:block; width:100%; height:auto;
  border-radius:0; border:0; background:none; object-fit:fill;
  filter:drop-shadow(0 8px 10px rgba(8,4,18,.45));
}
.pg-haru-avatar:active img{ transform:scale(.97); }

@media (max-width:360px){
  .pg-haru{ max-width:min(56vw, 196px); right:8px; }
  .pg-haru-avatar{ width:64px; height:125px; }
  .pg-haru::after{ width:64px; }
}

/* ── [하루의 오늘 추천] 플로팅 카드 — 2026-09-10(추가 수정) 사람 지시 ─────────
   §"BACKGROUND ↓ PLAYGROUND WORLD ↓ FLOATING RECOMMENDATION CARD" — 문서
   흐름에 안 얹히는 `.pg-haru`와 같은 결의 `position:fixed` 카드. 하루 뭉치
   (우하단, 하루가 §4 에서 22% 커진 뒤 세로 약 220px)보다 위쪽에 둬 겹치지 않는다.
   검정 띠 대신 아주 옅은 그림자 하나로 [배경 위에 떠 있다]는 느낌만 낸다. */
/*  2026-09-12 [VISUAL POLISH] §1·§2 — 카드가 커서 분수·광장을 가린다는 지적으로
    약 20% 컴팩트화(패딩·아이콘·글자·gap 전부 한 단계씩). 정보 구조(eyebrow/제목/
    한 줄/CTA)는 그대로 — 새 필드를 안 만든다. 줄어든 높이만큼 분수(top:69.6%)
    쪽이 더 드러난다 — 배경 원화는 손 안 댔다. */
.pg-reco{
  position:fixed; z-index:7; left:16px; right:16px;
  /* 2026-09-13 FINAL PREMIUM POLISH §5 — 진짜 원인 실측: 카드 자체 텍스트가 겹치는
     게 아니라(제목/부제 rect 는 안 겹쳤다), 하루 말풍선이 2줄(첫방문/오랜만 인사)일 때
     .pg-haru 전체 높이가 자라 이 카드 아래쪽과 겹쳤다(실측 겹침 36.5px). 카드를 다시
     키우지 않고(§7) 이 오프셋만 그 최악 높이를 넘게 올린다.
     ★ 196→244px 로 처음 올렸더니 이번엔 지도 좌표(top:69.6%)에 고정된 행운분수
     이름표와 새로 겹쳤다(실측 겹침 4px) — 카드를 올릴수록 지도 위 라벨과, 낮출수록
     하루와 부딪히는 좁은 틈이었다. 244→256px 로 한 번 더 올려 두 제약을 모두
     비켜간다(실측: 하루와 6.5px·분수 라벨과 8px 여유). */
  bottom:calc(var(--banner-ad-height, 0px) + env(safe-area-inset-bottom, 0px) + 256px);
  max-width:360px; margin:0 auto;
  display:flex; flex-direction:column; gap:2px; text-align:left;
  /* 2026-09-12 FINAL VISUAL POLISH §9·§11 — 앞판(±20% 축소판) 대비 추가 15~20% 축소.
     padding·행간·eyebrow~row 사이 gap 을 한 번 더 줄인다 — 정보 구조(eyebrow/제목/
     한 줄/CTA)는 그대로, 여백만 줄인다. */
  padding:5px 10px 5px; border-radius:15px; border:0; font-family:inherit; cursor:pointer;
  background:linear-gradient(165deg, rgba(255,250,242,.92) 0%, rgba(255,241,247,.88) 100%);
  box-shadow:0 5px 14px rgba(120,90,70,.14);
  animation:pg-haru-in2 .42s .1s cubic-bezier(.2,.8,.3,1) both;
}
.pg-reco[hidden]{ display:none; }
.pg-reco:active{ transform:scale(.99); }
.pg-reco-eyebrow{
  font-size:.56rem; font-weight:700; letter-spacing:.02em; color:#a6791f;
  font-family:var(--vt-font-display, inherit); line-height:1.15;
}
.pg-reco-row{ display:flex; align-items:center; gap:7px; }
.pg-reco-ico{ width:20px; height:20px; flex:0 0 auto; color:#b9748f; }
.pg-reco-ico use, .pg-reco-ico{ stroke:currentColor; }
.pg-reco-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:0; }
.pg-reco-ttl{
  font-size:.78rem; font-weight:700; color:#4a3550; line-height:1.15;
  font-family:var(--vt-font-display, inherit);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pg-reco-sub{
  font-size:.6rem; color:#8b7fa0; line-height:1.15;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pg-reco-cta{
  flex:0 0 auto; padding:4px 9px; border-radius:999px;
  background:linear-gradient(135deg, #f6c9a0, #f0c675); color:#5a3d1a;
  font-size:.62rem; font-weight:700; font-family:var(--vt-font-display, inherit);
}
/*  2026-09-13 3/3 HOTFIX §2·§3·§6 — 완료 상태에서는 [가기] CTA·시설 아이콘을 없앤다.
    커서도 기본으로 되돌린다(더 이상 눌러서 가는 카드가 아니다). */
.pg-reco.is-complete{ cursor:default; }
.pg-reco.is-complete .pg-reco-cta,
.pg-reco.is-complete .pg-reco-ico{ display:none; }
@media (max-width:360px){
  .pg-reco{ left:12px; right:12px; padding:4px 9px 4px; }
  .pg-reco-ico{ width:18px; height:18px; }
  .pg-reco-ttl{ font-size:.74rem; }
}
@media (prefers-reduced-motion: reduce){ .pg-reco{ animation:none; } }

/* ── §6 → 2026-09-12 FINAL VISUAL POLISH §20·§21 — 큰 "오늘 추천" 배지를 완전히
   내린다. 하루 추천 카드가 이미 그 역할을 하고 있어 시설 라벨 위에 또 큰 문구를
   띄우면 추천이 두 번 강조된다(§20 지적). 이제 라벨 자체에 아주 작은 ✦ 하나만
   붙이고(별도 배경/그림자 없음) 테두리만 살짝 더 금색으로 — "광장의 주인공이 되지
   않게"(§21). 자리·크기 전부 여기서 새로 정한다(위 §6 규칙의 position/size는 버린다). */
.pg-attraction.is-today .shop-neon{
  border-color:rgba(214,182,116,.85);
}
.pg-attraction.is-today .shop-neon::after{
  content:"✦";
  position:static; margin-left:4px; transform:none;
  display:inline; width:auto; height:auto;
  padding:0; border-radius:0;
  background:none; box-shadow:none;
  color:#c9a153; font-size:.85em; font-weight:600;
  white-space:normal; animation:none;
}

/* ── §8 배경에 미세한 생동감 — 한 번에 하나씩만, 아주 약하게 ──────────────
   시설 좌표(top/left)는 그대로다 — 각 시설 버튼(중심 정박)에 은은한 glow 를 얹을 뿐,
   그림 자체를 다시 그리지 않는다. */
.pg-amb{
  position:absolute; left:50%; top:50%; z-index:0; pointer-events:none;
  border-radius:50%; filter:blur(2px); transform:translate(-50%,-50%);
}
.pg-amb-fountain{
  width:74px; height:74px;
  background:radial-gradient(circle, rgba(150,225,236,.34) 0%, rgba(150,225,236,0) 70%);
  animation:pg-amb-breathe 3.8s ease-in-out infinite;
}
.pg-amb-tree{
  width:58px; height:58px;
  background:radial-gradient(circle, rgba(247,226,168,.30) 0%, rgba(247,226,168,0) 70%);
  animation:pg-amb-breathe 4.6s ease-in-out infinite; animation-delay:1.2s;
}
.pg-amb-carousel{
  width:62px; height:62px;
  background:radial-gradient(circle, rgba(247,205,220,.30) 0%, rgba(247,205,220,0) 70%);
  animation:pg-amb-breathe 5.4s ease-in-out infinite; animation-delay:2.4s;
}
.pg-amb-arcade{
  width:58px; height:58px;
  background:radial-gradient(circle, rgba(201,188,228,.32) 0%, rgba(201,188,228,0) 70%);
  opacity:0; transition:opacity .4s ease;
}
/* 2026-09-10(추가 수정) §12 우선순위4 — 미끄럼틀만 빠져 있던 은은한 glow(별/꽃잎 결의
   민트-핑크 톤). 나머지 넷과 같은 패턴 — 늘 옅게 숨쉬고, 강한 반짝임은 아니다. */
.pg-amb-slide{
  width:60px; height:60px;
  background:radial-gradient(circle, rgba(180,220,226,.30) 0%, rgba(180,220,226,0) 70%);
  animation:pg-amb-breathe 4.2s ease-in-out infinite; animation-delay:.6s;
}

/* ── §12 우선순위1 — 벚꽃잎 낙하(가벼운 배경 생동감) ──────────────────── */
.pg-petal-fall{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.pg-petal-fall i{
  position:absolute; top:-6%; width:7px; height:7px; border-radius:60% 0 60% 0;
  background:linear-gradient(135deg, #fbd7e3, #f3aec8);
  opacity:0; animation-name:pg-petal-drift; animation-timing-function:ease-in-out; animation-iteration-count:infinite;
}
@keyframes pg-petal-drift{
  0%{ opacity:0; transform:translate(0,0) rotate(0deg); }
  8%{ opacity:.85; }
  92%{ opacity:.7; }
  100%{ opacity:0; transform:translate(26px, 112vh) rotate(220deg); }
}
@media (prefers-reduced-motion: reduce){ .pg-petal-fall{ display:none; } }
/* 미니게임존은 [오늘의 추천]일 때만 은은하게 켜진다(요청 §8 미니게임존 항목 그대로) */
.pg-attraction.is-today .pg-amb-arcade{ opacity:1; animation:pg-amb-breathe 3.2s ease-in-out infinite; }
@keyframes pg-amb-breathe{
  0%,100%{ opacity:.3; transform:translate(-50%,-50%) scale(.9); }
  50%{ opacity:1; transform:translate(-50%,-50%) scale(1.08); }
}
@media (prefers-reduced-motion: reduce){
  .pg-amb, .pg-attraction.is-today .pg-amb-arcade{ animation:none; opacity:.5; }
}

/*  하늘 — 별 몇 개만 가끔, 서로 다른 주기라 한꺼번에 안 켜진다 */
.pg-sky-twinkle{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.pg-sky-twinkle i{
  position:absolute; width:2px; height:2px; border-radius:50%;
  background:#fff; box-shadow:0 0 4px 1px rgba(255,255,255,.85);
  opacity:0; animation:pg-star-twinkle 6.4s ease-in-out infinite;
}
.pg-sky-twinkle i:nth-child(1){ animation-duration:7.2s; animation-delay:.4s; }
.pg-sky-twinkle i:nth-child(2){ animation-duration:5.6s; animation-delay:2.8s; }
.pg-sky-twinkle i:nth-child(3){ animation-duration:8.4s; animation-delay:4.6s; }
.pg-sky-twinkle i:nth-child(4){ animation-duration:6.8s; animation-delay:1.6s; }
@keyframes pg-star-twinkle{
  0%,88%,100%{ opacity:0; }
  92%{ opacity:.95; }
  96%{ opacity:.3; }
}
@media (prefers-reduced-motion: reduce){
  .pg-sky-twinkle i{ animation:none; opacity:0; }
}

/* 2026-09-11 [놀이터 광장 고양이 NPC MASTER] → 2026-09-12 [LIVING PLAZA + 별콩 공식화]
   로 상호작용 NPC가 됐다 — 터치 래퍼는 `.pg-byeolkong`(아래 절). 이 img 자체는
   여전히 순수 그림(터치는 부모 버튼이 받는다) — 자산은 한 픽셀도 다시 안 그렸다.
   §6 접지감 — 발밑 타원 그림자(::after, 별도 레이어라 그림 자체를 안 건드린다) +
   따뜻한 톤(sepia+saturate로 배경 조명에 맞춘다) + 약 10% 축소(10%→9%). */
.pg-cat-npc{
  display:block; width:100%; height:auto;
  user-select:none;
  filter:drop-shadow(0 3px 5px rgba(60,40,20,.22)) sepia(.12) saturate(1.08) brightness(1.02);
  animation:pg-cat-breathe 5.6s ease-in-out infinite;
  transform-origin:50% 100%;
}
@keyframes pg-cat-breathe{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.015); }
}
@media (prefers-reduced-motion: reduce){
  .pg-cat-npc{ animation:none; }
}

/* ── 별콩(BYEOLKONG) 터치 래퍼 — 2026-09-12 → 2026-09-12(2차) [위치·UI 개선] ─────
   ★ §2 — 그림 크기를 82%로 축소(9%→7.4% · 88px→72px, MASTER 80~85% 범위 중앙값).
   ★ 실제 그림보다 히트 영역을 넉넉히 키운다(모바일 최소 터치 44px 기준, padding 트릭).
   ★ 이름표를 화면에 상시로 띄우지 않는다(§6 마지막) — 말풍선이 뜰 때만 `.pg-byeolkong-name`이 보인다.
   ★ z-index 는 기존 시설 핀·하루·나침반보다 낮게 유지한다(§ 안 가림 원칙 그대로 승계). */
.pg-byeolkong{
  position:absolute; z-index:2; width:7.4%; max-width:72px;
  transform:translate(-50%, -100%);
  padding:14px 16px 4px; margin:-14px -16px 0;   /* 시각 크기는 그대로, 터치판만 넓힌다 */
  border:0; background:none; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  display:flex; flex-direction:column; align-items:center;
  box-sizing:content-box;
}
.pg-byeolkong:active .pg-cat-npc{ transform:scale(.96); }
/*  2026-09-13 FINAL PREMIUM POLISH §19 — 발 아래 아주 약한 타원 그림자. drop-shadow
    필터(위 .pg-cat-npc)는 실루엣을 따라가는 윤곽 그림자라 [접지감]까지는 못 준다 —
    바닥에 닿는 타원 하나를 별도 레이어로 더한다. 검은 타원 금지 — 배경 노을 톤에
    맞춘 아주 옅은 갈색이다. */
.pg-byeolkong::after{
  content:""; position:absolute; left:50%; bottom:2px;
  width:62%; height:7px; margin-left:-31%;
  /* 2026-09-13 3/3 HOTFIX §8 — 배경에 약간 묻힌다는 지적으로 .22→.30 아주 조금만 진하게 */
  background:radial-gradient(ellipse, rgba(60,40,20,.30) 0%, rgba(60,40,20,0) 72%);
  pointer-events:none; z-index:-1;   /* 고양이 그림(z-index 없음=auto)보다 뒤로 — 이 상자가 이미 stacking context 다 */
}
/*  §5 "손으로 가리키거나 방향을 바라보게" — 새 포즈 원화 없이 좌우 반전으로 근사한다.
    캐릭터 디자인 자체(원화)는 그대로, 방향만 CSS transform 으로 튼다. */
.pg-byeolkong.is-pointing-left .pg-cat-npc{ transform:scaleX(-1); }
.pg-byeolkong.is-pointing-left:active .pg-cat-npc{ transform:scaleX(-1) scale(.96); }
/*  §6 첫 입장 — 짧게 손 흔들기. 원화를 바꾸지 않고 아주 작은 회전 wiggle로 근사, 0.7초 1회. */
@keyframes pg-byeolkong-wave{
  0%,100%{ transform:rotate(0deg); }
  20%{ transform:rotate(-6deg); }
  40%{ transform:rotate(5deg); }
  60%{ transform:rotate(-4deg); }
  80%{ transform:rotate(2deg); }
}
.pg-byeolkong.is-waving .pg-cat-npc{ animation:pg-byeolkong-wave .7s ease-in-out both, pg-cat-breathe 5.6s ease-in-out infinite; }
/*  2026-09-13 FINAL PREMIUM POLISH §1·§2 — 권장 치수로 맞춘다: max-width 150~175px ·
    padding 10~12/12~14px · radius 18~22px · 별콩 머리 위 8~16px 간격(기존 2px→10px).
    flex/space-between 로 세로를 억지로 늘리지 않는다 — 원래도 안 쓰고 있었다(auto 높이). */
/*  2026-09-13 §1 실측 버그 #2 — 이 요소가 `<span>`(기본 display:inline)인데 안의
    이름표·CTA 버튼은 display:block 이라, 인라인 서식 맥락 안에서 각 block 자식마다
    부모 line-height(.68rem*1.35≈14.7px) 만큼의 "strut" 여백이 새로 생겨 버블 높이가
    121px까지 부풀었다(실측: 이름표 앞뒤에만 30px 가까운 빈틈). display:flex 로
    바꿔 정상적인 세로 스택으로 만든다 — MASTER 금지 항목은 [flex:1/space-between 로
    억지로 늘리기]이지 flex 스택 자체가 아니다(자식 stretch 없음 · 높이는 그대로 auto). */
/*  2026-09-13 3/3 HOTFIX §1 — CLOSED 상태 잔상(ghost text) 버그. opacity:0 만으로
    닫으면 DOM/text 레이어는 그대로 남아 있어(WebView 가 트랜지션 도중 백그라운드로
    가는 등으로) 반투명하게 다시 비치는 경우가 있었다. 이제 기본값을 display:none 으로
    두고, 열 때만 JS(별콩말풍선열기())가 `.is-visible`(display:flex)을 먼저 켠 뒤
    다음 프레임에 `.is-on`(opacity:1)을 올린다 — 닫을 때는 반대로 opacity 트랜지션이
    끝난 뒤(220ms) `.is-visible`을 뗀다(별콩말풍선닫기()). CLOSED 상태에서는 이 규칙
    하나로 display:none 이 항상 이겨 text/버튼/tail 전부 렌더링을 멈춘다. */
.pg-byeolkong-bubble{
  display:none;
  position:absolute; bottom:100%; left:50%; transform:translateX(-50%) translateY(6px);
  margin-bottom:10px; min-width:120px; max-width:min(52vw, 172px);
  padding:11px 13px; border-radius:20px 20px 20px 6px;
  background:linear-gradient(160deg, #faf3e8 0%, #eaf5ee 100%);
  border:1px solid rgba(201,169,97,.4);
  color:#4a3550; text-align:center; white-space:pre-line;   /* 대사 안 \n 이 실제 줄바꿈으로 — 최대 2줄(§3) */
  font:500 .68rem/1.35 var(--font-ui,"Malgun Gothic",sans-serif);
  box-shadow:0 6px 14px rgba(20,10,30,.22);
  opacity:0; pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
  z-index:3;
}
.pg-byeolkong-bubble.is-visible{ display:flex; flex-direction:column; align-items:center; }
.pg-byeolkong-bubble.is-on{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
.pg-byeolkong-name{
  display:block; font-size:.62rem; font-weight:700; color:#a6791f; margin-bottom:1px;
}
/*  §5 — 대형 CTA 가 아니라 말풍선 안의 아주 작은 보기 버튼 하나. 시설 캡슐(.shop-neon)과
    확실히 다르게(둥근 필 + 옅은 민트 배경) — "시각적으로 구분"(§3 마지막 줄). */
/*  2026-09-13 FINAL PREMIUM POLISH §1 실측 버그 — style.css:92 의 전역 `button{min-height:
    44px}`(WCAG 탭 하한)이 이 버튼에도 그대로 적용돼 말풍선 전체 높이가 145px까지 자랐다
    (버튼 자체가 44px). 접근성 탭 영역은 지우지 않고 padding 트릭(§8 패턴과 동일)으로
    "보이는 크기는 작게, 실제 탭 판은 넉넉하게"를 둘 다 지킨다. */
.pg-byeolkong-choice{
  display:block; margin:4px auto 0; padding:3px 10px;
  min-height:0; min-width:0;
  border:1px solid rgba(201,169,97,.5); border-radius:999px;
  background:rgba(234,245,238,.9); color:#3d6b52;
  font:700 .64rem/1.2 var(--font-ui,"Malgun Gothic",sans-serif);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  position:relative;
}
/*  보이지 않는 여유 탭 판 — 시각 크기(위 padding)는 그대로 두고 히트 영역만 44px 안팎으로. */
.pg-byeolkong-choice::before{
  content:""; position:absolute; inset:-10px;
}
.pg-byeolkong-choice[hidden]{ display:none; }
.pg-byeolkong-choice:active{ transform:scale(.96); }
/*  꼬리 — 말풍선 아래에서 별콩 쪽을 가리킨다(§3 "작은 꼬리가 별콩을 향함"). */
.pg-byeolkong-bubble::after{
  content:""; position:absolute; left:50%; bottom:-5px; margin-left:-5px;
  width:10px; height:10px; background:#eaf5ee;
  border-right:1px solid rgba(201,169,97,.4); border-bottom:1px solid rgba(201,169,97,.4);
  transform:rotate(45deg); border-radius:0 0 3px 0;
}
/*  §6 3/3 — 작은 별가루 효과. 대형 팝업이 아니라 별콩 곁에서 짧게(1.6초) 흩날리고 사라진다. */
.pg-byeolkong-sparkle{
  position:absolute; z-index:3; left:50%; bottom:20%;
  width:46px; height:46px; margin-left:-23px;
  pointer-events:none; opacity:0;
  background:radial-gradient(circle, rgba(243,216,150,.9) 0%, rgba(243,216,150,0) 70%);
}
.pg-byeolkong-sparkle.is-playing{ animation:pg-plaza-sparkle 1.6s ease-out both; }
@media (prefers-reduced-motion: reduce){
  .pg-byeolkong-bubble{ transition:none; }
  .pg-byeolkong.is-waving .pg-cat-npc{ animation:none; }
  .pg-byeolkong-sparkle.is-playing{ animation:none; }
}

/* ── §5 추천 시설 라벨 글로우 — 별콩이 가리킨 시설에만, 1~1.5초, 은은하게 ────────
   기존 .is-picked 글로우(누른 순간)와는 다른 자리 — 이건 [누르지 않아도] 뜬다. */
@keyframes pg-reco-glow{
  0%{ box-shadow:0 2px 8px rgba(90,60,40,.18); }
  40%{ box-shadow:0 0 0 3px rgba(214,182,116,.4), 0 4px 14px rgba(214,182,116,.35); }
  100%{ box-shadow:0 2px 8px rgba(90,60,40,.18); }
}
.pg-attraction.is-reco-glow .shop-neon{ animation:pg-reco-glow 1.3s ease-out both; }
@media (prefers-reduced-motion: reduce){
  .pg-attraction.is-reco-glow .shop-neon{ animation:none; }
}

/* ── 쓰다듬기 FEEDBACK — 작은 하트 1개(§7). 0.5~1.5초 내 사라진다. 과한 애니메이션 금지. ── */
.pg-byeolkong-heart{
  position:absolute; bottom:92%; left:50%;
  font-size:1rem; color:#ef9fc0; pointer-events:none; z-index:3;
  animation:pg-byeolkong-heart .9s ease-out both;
}
@keyframes pg-byeolkong-heart{
  0%{ opacity:0; transform:translate(-50%,0) scale(.6); }
  30%{ opacity:1; transform:translate(-50%,-8px) scale(1); }
  100%{ opacity:0; transform:translate(-50%,-26px) scale(.9); }
}
@media (prefers-reduced-motion: reduce){
  .pg-byeolkong-heart{ animation:none; display:none; }
}

/* ── 오늘의 작은 행운 — 아주 작은 별빛 하나. 대형 아이콘·CTA·notification 금지(§12). ── */
.pg-luck-spark{
  position:absolute; z-index:2; width:16px; height:16px;
  margin:-8px 0 0 -8px;
  display:flex; align-items:center; justify-content:center;
  font-size:.72rem; color:#f3d896;
  background:none; border:0; padding:10px; cursor:pointer;   /* 패딩만큼 터치판 확장 */
  -webkit-tap-highlight-color:transparent;
  filter:drop-shadow(0 0 4px rgba(243,216,150,.85));
  animation:pg-luck-pulse 2.2s ease-in-out infinite;
}
.pg-luck-spark[hidden]{ display:none; }
@keyframes pg-luck-pulse{
  0%,100%{ opacity:.45; transform:scale(.9); }
  50%{ opacity:1; transform:scale(1.08); }
}
@media (prefers-reduced-motion: reduce){
  .pg-luck-spark{ animation:none; opacity:.8; }
}

/* ── 3/3 COMPLETE EFFECT — 나침반(.plaza) 자리에서 짧은 gold sparkle 1회(§23). 팝업 없음. ── */
.pg-plaza-sparkle{
  position:absolute; z-index:2; left:50%; top:50%;
  width:64px; height:64px; margin:-32px 0 0 -32px;
  pointer-events:none; opacity:0;
  background:radial-gradient(circle, rgba(243,216,150,.85) 0%, rgba(243,216,150,0) 70%);
}
.pg-plaza-sparkle.is-playing{ animation:pg-plaza-sparkle 1.6s ease-out both; }
@keyframes pg-plaza-sparkle{
  0%{ opacity:0; transform:scale(.5); }
  30%{ opacity:1; transform:scale(1.15); }
  100%{ opacity:0; transform:scale(1.5); }
}
@media (prefers-reduced-motion: reduce){
  .pg-plaza-sparkle.is-playing{ animation:none; }
}

/* 2026-09-10 사람 지시 [놀이터 검은 선택 팝업 완전 제거] — 여기 있던
   `.pg-below`·`.pg-fcards`·`.pg-fcard`* 한 벌(2026-09-07 [하단 시설 카드
   최종 개선])을 지웠다. `margin-top:100dvh`가 `.pg-map`의 실제(JS) 높이와
   어긋나면 이 섹션이 입장 즉시 메인 화면 위로 올라와 보이는 버그가 원래
   주석에 적혀 있었다 — 그게 [검은 팝업]의 정체였다. 지도 위 다섯 핀
   (.pg-attraction)이 이미 같은 다섯 시설의 정본 입구라 기능은 그대로 남는다. */

/* ════════════════════════════════════════════════════════════════════
   2026-09-10 사람 지시 [운명의 놀이터 5개 시설 MASTER 배경 + 타이포 통일]
   ────────────────────────────────────────────────────────────────────
   ★ §2 "작은 카드/배너가 아니라 [이동했다]고 느끼는 공간 배경". 사람 확인
     결과(대화창 질문 2건) — 회전목마·포춘나무(bench)·행운분수·미니게임존
     넷은 지금 지도(.pg-map)가 비쳐 보이는 340~520px 바텀시트(.pg-overlay
     /.pg-panel)라 [전체화면으로 확대]하기로 했다. route·JS는 그대로 두고
     (§17 route 변경 금지) `.pg-overlay[data-art]`(이미 §11에서 시설별로
     붙던 값 — playground.js:2100)의 **배경 이미지만** 지도 크롭에서 그
     시설 전용 MASTER 로 바꾼다. `.pg-overlay`는 이미 position:fixed;inset:0
     (playground.css:63)이라 이것만으로 화면 전체가 그 시설 전용 배경이 된다.
   ★ 이미지 정본은 `자산\신버전\놀이터\시설공간배경_2026-09-10\`(사람이 대화창에
     직접 준 도착본 5장, 1024x1536). 구운 사본은 `assets/village/playground/
     scene-<키>-20260910.jpg`(JPEG q85). 매칭은 이미지 내용으로 확인했고
     사람이 대화창에서 재확인했다(파일명 추측 아님).
   ★ 딤 — §11 이 이미 [거의 안 덮고 시트 쪽만 짙어지는 그라데이션]으로 바꿔
     놨다(위 1079행). 그 사상 그대로, 다만 지금은 셋(공유 지도)이 아니라
     각 시설 전용 그림이라 대비를 위한 최소한의 그라데이션만 얹는다.
   ════════════════════════════════════════════════════════════════════ */
.pg-overlay[data-art="carousel"],
.pg-overlay[data-art="fountain"],
.pg-overlay[data-art="arcade"],
.pg-overlay[data-art="tree"]{
  background-repeat:no-repeat; background-position:center; background-size:cover;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.pg-overlay[data-art="carousel"]{
  background-image:
    linear-gradient(180deg, rgba(23,16,30,.10) 0%, rgba(23,16,30,.06) 46%, rgba(23,16,30,.34) 100%),
    url("assets/village/playground/scene-carousel-20260910.jpg");
  /* 노출 자리(헤더+히어로, 약 30~40dvh)가 화면 상단뿐이라 기본 center 로는
     지붕까지만 보이고 목마가 잘린다 — 세로 위치를 낮춰 목마가 보이게 한다. */
  background-position:center 32%;
}
.pg-overlay[data-art="fountain"]{
  background-image:
    linear-gradient(180deg, rgba(8,26,30,.10) 0%, rgba(8,26,30,.06) 46%, rgba(8,26,30,.34) 100%),
    url("assets/village/playground/scene-fountain-20260910.jpg");
}
.pg-overlay[data-art="arcade"]{
  background-image:
    linear-gradient(180deg, rgba(22,14,34,.10) 0%, rgba(22,14,34,.06) 46%, rgba(22,14,34,.34) 100%),
    url("assets/village/playground/scene-arcade-20260910.jpg");
}
.pg-overlay[data-art="tree"]{
  background-image:
    linear-gradient(180deg, rgba(16,26,12,.10) 0%, rgba(16,26,12,.06) 46%, rgba(16,26,12,.34) 100%),
    url("assets/village/playground/scene-tree-20260910.jpg");
}

/* 2026-09-10(2차) 정정 — 회전목마는 `.pg-panel .pg-art`(다른 네 시설 전용 자리)를
   쓰지 않고 `.pgcs-*`(위 1240행부터)라는 별도 전체화면을 쓴다는 것을 이번에
   확인했다. 여기 있던 `.pg-overlay[data-art="carousel"] .pg-art` 규칙은 실제
   DOM 에 안 걸려 한 번도 그려지지 않는 죽은 CSS였다(1차 사이클의 실수) — 지운다.
   회전목마 전용 배경 적용은 위 `.pgcs-hero`(1330행대)에서 한다. */

/* ── §5·§6·§7 타이포 — 두 계열만(§9 남발 금지). 제목/메뉴명/CTA 는
     Cafe24 Ssurround(둥근 한글, village-typography.css 가 이미 번들 — §8
     "기존 폰트 우선"), 본문은 그대로 시스템 고딕. 감성 한 줄은 같은 폰트를
     가볍게(굵기만 낮춰) 써서 2계열 원칙을 지킨다 — §8 아래 보고 참고. ── */
.pg-panel h2,
.pgmg-title,
.pgsw-title,
.pgcs-title,
.pgcs-h2,
.pgtr-h2,
.pgcs-rtitle,
.pgcs-rcard-ttl,
.pgcs-rtype{
  font-family:var(--vt-font-display, inherit);
  font-weight:var(--vt-w-card-title, 700);
}
.pg-item-ttl,
.pg-item-cta,
.pgmg-btn,
.pgsw-btn,
.pgcs-rel-label,
.pgcs-reco-ttl,
.pgcs-sub-ttl,
.pgtr-cta-ttl,
.pg-compact-ttl,
.pgcs-qchoice-lbl,
.pgcs-qtitle,
.pgcs-qdone-ttl,
.pgcs-rharu-bubble b,
.pgcs-rharu-txt b{
  font-family:var(--vt-font-display, inherit);
  font-weight:var(--vt-w-small-label, 600);
}
.pg-panel .pg-sub,
.pg-subcopy,
.pg-footnote,
.pgmg-note,
.pgsw-intro-sub,
.pgcs-lead,
.pgcs-tag,
.pgcs-rel-say,
.pgcs-reco-sub,
.pgcs-sub-sub,
.pgtr-lead,
.pgtr-tag,
.pgtr-cta-sub,
.pgtr-foot,
.pgtr-badge,
.pgtr-growth-label{
  font-family:var(--vt-font-display, inherit);
  font-weight:var(--vt-w-convo, 500);
  letter-spacing:.01em;
}
/* 2026-09-10(3차) 지시 §4 — "숫자·시간·보조정보 = Rounded Regular/Medium". 카드
   설명 한 줄(§7 토큰 --vt-w-card-desc)과 같은 무게 — 제목보다 가볍게. */
.pg-item-sub,
.pg-item-meta,
.pg-price-tag,
.pg-compact-meta{
  font-family:var(--vt-font-display, inherit);
  font-weight:var(--vt-w-card-desc, 450);
}

/* ══ 920 놀이터 화면 개편 (도깨비판만 · 2026-10-15) ═══════════════════════
   배경 bg_dokkaebi.webp(2:3). 지도 박스(≈1024:1898)에 cover 라 좌우가 약 9.5% 씩 잘린다 —
   시설 핀 좌표는 그 잘림을 계산한 값이다(그림 좌표 → 박스 좌표 = x*1.233-0.116).
   회전목마(.23,.27) · 미끄럼틀(.71,.29) · 미니게임부스(.78,.53) · 나무(.20,.60) · 분수(.51,.73) */
html[data-edition="dokkaebi"] .pg-map{
  background-image:url("assets/ui/playground/bg_dokkaebi.webp");
  background-image:-webkit-image-set(url("assets/ui/playground/bg_dokkaebi.webp") 1x, url("assets/ui/playground/bg_dokkaebi@2x.webp") 2x);
  background-image:image-set(url("assets/ui/playground/bg_dokkaebi.webp") 1x, url("assets/ui/playground/bg_dokkaebi@2x.webp") 2x);
}
html[data-edition="dokkaebi"] [data-facility="carousel"]{ top:27% !important; left:16.7% !important; }
html[data-edition="dokkaebi"] [data-facility="slide"]{ top:29% !important; left:75.9% !important; }
html[data-edition="dokkaebi"] [data-facility="arcade"]{ top:53% !important; left:84.6% !important; }
html[data-edition="dokkaebi"] [data-facility="bench"]{ top:60% !important; left:13% !important; }
html[data-edition="dokkaebi"] [data-facility="fountain"]{ top:77.5% !important; left:51.2% !important; }
/* 은화 알약 끝의 [· 남은 분수 횟수] */
#tarot-coin-widget .pg-fountain-left{ margin-left:4px; font-weight:700; color:var(--pg-gold,#c9a961); }

/* B-04 — 도깨비판 놀이터 은화 알약: 연속 출석 숫자는 뺀다(「은화 · 분수 N」만) */
html[data-edition="dokkaebi"] #tarot-coin-widget .coin-streak{ display:none !important; }

/* B-11 — [하루의 오늘 추천] 카드 닫기 칸: 카드 오른쪽 끝 44px 전체 높이 터치 · 보이는 건 작은 ✕ 하나
   (카드 높이를 안 키우려고 흐름 밖에 두고, 줄 오른쪽에 그 폭만큼 비워 CTA 와 안 겹치게 한다) */
.pg-reco-row{ padding-right:34px; }
.pg-reco-x{
  position:absolute; top:0; right:0; bottom:0; width:44px;
  display:flex; align-items:center; justify-content:center;
  font-size:.82rem; line-height:1; color:#8b7fa0; cursor:pointer;
  background:linear-gradient(rgba(139,127,160,.22), rgba(139,127,160,.22)) no-repeat left center / 1px 56%;
}
.pg-reco-x:active{ color:#4a3550; }
.pg-reco.is-complete .pg-reco-x{ display:none; }
.pg-reco.is-complete .pg-reco-row{ padding-right:0; }
/* 아몬드·그 밖 에디션은 닫기 칸 없음(도깨비판만) */
html:not([data-edition="dokkaebi"]) .pg-reco-x{ display:none; }
html:not([data-edition="dokkaebi"]) .pg-reco-row{ padding-right:0; }