/* ════════════════════════════════════════════════════════════════════
   playground-slide.css — 고민 미끄럼틀 전면개편 (2026-09-06 4차)
   ────────────────────────────────────────────────────────────────────
   ★ 이름공간은 `.pgsw-*` 하나다(playground = "슬라이드" → sw). 다섯 시설 공용 시트의
     `.pg-menu-item`/`.pg-compact-*`, 회전목마 `.pgcs-*`, 옛 미끄럼틀 `.pgsl-*`(지움),
     미니게임존 `.pgmg-*` — 전부 여기서 다시 안 쓴다. 사람 지시 1차 피드백
     "기존 카드 컴포넌트 그대로 재사용 금지"를 이 시설 전체로 넓힌 것이다.
   ★ 색(지시 §2) — 라벤더·소프트퍼플·인디고·크림·웜골드·연핑크·소프트블루.
     브라운 중심 UI·새까만 채팅카드·네온·카지노 금색·크롬 금지.
     배경은 [밤의 놀이공원](어두운 인디고 그라데이션) + 카드 내용은 [동화 같은 파스텔]
     (크림 배경·둥근 모서리·옅은 glow)로 두 키워드를 한 화면 안에서 가른다.
   ════════════════════════════════════════════════════════════════════ */

:root{
  --sw-bg1:#241b46; --sw-bg2:#33285e; --sw-bg3:#4a3b78;   /* 밤하늘 인디고 그라데이션 */
  --sw-cream:#fdf6ea; --sw-cream-soft:#fffaf2;
  --sw-ink:#3c2f63; --sw-ink-soft:#6d5f8f;                 /* 카드 위 글자 */
  --sw-lav:#c9b6f0; --sw-lav-deep:#8f79d6;                 /* 라벤더 → 딥퍼플 */
  --sw-pink:#f6c9dd; --sw-gold:#f0c675; --sw-blue:#a9c9f0;
  --sw-line:rgba(255,255,255,.16);
}

.pgsw{
  position:fixed; inset:0; z-index:45;                     /* .pg-overlay(40)·.pg-minigame(45)와 같은 층 */
  display:flex; flex-direction:column;
  /* 2026-09-10(2차) 사람 지시 [고민 미끄럼틀 최종 UI 개선] — "MASTER 를 화면의
     실제 전체 공간으로 사용한다 · 대형 보라색 배경 삭제 · 필요한 텍스트 뒤에만
     아이보리 반투명 glass panel". 1차에서 48%부터 인디고로 완전히 되돌리던
     큰 판을 걷어낸다 — MASTER(scene-slide-20260910.jpg, 정정된 파일 — 1차엔
     회전목마 원화가 잘못 걸려 있었다)가 화면 전체를 덮고, 헤더 글자만 겹칠 만큼
     아주 옅은 그라데이션 한 겹만 남긴다. 8단계 카드 화면들은 원래도 `.pgsw-card`
     자체가 크림 불투명 배경이라(§SCENE) 밝은 배경 위에서도 그대로 읽힌다 —
     [필요한 텍스트]만 아래 §글래스패널 로 따로 받쳐 준다. */
  background:
    linear-gradient(180deg,
      rgba(36,27,70,.34) 0%, rgba(36,27,70,.10) 14%, rgba(36,27,70,.06) 55%, rgba(36,27,70,.22) 100%),
    url("assets/village/playground/scene-slide-20260910.jpg") top center/cover no-repeat,
    var(--sw-bg1);
  color:var(--sw-cream); font-family:inherit;
  overflow:hidden;
}
/* ── 글래스 패널 — 이미지 위에 바로 놓이는 글자 전용(§UI). 카드형 컴포넌트
   (.pgsw-card 등)는 이미 자기 불투명 배경이 있어 여기 안 쓴다. ── */
.pgsw-glass{
  background:rgba(255,250,240,.86);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.5);
  border-radius:20px;
  box-shadow:0 8px 22px rgba(60,47,99,.14);
}
.pgsw[hidden]{ display:none; }

/* ── 헤더 — 미니게임존과 같은 구성(백버튼·제목·은화·기록 버튼), 색만 이 시설 톤 ── */
.pgsw-head{
  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 6px;
}
.pgsw-back{
  flex:0 0 auto; min-height:34px; padding:0 10px 0 2px;
  background:none; border:0; color:#fff; font-weight:600;font-size:15px;line-height:1;font-family:inherit;
  display:inline-flex; align-items:center; gap:2px; opacity:.95; cursor:pointer;
}
.pgsw-back::before{ content:"‹ "; }
.pgsw-back:active{ opacity:.65; }
.pgsw-title{
  flex:1; min-width:0; text-align:center;
  font-weight:700;line-height:1.2;font-family:inherit; color:#fff; letter-spacing:.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pgsw-hud{ flex:0 0 auto; display:flex; align-items:center; gap:6px; }
.pgsw-coin{
  font-size:.72rem; font-weight:700; padding:5px 9px; border-radius:999px;
  background:rgba(255,255,255,.14); color:#fff; white-space:nowrap;
}
.pgsw-coin:empty{ display:none; }
.pgsw-log-btn{
  width:28px; height:28px; border-radius:50%; flex:0 0 auto;
  background:rgba(255,255,255,.14); border:0; color:#fff; font-size:.82rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.pgsw-log-btn:active{ transform:scale(.94); }

/* ── 진행 표시 — "시험처럼 보이면 안 된다"(지시 §3): 아주 작고 은은한 점 5개뿐 ── */
.pgsw-progress{
  position:relative; z-index:2; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:0 16px 10px;
}
.pgsw-progress[hidden]{ display:none; }
.pgsw-prog-dot{
  width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.24);
  transition:background-color .25s ease, transform .25s ease;
}
.pgsw-prog-dot.is-on{ background:var(--sw-lav); transform:scale(1.25); box-shadow:0 0 6px 1px rgba(201,182,240,.6); }

/* ── 무대 — 스크롤되는 본문. 광고 배너가 있으면 하단 여백을 더 준다 ── */
.pgsw-stage{
  position:relative; z-index:2; flex:1 1 auto; min-height:0; overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:4px 18px calc(22px + var(--banner-ad-height,0px) + env(safe-area-inset-bottom,0px));
  display:flex; flex-direction:column;
}

/* ── 공용 버튼 ─────────────────────────────────────────────────────── */
.pgsw-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:50px; padding:0 20px; border-radius:16px; border:0;
  font-weight:700;font-size:.95rem;line-height:1;font-family:inherit; cursor:pointer; width:100%;
  transition:transform .12s ease;
}
.pgsw-btn:active{ transform:scale(.97); }
.pgsw-btn-solid{
  /* 2026-09-10(3차) 지시 — "민트→블루 그라데이션이 강하면 민트 + 아주 옅은
     라일락으로 부드럽게". 2차의 민트→스카이블루보다 대비를 낮춘다. */
  background:linear-gradient(135deg, #a8ecd9, #d8cdf2); color:#33524a;
  box-shadow:0 6px 16px rgba(140,150,180,.28);
}
.pgsw-btn-outline{
  background:rgba(255,255,255,.22); color:#fff; border:1px solid rgba(255,255,255,.5);
  text-shadow:0 1px 3px rgba(20,15,34,.35);
}
/* 조용한 버튼 — 밝은 글래스 카드 안(입장)과 이미지 위(결과 화면) 둘 다에
   쓰이므로, 배경 밝기에 안 갈리는 작은 어두운 알약으로 통일한다. */
.pgsw-btn-quiet{
  min-height:auto; width:auto; padding:6px 12px; border-radius:999px;
  background:rgba(30,22,52,.4);
  color:rgba(255,255,255,.92); font-size:.8rem; font-weight:600;
}
@media (prefers-reduced-motion: reduce){ .pgsw-btn:active{ transform:none; } }

/* ════════════════════════════════════════════════════════════════════
   SCENE 01 — 입장
   ════════════════════════════════════════════════════════════════════ */
/* 2026-09-10(2차) 지시 — "MASTER에 이미 미끄럼틀 시설이 있으므로 별도의
   미끄럼틀 PNG를 추가하지 않는다." 예전엔 여기서 `slide.png`(작은 스티커)를
   또 띄워 배경 MASTER와 겹쳤다 — DOM/JS는 그대로 두고 그림만 지운다. */
.pgsw-intro-art{ display:none; }
/* 2026-09-10(3차) 사람 지시 [3개 화면 최종 POLISH] §1 — 카드 가로/세로를
   10~15% 줄이고 조금 아래로. maxwidth 320→275(-14%) · padding도 같이 줄인다.
   `margin-top:auto`(위쪽 여유를 더 먹는다)+고정 하단값으로 살짝 아래로 내린다. */
.pgsw-intro{
  margin:auto 0 4vh; display:flex; flex-direction:column; align-items:center; text-align:center; gap:5px;
  padding:18px 18px 20px; max-width:275px;
}
/* "필요한 텍스트 뒤에만 아이보리 반투명 glass panel" — 제목·설명·하루 대사를
   하나의 카드로 묶는다. 버튼은 그 아래, 자기 배경(민트 CTA)으로 따로 선다. */
.pgsw-intro::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(255,250,240,.88);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.55);
  border-radius:24px;
  box-shadow:0 10px 28px rgba(60,47,99,.16);
}
.pgsw-intro{ position:relative; }
.pgsw-intro-title{
  font-family:var(--vt-font-display, inherit); font-weight:var(--vt-w-card-title, 700);
  font-size:1.32rem; line-height:1.3; color:var(--sw-ink);
}
.pgsw-intro-sub{ font-size:.78rem; line-height:1.5; color:var(--sw-ink-soft); max-width:235px; margin:2px 0 14px; white-space:pre-line; }
.pgsw-intro-mascot{
  display:flex; align-items:center; gap:7px; margin-bottom:16px;
  padding:7px 12px; border-radius:999px; background:rgba(255,255,255,.65); border:1px solid rgba(255,255,255,.7);
  max-width:235px;
}
.pgsw-intro-mascot img{ width:26px; height:26px; border-radius:50%; flex:0 0 auto; object-fit:cover; }
.pgsw-intro-mascot span{ font-size:.72rem; line-height:1.4; color:var(--sw-ink); text-align:left; }
.pgsw-intro .pgsw-btn{ max-width:235px; }
.pgsw-intro-log{ margin-top:10px; }

/* ════════════════════════════════════════════════════════════════════
   카드 그리드 공용(§2·§3·§5 카테고리/감정/행동 카드) — 크림 카드, 검정 채팅카드 아님
   ════════════════════════════════════════════════════════════════════ */
/* 2026-09-10(2차) — 배경이 이제 대부분 MASTER 라 흰 글자 단독으론 대비가
   불안정하다. 카드(.pgsw-card)처럼 자기 배경을 가진 아이보리 글래스 알약. */
/* 2026-09-10(5차) 사람 지시 [고민 미끄럼틀 내부 콘텐츠 UX·UI 최종 개선] §2 —
   "STEP 표시·질문·6카드를 하나의 MAIN CONTENT GROUP 으로 묶어 화면 세로 중앙에".
   `.pgsw-intro`(SCENE01)와 같은 방식 — `margin:auto 0` 이 위아래 남는 공간을
   똑같이 나눠 가져 [상단 네비 밑 곧바로 시작]도 [광고에 붙음]도 안 생긴다. */
.pgsw-maingroup{ margin:auto 0; width:100%; }
.pgsw-step{
  display:block; margin:0 auto 10px; width:fit-content;
  padding:5px 14px; border-radius:999px; text-align:center;
  background:rgba(255,250,240,.85); border:1px solid rgba(201,151,63,.4);
  color:#a6791f; font-size:.7rem; font-weight:var(--vt-w-small-label, 600); letter-spacing:.02em;
  font-family:var(--vt-font-display, inherit);
}
.pgsw-q{
  margin:0 auto 14px; text-align:center; font-size:1.06rem; font-weight:var(--vt-w-card-title, 800);
  font-family:var(--vt-font-display, inherit);
  color:var(--sw-ink); line-height:1.5; white-space:pre-line;
  display:block; max-width:92%; padding:10px 18px; border-radius:16px;
  background:rgba(255,250,240,.88);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.55);
}
.pgsw-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.pgsw-grid.is-emotion{ grid-template-columns:1fr 1fr 1fr; }
.pgsw-card{
  display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center;
  padding:14px 8px 12px; border-radius:18px; border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(160deg, var(--sw-cream-soft), #fdf1fb 80%);
  color:var(--sw-ink); cursor:pointer; font-family:inherit;
  transition:transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}
/* §5 — 카드 6장이 [흰 박스 나열]로 안 보이게, 크림 기본 위에 아주 옅은 낱개 pastel. */
#pgsw-cat-grid .pgsw-card:nth-child(1){ background:linear-gradient(160deg, rgba(246,169,198,.22), var(--sw-cream-soft) 72%); }
#pgsw-cat-grid .pgsw-card:nth-child(2){ background:linear-gradient(160deg, rgba(143,227,207,.20), var(--sw-cream-soft) 72%); }
#pgsw-cat-grid .pgsw-card:nth-child(3){ background:linear-gradient(160deg, rgba(169,201,240,.22), var(--sw-cream-soft) 72%); }
#pgsw-cat-grid .pgsw-card:nth-child(4){ background:linear-gradient(160deg, rgba(240,198,117,.20), var(--sw-cream-soft) 72%); }
#pgsw-cat-grid .pgsw-card:nth-child(5){ background:linear-gradient(160deg, rgba(195,178,247,.20), var(--sw-cream-soft) 72%); }
#pgsw-cat-grid .pgsw-card:nth-child(6){ background:linear-gradient(160deg, rgba(255,200,170,.20), var(--sw-cream-soft) 72%); }
.pgsw-card-blob{
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1.25rem; background:radial-gradient(circle at 35% 30%, #fff, var(--sw-pink) 75%);
}
.pgsw-grid.is-emotion .pgsw-card-blob{ background:radial-gradient(circle at 35% 30%, #fff, var(--sw-blue) 75%); }
.pgsw-card-ttl{ font-size:.84rem; font-weight:var(--vt-w-small-label, 700); line-height:1.3; font-family:var(--vt-font-display, inherit); }
.pgsw-card-sub{ font-size:.66rem; color:var(--sw-ink-soft); line-height:1.3; font-family:var(--vt-font-display, inherit); font-weight:var(--vt-w-card-desc, 450); }
/* §7 — 강한 라벤더/네온 대신 얇은 champagne gold 테두리 + 아주 옅은 glow */
.pgsw-card.is-picked{ transform:scale(1.03); box-shadow:0 0 0 2px #c9973f, 0 6px 16px rgba(201,151,63,.28); }
.pgsw-card.is-dim{ opacity:.4; transform:scale(.97); }
.pgsw-card:active{ transform:scale(.97); }
@media (prefers-reduced-motion: reduce){ .pgsw-card{ transition:none; } .pgsw-card:active{ transform:none; } }

/* 행동 카드(2×2) — 아이콘+제목+한 줄 설명, 정사각형에 가깝게 */
.pgsw-grid.is-action .pgsw-card{ padding:20px 10px; }
.pgsw-grid.is-action .pgsw-card-blob{ width:50px; height:50px; font-size:1.6rem; }

/* 직접 입력(카테고리 카드 자리에 나타나는 짧은 입력창) */
.pgsw-custom{ grid-column:1 / -1; display:flex; flex-direction:column; gap:10px; }
.pgsw-custom textarea{
  width:100%; min-height:64px; max-height:110px; resize:none; box-sizing:border-box;
  border-radius:16px; border:1px solid rgba(255,255,255,.6); background:rgba(255,250,240,.82);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  color:var(--sw-ink); font:inherit; font-size:.9rem; padding:12px 14px; line-height:1.5;
}
.pgsw-custom textarea::placeholder{ color:var(--sw-ink-soft); }
.pgsw-custom .pgsw-btn{ align-self:flex-end; width:auto; padding:0 22px; }

/* 2지선다(후속 질문) — 세로 두 줄 큰 버튼 */
.pgsw-choice2{ display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.pgsw-choice2 .pgsw-card{ flex-direction:row; text-align:left; padding:16px 18px; border-radius:18px; }
.pgsw-choice2 .pgsw-card-ttl{ font-size:.92rem; }

/* ════════════════════════════════════════════════════════════════════
   SCENE 04 — 내려보내기(스와이프)
   ════════════════════════════════════════════════════════════════════ */
.pgsw-drop{ margin:auto 0; display:flex; flex-direction:column; align-items:center; }
.pgsw-drop-copy{
  min-height:2.6em; text-align:center; font-size:.92rem; line-height:1.5; color:var(--sw-ink);
  margin:0 auto 14px; white-space:pre-line; display:inline-block; max-width:88%;
  padding:8px 16px; border-radius:14px; background:rgba(255,250,240,.88);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.55);
}
.pgsw-track{
  position:relative; width:104px; height:min(46vh, 320px); margin:0 auto 8px;
  border-radius:52px; background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.16); overflow:hidden;
  touch-action:none;                                       /* 세로 드래그 중 페이지 스크롤 방지 */
}
.pgsw-track-art{ position:absolute; inset:0; opacity:.5; }
.pgsw-track-art img{ width:100%; height:100%; object-fit:cover; }
.pgsw-orb{
  position:absolute; left:50%; top:6px; width:64px; height:64px;
  transform:translate(-50%, 0);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 35% 30%, #fff, var(--sw-lav) 70%);
  box-shadow:0 0 18px 4px rgba(201,182,240,.55), 0 6px 14px rgba(0,0,0,.3);
  font-size:1.5rem; cursor:grab; will-change:transform;
}
.pgsw-orb:active{ cursor:grabbing; }
.pgsw-orb.is-springing{ transition:transform .28s cubic-bezier(.34,1.4,.64,1); }
@media (prefers-reduced-motion: reduce){ .pgsw-orb.is-springing{ transition:none; } }
.pgsw-orb-label{
  position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:6px;
  font-size:.62rem; font-weight:700; color:#fff; white-space:nowrap;
  background:rgba(20,15,34,.55); padding:2px 8px; border-radius:999px;
}
.pgsw-guide{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  color:rgba(255,255,255,.55); font-size:1.1rem;
  animation:pgsw-guide-bounce 1.6s ease-in-out infinite;
}
.pgsw-track.is-dragging .pgsw-guide, .pgsw-track.is-done .pgsw-guide{ display:none; }
@keyframes pgsw-guide-bounce{ 0%,100%{ transform:translate(-50%,0); opacity:.35; } 50%{ transform:translate(-50%,10px); opacity:.8; } }
@media (prefers-reduced-motion: reduce){ .pgsw-guide{ animation:none; opacity:.5; } }
.pgsw-tap-fallback{ margin-top:16px; }
.pgsw-tap-fallback[hidden]{ display:none; }
.pgsw-sparkle{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  font-size:1.4rem; opacity:0; pointer-events:none;
}
.pgsw-sparkle.is-on{ animation:pgsw-sparkle-pop .6s ease-out forwards; }
@keyframes pgsw-sparkle-pop{ 0%{ opacity:0; transform:translateX(-50%) translateY(6px) scale(.6); } 40%{ opacity:1; } 100%{ opacity:0; transform:translateX(-50%) translateY(-14px) scale(1.1); } }

/* ════════════════════════════════════════════════════════════════════
   SCENE 07 — 오늘의 착지 + 10분 미션
   ════════════════════════════════════════════════════════════════════ */
.pgsw-result{ margin:auto 0 0; padding:6px 0 4px; display:flex; flex-direction:column; align-items:center; text-align:center;
  opacity:0; transform:translateY(10px); animation:pgsw-fadeup .42s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes pgsw-fadeup{ to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){ .pgsw-result{ animation:none; opacity:1; transform:none; } }
/* 2026-09-10(2차) — SCENE07·08(착지/기록)도 이제 배경이 밝은 MASTER 라
   흰 글자 전제를 걷어낸다. 제목엔 알약형 글래스, 본문 카드는 아이보리로. */
.pgsw-result-badge{
  font-size:.8rem; font-weight:700; color:#a6791f; letter-spacing:.02em; margin-bottom:8px;
  padding:4px 12px; border-radius:999px; background:rgba(255,250,240,.85); border:1px solid rgba(255,255,255,.6);
}
.pgsw-result-title{
  font-size:1.28rem; font-weight:800; color:var(--sw-ink); line-height:1.35; white-space:pre-line;
  margin-bottom:12px; padding:6px 16px; border-radius:16px;
  background:rgba(255,250,240,.86); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.55);
}
.pgsw-result-body{
  width:100%; max-width:340px; text-align:left; padding:16px 18px; border-radius:18px;
  background:rgba(255,250,240,.88); border:1px solid rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font-size:.88rem; line-height:1.65; color:var(--sw-ink); white-space:pre-line;
  margin-bottom:16px;
}
.pgsw-mission{
  width:100%; max-width:340px; padding:16px 16px 14px; border-radius:20px;
  background:linear-gradient(160deg, var(--sw-cream-soft), #fdf1fb 80%);
  color:var(--sw-ink); text-align:left; margin-bottom:14px;
}
.pgsw-mission-eyebrow{ font-size:.68rem; font-weight:700; color:var(--sw-lav-deep); letter-spacing:.03em; margin-bottom:6px; display:block; }
.pgsw-mission-body{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.pgsw-mission-ico{ font-size:1.6rem; flex:0 0 auto; }
.pgsw-mission-txt{ font-size:.88rem; font-weight:600; line-height:1.4; }
.pgsw-mission .pgsw-btn{ min-height:44px; }
.pgsw-mission.is-done .pgsw-btn{ opacity:.55; pointer-events:none; }
.pgsw-done-note{
  font-size:.78rem; color:var(--sw-ink-soft); margin:2px 0 14px; padding:4px 12px;
  border-radius:999px; background:rgba(255,250,240,.8);
}
.pgsw-result-actions{ display:flex; flex-direction:column; gap:8px; width:100%; max-width:340px; }

/* ════════════════════════════════════════════════════════════════════
   SCENE 08 — 내가 내려보낸 고민함
   ════════════════════════════════════════════════════════════════════ */
.pgsw-log{ display:flex; flex-direction:column; gap:12px; padding-top:6px; }
.pgsw-log-head{
  text-align:center; margin-bottom:2px; padding:12px 16px; border-radius:18px;
  background:rgba(255,250,240,.86); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.55);
}
.pgsw-log-title{ font-size:1.2rem; font-weight:800; color:var(--sw-ink); margin-bottom:4px; }
.pgsw-log-sub{ font-size:.8rem; color:var(--sw-ink-soft); line-height:1.5; }
.pgsw-log-retro{
  margin:6px 0 2px; padding:10px 14px; border-radius:14px; text-align:center;
  background:rgba(240,198,117,.22); border:1px solid rgba(240,198,117,.4);
  font-size:.78rem; color:#8a6a1e; line-height:1.5;
}
.pgsw-log-list{ display:flex; flex-direction:column; gap:9px; }
.pgsw-log-card{
  display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:16px;
  background:rgba(255,250,240,.86); border:1px solid rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.pgsw-log-dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.pgsw-log-txt{ flex:1; min-width:0; }
.pgsw-log-cat{ display:block; font-size:.85rem; font-weight:700; color:var(--sw-ink); }
.pgsw-log-date{ display:block; font-size:.7rem; color:var(--sw-ink-soft); margin-top:1px; }
.pgsw-log-empty{
  text-align:center; padding:30px 10px; color:var(--sw-ink-soft); font-size:.86rem; line-height:1.6;
  background:rgba(255,250,240,.7); border-radius:18px;
}
.pgsw-log-new{ margin-top:6px; }

/* ── 큰 글꼴(§23, 기존 body.pg-bigfont 그대로 재사용 — 새 판정 함수 안 만든다) ── */
body.pg-bigfont .pgsw-intro-title{ font-size:1.5rem; }
body.pg-bigfont .pgsw-card-sub{ display:none; }             /* 장식보다 글이 먼저(§ 기존 원칙) */
body.pg-bigfont .pgsw-grid{ gap:8px; }

/* ── 아주 작은 화면(§9 overflow 대비) ── */
@media (max-height:640px){
  .pgsw-intro-art{ width:min(40vw, 150px); height:min(40vw, 150px); }
  .pgsw-track{ height:min(38vh, 240px); }
}