:root {
  --ink: #43352d; --sub: #86705f; --cream: #fffdf9; --soft: #fbefe2;
  --card: rgba(255, 251, 245, .88); --shadow: 0 18px 48px rgba(120, 80, 40, .20);
  --fire: #f4846b; --fire-deep: #b8472d; --wood: #8cc97a; --earth: #f2c14e; --water: #6f8fd8;
  --sky-top: #bfe3f2; --sky-bottom: #fdf3e4;
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  overflow: hidden; color: var(--ink);
  font-family: 'Pretendard Variable', system-ui, sans-serif;
  background: linear-gradient(180deg, var(--sky-top), var(--sky-bottom));
  transition: background 1.2s;
}
body.tod-morning { --sky-top: #f9d9c8; --sky-bottom: #fdf3e4; }
body.tod-day { --sky-top: #bfe3f2; --sky-bottom: #fdf3e4; }
body.tod-sunset { --sky-top: #d7c8f0; --sky-bottom: #ffd2b3; }
body.tod-night { --sky-top: #2e3a66; --sky-bottom: #3d4a7a; }
#stage { position: fixed; inset: 0; }
#stage canvas { display: block; touch-action: none; }

.top {
  position: fixed; top: 14px; left: 14px; right: 14px; z-index: 2;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.pills { display: flex; gap: 8px; }
.place { font-size: 13.5px; color: var(--sub); gap: 6px; }
.pl { display: inline-flex; align-items: center; gap: 4px; }
#placeSky:not(:empty)::before { content: '·'; margin: 0 2px; color: var(--sub); }
.ico { width: 22px; height: 22px; flex: none; }
.myplace {
  border: 0; border-radius: 999px; padding: 4px 10px; margin-left: 4px; cursor: pointer;
  background: var(--soft); color: var(--ink); font: inherit; font-size: 12px;
}
.myplace:hover { background: #f6e4d2; }
body.wx-dark { --sky-top: #c9d1d8; --sky-bottom: #eef0ee; }
body.tod-sunset.wx-dark { --sky-top: #b9b3c9; --sky-bottom: #e8d8d0; }
body.tod-night.wx-dark { --sky-top: #262c45; --sky-bottom: #39405e; }
.top { flex-wrap: wrap; }
@media (max-width: 640px) { .place { order: 3; } }
.pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px;
  background: var(--card); border-radius: 999px; box-shadow: var(--shadow);
  color: var(--ink); text-decoration: none; font-size: 14px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.pill:hover { background: var(--cream); }
.brand { font-family: 'Jua', sans-serif; font-size: 20px; }
.brand { padding: 6px 16px 6px 6px; }
.brand .logo { display: block; width: 30px; height: 30px; }
.brand .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--fire); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12); }

.card {
  position: relative;
  padding: 22px 24px; border-radius: 30px; background: var(--card); box-shadow: var(--shadow);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.eyebrow {
  display: inline-block; padding: 4px 12px; border-radius: 999px; margin-bottom: 10px;
  background: var(--soft); color: var(--fire-deep); font-size: 13px; font-weight: 700;
}
.card h1 { font-family: 'Jua', sans-serif; font-weight: 400; font-size: 30px; line-height: 1.25; margin-bottom: 10px; }
.card .sub { color: var(--sub); font-size: 14.5px; line-height: 1.7; }
.card .hint { margin-top: 12px; font-size: 12.5px; color: var(--sub); opacity: .85; }

.bubble {
  position: fixed; z-index: 3; width: 38px; height: 38px; margin: -50px 0 0 -19px;
  border: 0; border-radius: 50% 50% 50% 8px; cursor: pointer;
  background: var(--earth); color: var(--ink); font-family: 'Jua', sans-serif; font-size: 22px;
  box-shadow: 0 6px 14px rgba(120, 80, 40, .25); animation: bob 1.6s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translateY(-6px); } }
.talk {
  position: fixed; z-index: 4; right: 24px; bottom: 24px; max-width: 320px;
  padding: 18px 20px; border-radius: 22px; background: var(--cream); box-shadow: var(--shadow);
}
.talk strong { font-family: 'Jua', sans-serif; font-weight: 400; font-size: 18px; }
.talk p { margin: 8px 0 12px; line-height: 1.6; font-size: 14.5px; }
.talk .close {
  border: 0; border-radius: 14px; padding: 9px 16px; cursor: pointer;
  background: var(--fire-deep); color: #fff; font-family: 'Jua', sans-serif; font-size: 15px;
}
.loading {
  position: fixed; inset: 0; z-index: 5; display: grid; place-items: center;
  font-family: 'Jua', sans-serif; font-size: 20px; color: var(--sub); transition: opacity .6s;
}
body.tod-night .loading { color: #e6e1d6; }

@media (max-width: 640px) {
  .brand { font-size: 17px; }
  .pill { padding: 8px 12px; font-size: 13px; }
  .dock { left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; }
  .card { padding: 16px 18px; border-radius: 24px; }
  .card h1 { font-size: 23px; }
  .card .sub { font-size: 13.5px; }
  .talk { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bubble { animation: none; }
}

/* ---- 데모 패널 ---- */
.demo { position: fixed; right: 24px; bottom: 24px; z-index: 3; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.demo-toggle {
  border: 0; border-radius: 999px; padding: 11px 18px; cursor: pointer;
  background: var(--card); color: var(--ink); box-shadow: var(--shadow);
  font-family: 'Jua', sans-serif; font-size: 16px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.demo-body {
  display: none; width: 352px; padding: 16px 14px; border-radius: 24px;
  background: var(--card); box-shadow: var(--shadow);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.demo.open .demo-body { display: block; }
.demo-title { font-family: 'Jua', sans-serif; font-size: 15px; margin: 4px 2px 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.chip {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  width: 60px; padding: 7px 0 6px; border-radius: 16px; cursor: pointer;
  border: 1.5px solid transparent; background: var(--cream); color: var(--ink);
  font: inherit; font-size: 12px; transition: transform .15s;
}
.chip .ico { width: 34px; height: 34px; }
.chip:hover { transform: translateY(-2px); }
.chip[aria-pressed="true"] { border-color: var(--fire); background: var(--soft); }
.demo-note { font-size: 11.5px; color: var(--sub); line-height: 1.5; margin: 2px 2px 0; }
body.tod-night .demo-toggle, body.tod-night .pill { color: var(--ink); }
@media (max-width: 640px) {
  .demo { right: 12px; left: 12px; bottom: 12px; align-items: flex-end; }
  .demo-toggle { font-size: 14px; padding: 9px 14px; }
  .demo-body { width: 100%; padding: 12px 12px 10px; }
  .chips { flex-wrap: nowrap; overflow-x: auto; margin-bottom: 6px; padding-bottom: 4px; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; width: 56px; }
  .chip .ico { width: 30px; height: 30px; }
  body.demo-open .dock, body.demo-open .house { display: none; }
  body:not(.demo-open) .demo { bottom: auto; top: calc(var(--top-h, 100px) + 8px); pointer-events: none; }
  .demo > * { pointer-events: auto; }
}


/* ---- 내 사주 pill ---- */
.pill.me { background: var(--soft); color: var(--fire-deep); font-weight: 700; }
.pill.pill-hub { background: #ffe7a3; color: var(--ink); font-weight: 700; }
.pill.pill-hub:hover { background: #ffdf85; }
.pill.me:hover { background: #f6e4d2; }
@media (max-width: 640px) {
  .pill { min-height: 44px; }
  .pills { gap: 6px; }
  .pills .pill { padding: 8px 11px; font-size: 13px; }
  .brand { min-height: 44px; }
  .place { min-height: 40px; }
}

/* ---- 아래 왼쪽 묶음: 사람 줄 + 소개 카드 ---- */
.dock {
  position: fixed; left: 24px; bottom: 24px; z-index: 2; width: 380px; max-width: calc(100vw - 24px);
  display: flex; flex-direction: column; gap: 10px;
}
.people {
  display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  padding: 4px 4px 8px; margin: 0 -4px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.people::-webkit-scrollbar { display: none; }
.pchip {
  flex: none; display: inline-flex; align-items: center; gap: 8px; scroll-snap-align: start;
  min-height: 52px; padding: 5px 14px 5px 6px; border-radius: 999px; cursor: pointer;
  border: 2px solid transparent; background: var(--card); color: var(--ink); text-decoration: none;
  box-shadow: 0 8px 20px rgba(120, 80, 40, .16); font: inherit; font-size: 13px; text-align: left;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform .15s, background .2s;
}
.pchip:hover { transform: translateY(-2px); background: var(--cream); }
.pchip[aria-pressed="true"] { border-color: var(--fire); background: var(--soft); }
.pchip:focus-visible, .house-head:focus-visible, .btn:focus-visible, .pill:focus-visible { outline: 3px solid var(--water); outline-offset: 2px; }
.pav { width: 38px; height: 38px; border-radius: 50%; background: #fff; display: grid; place-items: center; overflow: hidden; flex: none; box-shadow: inset 0 0 0 1.5px rgba(67, 53, 45, .12); }
.pav .ico { width: 34px; height: 34px; }
.pcol { display: flex; flex-direction: column; gap: 5px; min-width: 56px; }
.pname { font-weight: 700; max-width: 7.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.1; }
.obar { display: flex; height: 6px; width: 100%; min-width: 56px; border-radius: 3px; overflow: hidden; gap: 1px; background: rgba(67, 53, 45, .12); }
.obar i { display: block; min-width: 2px; height: 100%; }
.padd { border-style: dashed; border-color: rgba(134, 112, 95, .5); color: var(--sub); }
.pav.plus { background: var(--soft); font-family: 'Jua', sans-serif; font-size: 24px; color: var(--fire-deep); line-height: 1; }

/* ---- 오늘의 운세 한 줄 ---- */
.today-line {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; box-sizing: border-box;
  min-height: 44px; padding: 6px 16px 6px 12px; border-radius: 999px; background: var(--card); color: var(--ink);
  text-decoration: none; font-size: 14px; font-weight: 700; box-shadow: 0 8px 20px rgba(120, 80, 40, .16);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.today-line[hidden] { display: none; }
.today-line:hover { background: var(--cream); }
.today-line:focus-visible { outline: 3px solid var(--water); outline-offset: 2px; }
.today-line .tdot { flex: none; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(67, 53, 45, .3); }
.today-line .tlab { flex: none; margin-left: -2px; font-size: 11.5px; font-weight: 700; color: #6f5b4c; }
.today-line .ttext { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-line .tstars { flex: none; color: #e0932b; letter-spacing: 1px; font-size: 13px; }
.today-line .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- 나의 한옥 카드 ---- */
.house {
  position: fixed; left: 24px; top: calc(var(--top-h, 70px) + 10px); z-index: 4; width: 330px; max-width: calc(100vw - 24px);
  border-radius: 26px; background: var(--card); box-shadow: var(--shadow);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.house-head {
  width: 100%; min-height: 48px; display: flex; align-items: center; gap: 8px; padding: 10px 18px;
  border: 0; background: none; color: var(--ink); cursor: pointer; text-align: left;
  font-family: 'Jua', sans-serif; font-size: 19px;
}
.house-head #houseTitle { flex: 1; }
.caret { width: 10px; height: 10px; border-right: 2.5px solid var(--sub); border-bottom: 2.5px solid var(--sub); transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; }
.house.open .caret { transform: rotate(-135deg) translate(-2px, -2px); }
.house-body { display: none; padding: 0 18px 16px; max-height: calc(100vh - var(--top-h, 70px) - 190px); overflow-y: auto; }
/* 데스크톱: 카드 아래 끝이 사람 줄 위에서 멈추게 (카드 머리 48px + 여백) */
@media (min-width: 641px) {
  .house-body { max-height: max(120px, calc(100vh - var(--top-h, 70px) - var(--dock-h, 420px) - 84px)); }
  /* 아래 묶음이 높아 들어갈 틈이 없을 때: 열면 묶음 위로 띄운다(teaser.js layoutUi 가 .cramped 를 붙임) */
  .house.cramped.open { z-index: 8; }
  .house.cramped.open .house-body { max-height: calc(100vh - var(--top-h, 70px) - 10px - 48px - 16px); }
}
.house.open .house-body { display: block; }
.zones { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.zones li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.45; }
.ebadge { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-family: 'Jua', sans-serif; font-size: 13px; color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(67, 53, 45, .2); margin-top: 1px; }
.ztext b { font-weight: 700; margin-right: 2px; }
.strong { font-size: 13.5px; font-weight: 700; padding: 8px 12px; border-radius: 14px; background: var(--soft); line-height: 1.5; }
.hnote { margin-top: 8px; font-size: 12.5px; color: var(--sub); line-height: 1.5; }
.house-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 2px solid var(--soft); background: var(--cream); color: var(--ink); text-decoration: none; cursor: pointer;
  font-family: 'Jua', sans-serif; font-size: 15px;
}
.btn.primary { background: var(--fire-deep); border-color: var(--fire-deep); color: #fff; }
.btn[hidden] { display: none; }
@media (max-width: 640px) {
  .house { left: 12px; width: auto; right: auto; max-width: calc(100vw - 150px); }
  .house.open { right: 12px; max-width: none; top: calc(var(--top-h, 100px) + 62px); }
  .house-head { font-size: 16px; padding: 8px 14px; min-height: 44px; }
  .house-body { max-height: 52vh; padding: 0 14px 14px; }
  .pchip { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .pchip, .caret { transition: none; }
}

/* NPC 대화: 사주당 말풍선 + 대화 내용 */
.bubble--hall { background: #fff6e6; color: #c0563c; font-size: 17px; }
.talk { max-width: 340px; }
.talk-body { margin: 0 0 12px; }
.talk-acts { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.talk-more { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 14px; background: #fbefe2; color: #43352d; font-family: 'Jua', sans-serif; font-size: 15px; text-decoration: none; }
.talk .close { min-height: 44px; }
.tk-head { margin: 0 0 6px; font-weight: 700; line-height: 1.5; word-break: keep-all; }
.tk-line { margin: 4px 0; line-height: 1.6; font-size: 14px; word-break: keep-all; }
.tk-stars { color: #e8a33d; letter-spacing: 2px; font-size: 16px; }
.tk-dot { display: inline-block; width: 14px; height: 14px; margin-right: 6px; border-radius: 50%; border: 1px solid rgba(67,53,45,.25); vertical-align: -2px; }
.tk-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 4px 0 8px; }
.tk-p { display: flex; flex-direction: column; align-items: center; padding: 8px 0 6px; border-radius: 12px; background: #fbefe2; }
.tk-p i { font-style: normal; font-family: 'Noto Serif KR', 'Batang', serif; font-weight: 700; font-size: 20px; line-height: 1.1; color: #43352d; }
.tk-p small { margin-top: 2px; font-size: 11.5px; color: #8a7565; }
@media (max-width: 640px) { .talk { left: 12px; right: 12px; bottom: 12px; max-width: none; } }

/* 사람 줄: 넘치면 가장자리 흐림 + 화살표 (2026-10-06) */
.people-wrap { position: relative; }
.people { padding: 6px 6px 12px; margin: -6px -6px 0; scroll-padding-inline: 8px; }
.people-wrap.can-r .people { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
.people-wrap.can-l .people { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px); mask-image: linear-gradient(90deg, transparent, #000 44px); }
.people-wrap.can-l.can-r .people { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
.pscroll {
  position: absolute; top: 50%; z-index: 2; width: 34px; height: 34px; margin-top: -20px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--cream); color: var(--ink); font-size: 22px; line-height: 1; box-shadow: 0 6px 14px rgba(120, 80, 40, .22);
}
.pscroll[hidden] { display: none; }
.pscroll--l { left: -6px; }
.pscroll--r { right: -6px; }
.pscroll:focus-visible { outline: 3px solid var(--water); outline-offset: 2px; }
@media (hover: none) { .pscroll { display: none !important; } }

/* 띠 펫: 말풍선 대신 동물 얼굴 버튼, 사람 칩 옆 작은 띠 아이콘 */
.bubble--pet { width: 46px; height: 46px; margin: -62px 0 0 -23px; padding: 3px; border-radius: 50%; background: #fffdf9; border: 2px solid #43352d; display: grid; place-items: center; }
.bubble--pet svg { display: block; width: 100%; height: 100%; }
.bubble--pet[hidden] { display: none; }
.gate-edge { position: fixed; z-index: 3; right: 0; min-height: 44px; padding: 0 10px 0 14px; border: 2px solid #43352d; border-right: 0; border-radius: 22px 0 0 22px; background: #fff6e6; color: var(--fire-deep); font-family: 'Jua', sans-serif; font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; box-shadow: 0 4px 10px rgba(120, 80, 40, .2); animation: gate-edge-nudge 1.8s ease-in-out infinite; }
.gate-edge[hidden] { display: none; }
.gate-edge b { font-weight: 400; font-size: 17px; }
.gate-edge:focus-visible { outline: 3px solid var(--water); outline-offset: 2px; }
@keyframes gate-edge-nudge { 50% { transform: translateX(-5px); } }
@media (prefers-reduced-motion: reduce) { .gate-edge { animation: none; } }
.bubble-hi { position: fixed; z-index: 3; transform: translate(-50%, -100%); padding: 5px 12px; border-radius: 16px; border: 2px solid #43352d; background: #fffdf9; color: #43352d; font-family: 'Jua', sans-serif; font-size: 16px; line-height: 1.2; white-space: nowrap; pointer-events: none; box-shadow: 0 4px 10px rgba(120, 80, 40, .2); animation: hi-pop .25s ease-out; }
.bubble-hi::after { content: ''; position: absolute; left: 50%; bottom: -8px; width: 10px; height: 10px; margin-left: -5px; background: #fffdf9; border: solid #43352d; border-width: 0 2px 2px 0; transform: rotate(45deg) skew(8deg, 8deg); }
.bubble-hi[hidden] { display: none; }
@keyframes hi-pop { from { transform: translate(-50%, -80%) scale(.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bubble-hi { animation: none; } }
@media (max-width: 640px) { .bubble-hi { font-size: 15px; padding: 4px 10px; } }
.pnrow { display: flex; align-items: center; gap: 4px; min-width: 0; }
.pzd { display: inline-block; flex: none; width: 20px; height: 20px; }
.pzd svg { display: block; width: 100%; height: 100%; }
.pnrow .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===== 모바일 레이아웃 정리 (palja-mobile-v1) — 반드시 파일 맨 끝: 앞의 데스크톱 규칙보다 늦게 나와야 이긴다 ===== */
.intro-toggle, .demo-close { display: none; }
.intro-body { display: block; }
.demo-ico { display: inline; }
.myplace { position: relative; }
.myplace::after { content: ""; position: absolute; inset: -11px -4px; } /* 눈에 보이는 크기는 그대로, 터치 영역만 44px 이상 */

@media (max-width: 640px) {
  body { height: 100dvh; }
  .top { top: calc(10px + env(safe-area-inset-top)); left: calc(12px + env(safe-area-inset-left)); right: calc(12px + env(safe-area-inset-right)); gap: 6px; }
  .place { min-height: 44px; padding: 0 8px 0 14px; font-size: 13px; }
  .myplace { margin-left: 2px; padding: 5px 11px; }
  .myplace::after { content: ''; position: absolute; inset: -11px -4px; }

  /* 아래 묶음: 좌우 12px, 넘침 없음 */
  .dock { left: calc(12px + env(safe-area-inset-left)); right: calc(12px + env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom)); width: auto; max-width: none; box-sizing: border-box; gap: 8px; }

  /* 소개 카드: 접이식 시트 */
  .card { padding: 10px 14px 4px; border-radius: 22px; box-sizing: border-box; }
  .card.open { padding-bottom: 14px; }
  .intro-head { display: flex; flex-direction: column; align-items: flex-start; }
  .eyebrow { font-size: 12px; padding: 3px 10px; margin-bottom: 0; }
  .intro-toggle {
    display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0; border: 0; background: none;
    color: var(--ink); font-family: 'Jua', sans-serif; font-size: clamp(14px, 4.5vw, 18px); text-align: left; cursor: pointer;
  }
  .intro-toggle:focus-visible { outline: 3px solid var(--water); outline-offset: 2px; border-radius: 12px; }
  .intro-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .card.open .intro-toggle .caret { transform: rotate(-135deg) translate(-2px, -2px); }
  .intro-body { display: none; }
  .card.open .intro-body { display: block; }
  .card h1 { display: none; }
  .card .sub { font-size: 13px; line-height: 1.6; }
  .card .hint { margin-top: 8px; font-size: 12px; }

  /* 사람 줄 */
  .people { gap: 6px; padding: 4px 6px 6px; margin: -4px -6px 0; }
  .pchip { min-height: 46px; padding: 4px 12px 4px 5px; gap: 6px; font-size: 12.5px; }
  .pav { width: 34px; height: 34px; }
  .pav .ico { width: 30px; height: 30px; }
  .pcol { gap: 4px; min-width: 50px; }
  .pname { max-width: 6.5em; }
  .pzd { width: 18px; height: 18px; }
  .today-line { min-height: 44px; padding: 4px 12px 4px 10px; gap: 6px; font-size: 13px; }
  .today-line .tdot { width: 14px; height: 14px; }
  .today-line .tstars { font-size: 12px; letter-spacing: 0; }

  /* 나의 한옥: 날씨 줄 옆(또는 바로 아래) 작은 알약, 열면 사람 줄 위까지의 오버레이 시트 */
  .house {
    left: var(--house-left, calc(12px + env(safe-area-inset-left))); top: var(--house-top, calc(var(--top-h, 100px) + 6px));
    right: auto; width: auto; max-width: calc(100vw - 24px); border-radius: 999px; z-index: 4;
  }
  .house.open { right: calc(12px + env(safe-area-inset-right)); left: calc(12px + env(safe-area-inset-left)); max-width: none; border-radius: 24px; top: var(--house-top, calc(var(--top-h, 100px) + 6px)); }
  .house-head { min-height: 44px; padding: 0 14px; font-size: 15px; }
  .house-body { max-height: max(120px, calc(100dvh - var(--house-top, 140px) - 44px - var(--dock-h, 220px) - 12px)); padding: 0 14px 14px; }

  /* 하늘 바꿔보기: 둥근 48px 버튼 + 아래 시트 */
  .demo, body:not(.demo-open) .demo {
    left: auto; top: auto; right: calc(12px + env(safe-area-inset-right)); bottom: calc(var(--dock-h, 220px) + 10px);
    pointer-events: auto; align-items: flex-end;
  }
  .demo-toggle { width: 48px; height: 48px; padding: 0; border-radius: 50%; font-size: 22px; line-height: 1; display: grid; place-items: center; }
  .demo-label { display: none; }
  body.demo-open .demo-toggle { display: none; }
  .demo.open { z-index: 6; }
  .demo-body {
    position: fixed; left: 0; right: 0; bottom: 0; width: auto; max-height: 72dvh; overflow-y: auto; box-sizing: border-box;
    padding: 12px 14px calc(14px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0;
  }
  .demo-close {
    display: block; margin: 0 0 4px auto; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer;
    background: var(--soft); color: var(--ink); font-family: 'Jua', sans-serif; font-size: 15px;
  }
  .chip { min-height: 56px; }

  .talk { left: calc(12px + env(safe-area-inset-left)); right: calc(12px + env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom)); max-width: none; box-sizing: border-box; }
  .bubble { width: 44px; height: 44px; margin: -56px 0 0 -22px; }
  .bubble--pet { width: 46px; height: 46px; margin: -62px 0 0 -23px; }
}

/* 모바일 헤더 (2026-10-07): 테마 헤더(theme/palja/css/layout.css)와 같은 구성 — 로고 원형 + 핵심 알약 2개 + "메뉴" 시트. 날씨는 다음 줄.
   시트 마크업·동작은 theme/palja/js/pm-menu.js, 시트 CSS 는 palja/assets/ui/menu-sheet.css 를 테마와 함께 쓴다. */
.pill-admin { background: #f6e4d2; }
.pm-dot { display: inline-block; width: 8px; height: 8px; margin-left: 2px; border-radius: 50%; background: var(--fire); box-shadow: 0 0 0 2px var(--card); align-self: flex-start; }
.pm-menu-btn { display: none; font: inherit; font-size: 13px; cursor: pointer; border: 0; }
@media (max-width: 640px) {
  header.top { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 8px; row-gap: 8px; }
  header.top .brand { grid-column: 1; grid-row: 1; padding: 6px; min-width: 44px; min-height: 44px; justify-content: center; font-size: 0; gap: 0; }
  header.top .brand .logo { width: 32px; height: 32px; }
  header.top .pills { grid-column: 2; grid-row: 1; display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 6px; min-width: 0; }
  header.top .pills .pill { flex: none; padding: 0 12px; min-height: 44px; font-size: 13px; white-space: nowrap; justify-content: center; }
  header.top .pills .pm-x { display: none; }
  header.top .pills .pm-menu-btn { display: inline-flex; gap: 6px; }
  header.top .pm-menu-ic { display: block; flex: none; }
  header.top .place { grid-column: 1 / -1; grid-row: 2; justify-self: start; max-width: 100%; }

}
/* 메뉴 시트(아래에서 올라오는 링크 목록) CSS 는 palja/assets/ui/menu-sheet.css 공용(테마와 함께 쓴다) */
.pm-menu-btn:focus-visible { outline: 3px solid var(--water); outline-offset: 2px; }
/* ---- V2 마을 확장: 장소 칩 · 장소 말풍선 · 대화 메뉴 · 목록 대체 화면 (2026-10-06) ---- */
#stage canvas { cursor: grab; }
#stage canvas:active { cursor: grabbing; }
.places-wrap { position: relative; display: flex; align-items: center; gap: 8px; }
.places-wrap[hidden] { display: none; }
.places {
  flex: 1; min-width: 0; display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  padding: 6px 6px 8px; margin: -6px -6px -8px; scroll-padding-inline: 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.places::-webkit-scrollbar { display: none; }
.places-wrap.can-r .places { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.places-wrap.can-l .places { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px); mask-image: linear-gradient(90deg, transparent, #000 36px); }
.places-wrap.can-l.can-r .places { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
.plchip { min-height: 44px; padding: 0 16px; font-weight: 700; white-space: nowrap; }
.pl-btn {
  flex: none; min-height: 44px; min-width: 44px; padding: 0 14px; border: 2px solid transparent; border-radius: 999px; cursor: pointer;
  background: var(--card); color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; box-shadow: 0 8px 20px rgba(120, 80, 40, .16);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.pl-btn.on, .pl-btn:hover { background: var(--soft); }
.pl-btn.on { border-color: var(--fire); }
.pl-btn:focus-visible, .pl-close:focus-visible, .pl-menu:focus-visible, .tk-menu:focus-visible { outline: 3px solid var(--water); outline-offset: 2px; }
.bubbles { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 3; }
.bubble.bubble--place {
  width: auto; min-width: 44px; height: 44px; margin: 0; padding: 0 13px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap;
  border: 2px solid #43352d; border-radius: 22px; background: #fff6e6; color: #43352d; font-size: 15px; line-height: 1;
  transform: translate(-50%, calc(-100% - 12px)); animation: bobp 1.6s ease-in-out infinite;
}
.bubble--place i { font-style: normal; font-size: 17px; }
.bubble--place::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: 9px; height: 9px; margin-left: -5px; background: #fff6e6; border: solid #43352d; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.bubble--place:focus-visible { outline: 3px solid var(--water); outline-offset: 2px; }
@keyframes bobp { 50% { transform: translate(-50%, calc(-100% - 18px)); } }
.bubble--place[hidden] { display: none; }
.plchip[hidden] { display: none; }
.pan-hint {
  position: fixed; z-index: 3; left: 50%; top: 96px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px;
  max-width: calc(100vw - 24px); padding: 10px 16px; border-radius: 999px; background: rgba(255, 253, 249, .94); border: 2px solid #43352d;
  color: #43352d; font-family: 'Jua', sans-serif; font-size: 15px; box-shadow: 0 6px 16px rgba(120, 80, 40, .25); pointer-events: none; animation: hi-pop .3s ease-out;
}
.pan-hint b { font-weight: 400; }
@media (max-width: 640px) { .pan-hint { top: auto; bottom: 84px; padding: 8px 14px; gap: 8px; font-size: 14px; white-space: nowrap; } }
.pan-hint[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .pan-hint { animation: none; } }
.talk { max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain; }
.talk-menus { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.talk-menus[hidden] { display: none; }
.tk-menu {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 14px; box-sizing: border-box;
  background: var(--fire-deep); color: #fff; font-family: 'Jua', sans-serif; font-size: 15px; text-decoration: none; line-height: 1.2;
}
a.tk-menu:hover { filter: brightness(1.05); }
.tk-soon { background: rgba(134, 112, 95, .14); color: var(--sub); font-family: inherit; font-size: 13.5px; font-weight: 700; }
.tk-soon small { font-size: 11px; font-weight: 400; opacity: .85; }

.placelist {
  position: fixed; z-index: 3; right: 24px; top: 84px; width: 340px; max-height: calc(100dvh - 108px); overflow-y: auto; box-sizing: border-box;
  padding: 14px 16px 16px; border-radius: 22px; background: var(--cream); box-shadow: var(--shadow); overscroll-behavior: contain;
}
.placelist[hidden] { display: none; }
.pl-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.pl-head h1, .pl-head h2 { margin: 0; font-family: 'Jua', sans-serif; font-weight: 400; font-size: 20px; }
.pl-close {
  min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer; background: var(--soft); color: var(--ink);
  font-family: 'Jua', sans-serif; font-size: 15px;
}
.pl-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pl-item { padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(67, 53, 45, .1); }
.pl-item h3 { margin: 0 0 4px; font-family: 'Jua', sans-serif; font-weight: 400; font-size: 17px; }
.pl-item h3 small { margin-left: 8px; font-family: inherit; font-size: 12.5px; color: #6f5b4c; }
.pl-item p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.55; color: #6f5b4c; word-break: keep-all; }
.pl-menus { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-menu {
  display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 12px; border-radius: 12px; box-sizing: border-box;
  background: var(--soft); color: var(--ink); font-size: 13.5px; font-weight: 700; text-decoration: none;
}
a.pl-menu:hover { background: #f6e3cf; }
.pl-soon { background: rgba(134, 112, 95, .1); color: #6f5b4c; font-weight: 400; }
.pl-soon small { font-size: 11px; opacity: .85; }

/* 3D 를 쓸 수 없을 때: 목록이 곧 마을 화면 */
body.no-3d { overflow: auto; }
body.no-3d .dock, body.no-3d #house, body.no-3d #demo, body.no-3d #stage { display: none; }
body.no-3d .placelist { left: 50%; right: auto; transform: translateX(-50%); width: min(720px, calc(100vw - 24px)); top: 96px; bottom: 16px; max-height: none; }
body.no-3d .pl-close { display: none; }
@media (max-width: 640px) { body.pl-open #house { display: none; } } /* 모바일: 목록이 열리면 한옥 알약이 목록 뒤로 삐져나오지 않게 */
@media (min-width: 641px) { body.no-3d .pl-items { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .bubble.bubble--place { animation: none; } }

@media (max-width: 640px) {
  .places { gap: 6px; padding: 4px 6px 6px; margin: -4px -6px -6px; }
  .plchip { padding: 0 14px; font-size: 13px; }
  .tk-menu { font-size: 14.5px; padding: 0 12px; }
  .talk { max-height: calc(100dvh - 96px); }
  .placelist {
    left: calc(12px + env(safe-area-inset-left)); right: calc(12px + env(safe-area-inset-right)); width: auto; z-index: 5;
    top: calc(var(--top-h, 100px) + 12px); bottom: calc(12px + env(safe-area-inset-bottom)); max-height: none;
  }
  body.no-3d .placelist { left: 12px; right: 12px; width: auto; transform: none; top: 130px; }
}
.talk-more[hidden], .talk .close[hidden] { display: none; }

/* ---- V3: 장면 전환(대문 포털)·시장 골목 걷는 사람 툴팁·친구 집 방문·서신·담벼락 (2026-10-06) ---- */
.fade { position: fixed; inset: 0; z-index: 7; background: radial-gradient(circle at 50% 55%, #fff7e8, #f3dcbc); opacity: 0; pointer-events: none; transition: opacity .38s ease; }
.fade.on { opacity: 1; pointer-events: auto; }
.fade::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 400 18px/1.4 'Jua', 'Pretendard Variable', system-ui, sans-serif; color: #6b5645; opacity: 0; transition: opacity .25s ease; white-space: nowrap; }
.fade.msg::after { content: '장터 골목으로 가는 중이에요…'; opacity: 1; }
body.tod-night .fade.msg::after { color: #dfe4fb; }
body.tod-night .fade { background: radial-gradient(circle at 50% 55%, #4a5688, #262f55); }
.bubble-portal {
  position: fixed; z-index: 4; transform: translate(-50%, -100%); margin-top: -8px; min-height: 44px; padding: 0 18px; border: 2px solid var(--ink); border-radius: 22px;
  background: #fffdf9; color: var(--ink); font-family: 'Jua', sans-serif; font-size: 16px; cursor: pointer; white-space: nowrap;
  box-shadow: 0 6px 14px rgba(120, 80, 40, .25); animation: bob 1.6s ease-in-out infinite;
}
.bubble-portal[hidden] { display: none; }
.pl-go {
  display: inline-block; margin: 0 0 8px; padding: 6px 0; border: 0; background: none; color: var(--sub); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; min-height: 44px;
}
.pl-go[hidden] { display: none; }
.pl-intro { display: block; margin-bottom: 0; color: var(--ink); } /* 목록 맨 위의 "별이 켜지는 하늘" 진입(한옥 카드가 가려질 때를 위한 같은 항목) */
body.scene-market .people-wrap, body.scene-market #house, body.scene-market #intro, body.scene-market #todayLine { display: none; }

.walk-tip {
  position: fixed; z-index: 4; transform: translate(-50%, -100%); width: min(300px, calc(100vw - 16px)); box-sizing: border-box; padding: 12px 14px 14px;
  border-radius: 18px; background: var(--cream); box-shadow: var(--shadow); color: var(--ink); font-size: 14px;
}
.walk-tip[hidden] { display: none; }
.walk-tip::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; margin-left: -7px; background: var(--cream); transform: rotate(45deg); border-radius: 0 0 4px 0; }
.wt-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.wt-head strong { font-family: 'Jua', sans-serif; font-weight: 400; font-size: 17px; }
.wt-badge { padding: 2px 9px; border-radius: 999px; background: var(--soft); color: var(--fire-deep); font-size: 12px; font-weight: 700; }
.wt-b-friend { background: #e6f1ff; color: #3f6fb5; }
.wt-b-self { background: #fff0c9; color: #a87612; }
.wt-x { margin-left: auto; width: 44px; height: 44px; margin-top: -10px; margin-right: -10px; border: 0; background: none; font-size: 22px; color: var(--sub); cursor: pointer; }
.wt-line { margin: 3px 0; line-height: 1.55; word-break: keep-all; }
.wt-stars { color: #e8a33d; letter-spacing: 2px; }
.wt-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.wt-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 6px; padding: 0 14px; border: 0; border-radius: 14px; cursor: pointer;
  background: var(--soft); color: var(--ink); font-family: 'Jua', sans-serif; font-size: 15px; text-decoration: none;
}
.wt-acts .wt-btn { margin-top: 0; }
.wt-go { background: var(--fire-deep); color: #fff; }

.visit-bar {
  position: fixed; z-index: 3; left: 50%; top: 92px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
  max-width: calc(100vw - 24px); box-sizing: border-box; padding: 6px 8px 6px 16px; border-radius: 999px; background: var(--card); box-shadow: 0 8px 20px rgba(120, 80, 40, .18);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 14px;
}
.visit-bar[hidden] { display: none; }
.vb-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--soft); color: var(--ink); font-family: 'Jua', sans-serif; font-size: 14.5px; text-decoration: none; cursor: pointer; }
.vb-home { background: var(--fire-deep); color: #fff; }
body.visiting .padd, body.visiting #houseCta, body.visiting #intro, body.visiting #demo { display: none; }

.letter { position: fixed; inset: 0; z-index: 6; display: grid; place-items: center; background: rgba(67, 53, 45, .35); }
.letter[hidden] { display: none; }
.lt-paper { position: relative; width: min(340px, calc(100vw - 32px)); padding: 18px 18px 14px; border-radius: 6px 18px 6px 18px; background: #fff9ec; box-shadow: var(--shadow); animation: lt-in .35s ease-out; }
@keyframes lt-in { from { transform: translateY(24px) rotate(-3deg); opacity: 0; } to { transform: none; opacity: 1; } }
.lt-to { margin: 0 0 8px; font-family: 'Jua', sans-serif; font-size: 18px; }
.lt-text { width: 100%; box-sizing: border-box; padding: 10px; border: 1.5px dashed rgba(67, 53, 45, .35); border-radius: 10px; background: transparent; font: inherit; font-size: 15px; line-height: 1.6; resize: none; color: var(--ink); }
.lt-acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.lt-stamps { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.lt-stamps-lab { flex: none; font-family: 'Jua', sans-serif; font-size: 14px; color: var(--sub); }
.lt-stamp-row { display: flex; gap: 6px; overflow-x: auto; flex: 1; min-width: 0; padding: 2px 0; scrollbar-width: none; }
.lt-stamp-row::-webkit-scrollbar { display: none; }
.lt-chip { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 44px; min-height: 44px; padding: 0 10px; border: 2px solid transparent; border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: 13.5px; cursor: pointer; white-space: nowrap; }
.lt-chip[aria-checked="true"] { border-color: var(--fire); background: #ffece4; }
.lt-chip img { width: 28px; height: 28px; object-fit: contain; }
.lt-chip .lt-chip-ic { font-size: 18px; line-height: 1; }
.lt-acts button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 14px; cursor: pointer; font-family: 'Jua', sans-serif; font-size: 15px; background: var(--soft); color: var(--ink); }
.lt-acts .lt-send { background: var(--fire-deep); color: #fff; }
.lt-acts button:disabled { opacity: .55; cursor: default; }
.lt-stamp { position: absolute; right: 22px; bottom: 54px; padding: 8px 12px; border: 4px double #c0392b; border-radius: 10px; color: #c0392b; font-family: 'Jua', sans-serif; font-size: 20px; line-height: 1.1; text-align: center; opacity: 0; transform: scale(2.4) rotate(-14deg); pointer-events: none; }
.letter.sent .lt-stamp { animation: lt-stamp .45s cubic-bezier(.2, .9, .3, 1.2) forwards; }
@keyframes lt-stamp { 0% { opacity: 0; transform: scale(2.4) rotate(-14deg); } 70% { opacity: .95; transform: scale(.92) rotate(-14deg); } 100% { opacity: .9; transform: scale(1) rotate(-14deg); } }

.wl-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; max-height: 38dvh; overflow-y: auto; }
.wl-note { position: relative; padding: 10px 12px 8px; border-radius: 4px 12px 4px 12px; background: #fff3d6; box-shadow: 0 2px 6px rgba(120, 80, 40, .15); }
.wl-note.is-hidden { opacity: .55; }
.wl-note p { margin: 0 0 4px; line-height: 1.5; word-break: break-all; }
.wl-note small { color: var(--sub); font-size: 12px; }
.wl-acts { display: flex; gap: 6px; margin-top: 4px; }
.wl-acts button { min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: #fff; color: var(--ink); font-size: 13px; cursor: pointer; }
.lt-bond { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 8px; border-radius: 999px; background: var(--soft); color: var(--ink); font-family: 'Jua', sans-serif; font-size: 14.5px; text-decoration: none; }
.wl-list + .lt-bond, .tk-line + .lt-bond { margin-top: 10px; }
.wl-form { display: flex; gap: 8px; align-items: stretch; }
.wl-form textarea { flex: 1; min-width: 0; padding: 8px 10px; border: 1.5px solid rgba(67, 53, 45, .25); border-radius: 12px; font: inherit; font-size: 14px; resize: none; background: #fff; }
.wl-post { min-width: 64px; min-height: 44px; border: 0; border-radius: 14px; background: var(--fire-deep); color: #fff; font-family: 'Jua', sans-serif; font-size: 15px; cursor: pointer; }
.wl-post:disabled { opacity: .55; cursor: default; }
@media (prefers-reduced-motion: reduce) { .bubble-portal, .lt-paper { animation: none; } .fade { transition: none; } }
@media (max-width: 640px) { .visit-bar { top: calc(var(--top-h, 100px) + 54px); } }
.intro-cta { margin-top: 12px; min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.card h1, .card .sub, .card .hint { word-break: keep-all; }
.visit-bar { border-radius: 24px; }
@media (max-width: 640px) { .visit-bar { left: 12px; right: 12px; transform: none; max-width: none; padding: 6px 10px; gap: 6px; } .visit-bar .vb-text { flex: 1 1 100%; text-align: center; } .vb-btn { flex: 1; justify-content: center; } }

/* 친구 요청 소식 전령(까치) 말풍선 알약과 목록 항목 */
.bubble.bubble--msg { background: #fff0ec; color: #b2402b; border-color: #b2402b; }
.bubble--msg::after { background: #fff0ec; border-color: #b2402b; }
.bubble--msg.is-done { background: #eef7ea; color: #3d6b3a; border-color: #3d6b3a; }
.bubble--msg.is-done::after { background: #eef7ea; border-color: #3d6b3a; }
body.tod-night .bubble.bubble--msg { box-shadow: 0 0 14px rgba(255, 190, 150, .45); }
button.pl-menu { border: 0; font-family: inherit; cursor: pointer; }
button.pl-menu:hover { background: #f6e3cf; }
.pl-menu[hidden] { display: none; }
.pl-fr-inbox b { font-family: 'Jua', sans-serif; font-weight: 400; font-size: 15px; color: #b2402b; }
.pl-friend .pl-fr-inbox { box-shadow: inset 0 0 0 1.5px #b2402b; }
.plchip--friend { border-style: dashed; }

/* 서신 창 편지지(장터): 종이 그림 위에 크림색 판을 덮어 글자 대비 4.5:1 을 지킨다 */
.lt-paper.has-paper { background: linear-gradient(rgba(255, 249, 236, .76), rgba(255, 249, 236, .76)), var(--lt-bg) center / cover no-repeat; }
.lt-papers { margin-top: 4px; }

/* 소품 눌러 보기 카드: 장소 대화 카드와 같은 자리(오른쪽 아래, 모바일은 아래 시트) */
.deco-card.vcard { position: fixed; z-index: 4; right: 24px; bottom: 24px; width: 340px; max-width: calc(100vw - 24px); padding: 16px 18px; }
.dc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.dc-t { flex: 1; min-width: 0; }
.dc-t .vc-title { margin: 0; }
.dc-pic { flex: none; width: 56px; height: 56px; border-radius: 16px; background: var(--vc-inset); object-fit: contain; }
.dc-emoji { display: inline-flex; align-items: center; justify-content: center; font-size: 30px; }
.dc-x { flex: none; width: 44px; height: 44px; margin: -8px -8px 0 0; border: 0; background: none; color: var(--vc-sub); font-size: 24px; cursor: pointer; }
.dc-x:focus-visible, .dc-bag:focus-visible { outline: 3px solid var(--vc-star, #3a7bd5); outline-offset: 2px; }
.deco-card .vc-note { margin: 4px 0 2px; font-size: 13.5px; }
.deco-card .vc-acts { justify-content: flex-start; }
@media (max-width: 640px) { .deco-card.vcard { left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; } }

/* 목록 화면의 소품 카드(3D 를 못 쓰는 화면용) */
.pl-deco-list { display: grid; gap: 8px; }
.deco-card-inline { padding: 10px 12px; border-radius: 14px; background: #fbefe2; color: #43352d; }
.deco-card-inline .dc-head { margin-bottom: 2px; }
.deco-card-inline .dc-pic { background: #fff; }
.deco-card-inline .vc-title { font-family: 'Jua', sans-serif; font-weight: 400; font-size: 17px; color: #43352d; }
.deco-card-inline .vc-body { margin: 2px 0 6px; font-size: 13.5px; color: #43352d; }
.deco-card-inline .vc-note { margin: 2px 0 0; font-size: 13px; color: #5f4b3e; }
.deco-card-inline .pl-menu { min-height: 44px; display: inline-flex; align-items: center; }

/* ======================================================================
   HUD 규격 (2026-10-07) — 화면 위에 뜨는 UI 의 가장자리 여백·높이·간격·열 폭을 토큰 하나로 통일한다.
   규칙 정본: docs/palja/specs/design-rules.md "3D 무대 HUD". 이 블록은 파일 맨 끝이라 위의 낱개 값을 덮는다.
   - 좌측 요소는 모두 같은 x(--hud-gutter), 우측 요소는 모두 같은 right(--hud-gutter), 위·아래 가장자리도 같은 값
   - 상단 줄·장소 칩·사람 카드·오늘 한 줄·한옥 머리·하늘 바꿔보기는 모두 --hud-ctl-h 높이(세로 중심 동일)
   - 좌측 열은 --hud-col-w 단일 폭. 강조색은 "주요 행동 1개(운세·타로)"만 노랑, 나머지는 같은 카드색.
   ====================================================================== */
:root {
  --hud-gutter: 24px; --hud-ctl-h: 48px; --hud-gap: 12px; --hud-col-w: 420px;
  --hud-r-ctl: 999px; --hud-r-card: 24px;
}
@media (max-width: 640px) {
  :root { --hud-gutter: 12px; --hud-ctl-h: 44px; --hud-gap: 8px; --hud-col-w: calc(100vw - 2 * var(--hud-gutter)); }
}

/* 강조 규칙: 주요 행동(.pill-hub) 하나만 노랑. 내 사주·관리자도 같은 카드색(구분은 굵기·점 표시로) */
.pill.me, .pill-admin { background: var(--card); color: var(--ink); }
.pill.me:hover, .pill-admin:hover { background: var(--cream); }

/* 상단 줄 */
.top { top: var(--hud-gutter); left: var(--hud-gutter); right: var(--hud-gutter); gap: var(--hud-gap); align-items: center; }
.top .pill { box-sizing: border-box; height: var(--hud-ctl-h); min-height: var(--hud-ctl-h); padding: 0 18px; font-size: 14px; white-space: nowrap; }
.top .brand { padding: 0 18px 0 8px; gap: 8px; }
.top .brand .logo { width: calc(var(--hud-ctl-h) - 12px); height: calc(var(--hud-ctl-h) - 12px); }
.pills { gap: var(--hud-gap); }
.myplace { height: 32px; padding: 0 12px; font-size: 13px; line-height: 32px; }

/* 좌측 열: 한옥(위) + 묶음(아래)이 같은 x·같은 폭 */
.dock { left: var(--hud-gutter); bottom: var(--hud-gutter); width: var(--hud-col-w); max-width: calc(100vw - 2 * var(--hud-gutter)); gap: var(--hud-gap); }
.house { left: var(--hud-gutter); top: calc(var(--top-h, 72px) + var(--hud-gap)); width: var(--hud-col-w); max-width: calc(100vw - 2 * var(--hud-gutter)); border-radius: var(--hud-r-card); }
.house-head { min-height: var(--hud-ctl-h); height: var(--hud-ctl-h); padding: 0 18px; font-size: 18px; }
.house.open .house-head { height: var(--hud-ctl-h); }
.places-wrap, .people-wrap { width: 100%; }
.places-wrap { gap: var(--hud-gap); }
.places { gap: var(--hud-gap); padding-left: 6px; padding-right: 0; margin-left: -6px; margin-right: 0; }
.plchip, .pl-btn { height: var(--hud-ctl-h); min-height: var(--hud-ctl-h); box-sizing: border-box; }
.people { gap: var(--hud-gap); padding: 6px 6px 14px; margin: -6px -6px -14px; }
.pchip { height: var(--hud-ctl-h); min-height: var(--hud-ctl-h); box-sizing: border-box; padding: 0 14px 0 6px; }
.pav { width: calc(var(--hud-ctl-h) - 12px); height: calc(var(--hud-ctl-h) - 12px); }
.pav .ico { width: calc(var(--hud-ctl-h) - 16px); height: calc(var(--hud-ctl-h) - 16px); }
.pscroll--l { left: 4px; } .pscroll--r { right: 4px; }
.today-line { align-self: stretch; width: 100%; height: var(--hud-ctl-h); min-height: var(--hud-ctl-h); padding: 0 16px 0 12px; }
.card { border-radius: var(--hud-r-card); }

/* 우하단: 하늘 바꿔보기 — 좌하단 묶음과 같은 bottom, 같은 높이 */
.demo { right: var(--hud-gutter); bottom: var(--hud-gutter); gap: var(--hud-gap); }
.demo-toggle { box-sizing: border-box; height: var(--hud-ctl-h); padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; font-size: 15px; }
.deco-card.vcard { right: var(--hud-gutter); bottom: var(--hud-gutter); }
.visit-bar { top: calc(var(--top-h, 72px) + var(--hud-gap)); }

/* 데스크톱(≥1024): 위치·날씨는 하늘 바꿔보기 바로 위에 쌓는다(같은 right, 간격 --hud-gap). 상단 줄은 로고 ↔ 메뉴만 */
@media (min-width: 1024px) {
  header.top .place { position: fixed; right: var(--hud-gutter); bottom: calc(var(--hud-gutter) + var(--hud-ctl-h) + var(--hud-gap)); z-index: 3; }
  .demo.open .demo-body { margin-bottom: calc(var(--hud-ctl-h) + var(--hud-gap)); }
}

/* 모바일: 같은 원칙(여백 12·높이 44·간격 8)으로 맞춘다. 헤더 시트 동작은 그대로 */
@media (max-width: 640px) {
  .top { top: calc(var(--hud-gutter) + env(safe-area-inset-top)); left: calc(var(--hud-gutter) + env(safe-area-inset-left)); right: calc(var(--hud-gutter) + env(safe-area-inset-right)); gap: var(--hud-gap); }
  header.top { column-gap: var(--hud-gap); row-gap: var(--hud-gap); }
  .top .pill, header.top .pills .pill { height: var(--hud-ctl-h); min-height: var(--hud-ctl-h); }
  header.top .brand { padding: 0; min-width: var(--hud-ctl-h); }
  header.top .pills { gap: var(--hud-gap); }
  .place { padding: 0 8px 0 14px; }
  .house { left: var(--house-left, calc(var(--hud-gutter) + env(safe-area-inset-left))); }
  .house-head { height: var(--hud-ctl-h); padding: 0 14px; font-size: 15px; }
  .dock { left: calc(var(--hud-gutter) + env(safe-area-inset-left)); right: calc(var(--hud-gutter) + env(safe-area-inset-right)); bottom: calc(var(--hud-gutter) + env(safe-area-inset-bottom)); width: auto; }
  .people { gap: var(--hud-gap); padding: 6px 6px 14px; margin: -6px -6px -14px; }
  .pchip { padding: 0 12px 0 5px; gap: 6px; }
  .today-line { padding: 0 12px 0 10px; }
  .demo, body:not(.demo-open) .demo { right: calc(var(--hud-gutter) + env(safe-area-inset-right)); bottom: calc(var(--dock-h, 220px) + var(--hud-gap)); }
  .demo-toggle { width: var(--hud-ctl-h); height: var(--hud-ctl-h); padding: 0; }
  .visit-bar { top: calc(var(--top-h, 100px) + var(--hud-gap)); }
}
/* 태블릿(641~1023): 날씨는 상단 줄에 남고 메뉴 알약은 다음 줄로 내려가므로 우측 기준선(right = gutter)에 붙인다 */
@media (min-width: 641px) and (max-width: 1023px) { header.top nav.pills { margin-left: auto; } }