/* 커밍 홈즈 · 동네 지도와 옷가게 (온유 2026-11-13) */
#outMap, #shop { position: fixed; inset: 0; display: none; }
body.outmap #outMap { display: block; background: #55604f; overflow: hidden; }
body.shop #shop { display: flex; }
body.outmap #town, body.outmap #pickBar, body.outmap #say, body.outmap #start, body.outmap #char, body.outmap #mode, body.outmap #room,
body.shop #town, body.shop #pickBar, body.shop #say, body.shop #start, body.shop #char, body.shop #mode, body.shop #room { display: none; }
#omWrap { position: absolute; left: 50%; top: 50%; aspect-ratio: 937 / 1678; width: min(100vw, calc(100vh * 937 / 1678)); transform: translate(-50%, -50%); }
#omWrap img { width: 100%; height: 100%; display: block; }
#omPins { position: absolute; inset: 0; }
.omPin { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 14px 10px; border-radius: 16px; background: var(--accent, #ff8a3d); color: #fff; box-shadow: 0 4px 0 var(--accent-dk, #c8642a); font: inherit; animation: omBob 1.6s ease-in-out infinite; }
.omPin::after { content: ''; position: absolute; bottom: -9px; left: 50%; margin-left: -8px; border: 8px solid transparent; border-top-color: var(--accent, #ff8a3d); border-bottom: 0; }
.omPin b { font-size: 17px; } .omPin small { font-size: 11px; opacity: 0.9; }
.omPin.shop { background: #5a8fd6; box-shadow: 0 4px 0 #3c6aa8; animation-delay: .5s; } .omPin.shop::after { border-top-color: #5a8fd6; }
@keyframes omBob { 50% { transform: translate(-50%, calc(-100% - 2px)); } }
#omBar { position: absolute; left: 0; right: 0; top: 0; padding: calc(10px + env(safe-area-inset-top)) 12px 8px; display: flex; justify-content: space-between; align-items: center; color: #fff; background: linear-gradient(rgba(0, 0, 0, 0.45), transparent); font-size: 15px; }
#omBar span b, #shBar .coins b { color: #ffd27a; }
/* 옷가게 (11-13 사장님 "구매 패널은 좀 다르게"): a shop, not the character maker — awning, fitting room, price tags, a counter */
#shop { flex-direction: column; background: #f6ead8 repeating-linear-gradient(90deg, rgba(160, 110, 60, 0.06) 0 2px, transparent 2px 28px); color: #3c2f27; padding: 0 0 env(safe-area-inset-bottom); }
#shAwning { flex: none; height: calc(18px + env(safe-area-inset-top)); background: repeating-linear-gradient(90deg, #d9534f 0 26px, #fff4e6 26px 52px); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.12); position: relative; }
#shAwning::after { content: ''; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; background: radial-gradient(circle at 13px 0, #d9534f 12px, transparent 13px) 0 0 / 52px 10px repeat-x, radial-gradient(circle at 39px 0, #fff4e6 12px, transparent 13px) 0 0 / 52px 10px repeat-x; }
#shBar { display: flex; align-items: center; gap: 8px; flex: none; padding: 16px 14px 6px; }
#shBar h2 { flex: 1; margin: 0; font-size: 20px; text-align: center; line-height: 1.1; } #shBar h2 small { display: block; font-size: 9px; letter-spacing: 2px; color: #b07a48; }
#shBar button { font-size: 13px; padding: 7px 11px; background: #fff; color: #3c2f27; border: 2px solid #e2cfb4; box-shadow: none; }
#shBar .coins { display: flex; align-items: center; gap: 5px; font-size: 15px; background: #3c2f27; color: #ffd27a; border-radius: 99px; padding: 6px 12px 6px 8px; }
.coin { display: inline-block; width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff2b0, #f2b632 55%, #c98a12); box-shadow: inset 0 0 0 1.5px #b07a12; vertical-align: -2px; margin-right: 3px; }
#shStage { position: relative; flex: none; margin: 4px 14px 0; height: 200px; display: flex; align-items: center; justify-content: center; gap: 22px; border-radius: 16px 16px 0 0; overflow: hidden;
  background: linear-gradient(#fbe3c6 0 72%, #b98552 72% 74%, #d9a66c 74%); box-shadow: inset 0 -4px 0 #a8743f; }
#shStage .curtain { position: absolute; top: 0; bottom: 26%; width: 34px; background: repeating-linear-gradient(90deg, #8e3b46 0 6px, #a64b57 6px 12px); }
#shStage .curtain.l { left: 0; border-radius: 0 0 24px 0; } #shStage .curtain.r { right: 0; border-radius: 0 0 0 24px; }
#shPreview { width: 88px; height: 176px; image-rendering: pixelated; image-rendering: crisp-edges; position: relative; z-index: 1; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.15)); }
#shStage .turn { width: 40px; height: 40px; padding: 0; font-size: 18px; background: rgba(255, 255, 255, 0.9); color: #3c2f27; border: 2px solid #e2cfb4; z-index: 1; }
#shColors { position: absolute; left: 0; right: 0; bottom: 6px; display: flex; justify-content: center; gap: 5px; z-index: 2; } #shColors[hidden] { display: none; }
.shSw { width: 30px; height: 30px; padding: 0; border-radius: 50%; background: #fff; border: 2px solid #e2cfb4; box-shadow: none; overflow: hidden; position: relative; }
.shSw i { position: absolute; left: 50%; top: 50%; width: 32px; height: 64px; margin: -50px 0 0 -16px; background-size: auto 64px; image-rendering: pixelated; }
.shSw.on { border-color: #e8743b; box-shadow: 0 0 0 2px #e8743b; } .shSw.have::after { content: '✓'; position: absolute; right: 0; bottom: -2px; font-size: 9px; color: #2e8b57; }
#shTabs { display: flex; gap: 4px; flex: none; margin: 0 14px; padding: 4px; background: #e9d6bb; border-radius: 0 0 14px 14px; }
#shTabs button { flex: 1; font-size: 14px; padding: 7px 0; background: transparent; color: #7a5a3c; box-shadow: none; border-radius: 10px; }
#shTabs button[aria-pressed="true"] { background: #fff; color: #3c2f27; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1); }
#shGrid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; align-content: start; padding: 10px 14px; }
.shCard { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 8px; background: #fff; border: 2px solid #ecdcc4; border-radius: 12px; box-shadow: 0 3px 0 #e2cfb4; color: #3c2f27; font: inherit; }
.shCard .pic { position: relative; width: 56px; height: 52px; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #b9a58c; font-size: 22px; }
.shCard .pic i { position: absolute; left: 50%; top: 50%; width: 32px; height: 64px; margin: -36px 0 0 -16px; background-size: auto 64px; image-rendering: pixelated; }
.shCard b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.shCard small { font-size: 12px; font-weight: 700; color: #b0661e; background: #fff1dc; border-radius: 99px; padding: 1px 8px; }
.shCard em { font-style: normal; font-size: 11px; color: #2e8b57; background: #e3f4e8; border-radius: 99px; padding: 1px 8px; }
.shCard.on { border-color: #e8743b; box-shadow: 0 3px 0 #c8642a; background: #fff6ee; }
#shCounter { flex: none; padding: 8px 14px 12px; background: #3c2f27; color: #fff; border-radius: 18px 18px 0 0; box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.18); }
#shCounter .row { display: flex; align-items: center; gap: 10px; } #shCounter .what { flex: 1; display: flex; flex-direction: column; }
#shCounter .what b { font-size: 16px; } #shPrice { font-size: 13px; color: #ffd27a; }
#shAct { font-size: 16px; padding: 11px 20px; background: #e8743b; color: #fff; box-shadow: 0 4px 0 #a9501f; } #shAct[disabled] { background: #6b5a4e; box-shadow: none; color: #cbbfb4; }
#shAd { display: block; width: 100%; margin: 0 0 8px; font-size: 12px; padding: 6px; background: rgba(255, 255, 255, 0.08); color: #cfe0ff; border: 1px dashed rgba(207, 224, 255, 0.5); box-shadow: none; border-radius: 10px; }
#shAd span { opacity: 0.7; margin-left: 4px; } #shAd[disabled] { opacity: 0.45; }
@media (min-width: 720px) { #shop { max-width: 560px; margin: 0 auto; box-shadow: 0 0 0 100vmax #55604f; } }
@media (max-height: 700px) { #shStage { height: 150px; } #shPreview { width: 64px; height: 128px; } }
/* in the room: the way out */
#rmOut { position: fixed; left: 12px; bottom: calc(214px + env(safe-area-inset-bottom)); z-index: 5; font-size: 13px; padding: 8px 12px; border-radius: 99px; background: #fff; color: var(--ink); border: 2px solid #e9dcc8; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15); }
#rmOut[hidden] { display: none; }
/* 11-13 사장님 "상단에는 쇼핑하고 있는 모습": the stage is now the shop floor, people wandering */
#shStage { height: auto; padding: 0; display: block; background: #3c2f27; border: 3px solid #3c2f27; border-bottom: 0; }
#shScene { display: block; width: 100%; aspect-ratio: 320 / 208; image-rendering: pixelated; image-rendering: crisp-edges; }
#shColors { position: static; display: flex; justify-content: center; gap: 6px; margin: 0 14px; padding: 6px; background: #e9d6bb; } #shColors[hidden] { display: none; }
@media (max-height: 700px) { #shStage { height: auto; } #shScene { aspect-ratio: 5 / 2; object-fit: cover; } }
.shVars { grid-column: 1 / -1; background: #3c2f27; border-radius: 12px; padding: 8px 10px 10px; color: #fff; animation: shDrop .22s ease-out; }
.shVars > span { display: block; font-size: 12px; color: #ffd27a; margin-bottom: 6px; } .shVars > div { display: flex; flex-wrap: wrap; gap: 8px; }
.shVars .shSw { width: 44px; height: 44px; border-radius: 12px; } .shVars .shSw i { margin: -44px 0 0 -16px; }
@keyframes shDrop { from { opacity: 0; transform: translateY(-6px); } }
#shTabs[hidden] { display: none; } .omPin { padding: 6px 10px 8px; } .omPin b { font-size: 14px; }
.omPin.shop { background: var(--pin, #5a8fd6); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3); } .omPin.shop::after { border-top-color: var(--pin, #5a8fd6); }
#shAwning { background: repeating-linear-gradient(90deg, var(--brand, #d9534f) 0 26px, #fff4e6 26px 52px); }
#shAwning::after { background: radial-gradient(circle at 13px 0, var(--brand, #d9534f) 12px, transparent 13px) 0 0 / 52px 10px repeat-x, radial-gradient(circle at 39px 0, #fff4e6 12px, transparent 13px) 0 0 / 52px 10px repeat-x; }
#shBar h2 #shTitle { color: var(--brand, #3c2f27); }
/* 상점가 (11-13) */
#street { position: fixed; inset: 0; display: none; background: #3b3a36; overflow: hidden; }
body.street #street { display: block; }
body.street #town, body.street #pickBar, body.street #say, body.street #start, body.street #char, body.street #mode, body.street #room, body.street #shop, body.street #outMap { display: none; }
#stWrap { position: absolute; left: 50%; top: 50%; aspect-ratio: 941 / 1672; width: min(100vw, calc(100vh * 941 / 1672)); transform: translate(-50%, -50%); container-type: inline-size; }
#stWrap img { width: 100%; height: 100%; display: block; }
#stShops { position: absolute; inset: 0; }
.stShop { position: absolute; padding: 0; background: transparent; border: 0; box-shadow: none; border-radius: 10px; cursor: pointer; }
.stShop:not(.shut):hover, .stShop:not(.shut):active { background: rgba(255, 255, 255, 0.12); outline: 3px solid var(--pin); }
.stShop.shut { background: rgba(20, 18, 24, 0.3); cursor: default; }
.stShop .shutter { position: absolute; left: 8%; right: 8%; top: 67%; bottom: 8%; background: repeating-linear-gradient(#9a9aa2 0 5px, #7d7d86 5px 7px); border-radius: 3px; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3); }
.stShop em { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); white-space: nowrap; font-style: normal; font-size: max(10px, 2.6cqw); color: #fff; background: rgba(0, 0, 0, 0.6); border-radius: 99px; padding: 3px 9px; }
.stSign { position: absolute; transform: translate(-50%, -50%); text-align: center; line-height: 1; display: flex; align-items: center; justify-content: center; height: 4cqw; font-weight: 700; font-size: max(11px, 3.9cqw); color: var(--pin); text-shadow: 0 1px 0 #fff; pointer-events: none; white-space: nowrap; letter-spacing: 0.5px; }
.stSign.off { color: #6d6a70; opacity: 0.8; } .stSign.neon:not(.off) { color: #fff; text-shadow: 0 0 6px #ff4fa0, 0 0 2px #ff4fa0; }
.stGate { position: absolute; left: 50%; top: 88.4%; transform: translate(-50%, -50%); font-weight: 700; font-size: max(12px, 4.4cqw); color: #8a5a2b; pointer-events: none; }
#stBar { position: absolute; left: 0; right: 0; top: 0; padding: calc(10px + env(safe-area-inset-top)) 12px 8px; display: flex; justify-content: space-between; align-items: center; color: #fff; background: linear-gradient(rgba(0, 0, 0, 0.5), transparent); font-size: 15px; }
#stBar button { font-size: 13px; padding: 7px 11px; background: rgba(255, 255, 255, 0.92); color: #3c2f27; border: 0; box-shadow: none; } #stBar span b { color: #ffd27a; }
.omPin.street { background: #d6467a; box-shadow: 0 4px 0 #9c2c56; } .omPin.street::after { border-top-color: #d6467a; }
#street #stWrap:not(.cityHost) { inset: auto; left: 50%; top: 50%; aspect-ratio: 941 / 1672; width: min(100vw, calc(100vh * 941 / 1672)); height: auto; transform: translate(-50%, -50%); } /* (the picture street: city.css makes the box full screen for the tile districts) */
#street #stWrap:not(.cityHost) #stShops { display: block; }
.omPin.street.sonchon { background: #8e5bc6; box-shadow: 0 4px 0 #5f3a8a; } .omPin.street.sonchon::after { border-top-color: #8e5bc6; }
.omPin.soon { background: rgba(60, 56, 64, 0.82); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35); animation: none; padding: 4px 9px 6px; } .omPin.soon::after { border-top-color: rgba(60, 56, 64, 0.82); }
.omPin.soon b { font-size: 12px; } .omPin.soon small { font-size: 10px; opacity: 0.8; } .omPin.locked { opacity: 0.85; }
.omSpot { position: absolute; padding: 0; background: transparent; border: 0; box-shadow: none; border-radius: 16px; } .omSpot:active { background: rgba(255, 255, 255, 0.18); }
/* 이벤트 컷: 마을을 바라보는 나 (11-13) */
#evTown { position: fixed; inset: 0; z-index: 60; background: #1b1714; overflow: hidden; cursor: pointer; }
#evTown .evBg { position: absolute; inset: 0; background: url(art/ev_town.webp) 38% 100% / cover; animation: evPan 9s ease-out forwards; image-rendering: pixelated; } /* (사장님 그림: 원룸촌 골목, 해 질 녘) */
@keyframes evPan { from { transform: scale(1.1); } to { transform: scale(1); } }
#evTown .evMe { position: absolute; left: 50%; bottom: calc(108px + env(safe-area-inset-bottom)); width: 72px; height: 144px; transform: translateX(-50%); image-rendering: pixelated; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.25)); }
#evTown::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.45)); pointer-events: none; }
#evTown .evTalk { position: absolute; left: 12px; right: 12px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 2; background: #fff8ec; color: #3c2f27; border-radius: 16px; padding: 12px 16px 14px; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.3); min-height: 70px; }
#evTown .evTalk b { display: inline-block; font-size: 13px; color: #fff; background: #e8743b; border-radius: 99px; padding: 2px 10px; margin-bottom: 6px; } #evTown .evTalk p { margin: 0; font-size: 17px; }
#evTown .evTalk i { position: absolute; right: 14px; bottom: 8px; font-style: normal; font-size: 12px; color: #c8642a; animation: omBob 1s infinite; } #evTown .evTalk[hidden] { display: none; }
#evTown .evNote { position: absolute; left: 50%; top: 42%; z-index: 3; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 10px; background: #3c2f27; color: #fff; padding: 14px 22px; border-radius: 16px; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.35); animation: evPop .4s cubic-bezier(.2, 1.6, .4, 1); white-space: nowrap; }
#evTown .evNote span { font-size: 26px; } #evTown .evNote b { font-size: 17px; color: #ffd27a; }
@keyframes evPop { from { transform: translate(-50%, -50%) scale(.4); opacity: 0; } }
#rmMsg { position: fixed; left: 12px; bottom: calc(262px + env(safe-area-inset-bottom)); z-index: 5; font-size: 13px; padding: 8px 12px; border-radius: 99px; background: #fff; color: var(--ink); border: 2px solid #e9dcc8; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15); }
#rmMsg[hidden] { display: none; }
/* 메신저 (11-13): 이모티콘만 — 작은 폰 (사장님 "너무 크게 날아와. 풍선으로 핸드폰 흔들흔들") */
#rmMsg { width: 46px; height: 46px; padding: 0; font-size: 24px; border-radius: 14px; bottom: calc(266px + env(safe-area-inset-bottom)); }
#rmMsg i { position: absolute; right: -10px; top: -14px; font-style: normal; font-size: 18px; background: #fff; border: 2px solid #e9dcc8; border-radius: 12px 12px 12px 2px; padding: 0 3px; line-height: 1.2; animation: mgPop 1.6s ease-in-out infinite; }
#rmMsg.ring { animation: mgRing 1.4s ease-in-out infinite; border-color: #e8743b; }
@keyframes mgRing { 0%, 55%, 100% { transform: rotate(0); } 60% { transform: rotate(-14deg); } 66% { transform: rotate(12deg); } 72% { transform: rotate(-10deg); } 78% { transform: rotate(8deg); } 84% { transform: rotate(-4deg); } }
@keyframes mgPop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
#msgr { position: fixed; left: 12px; bottom: calc(320px + env(safe-area-inset-bottom)); width: min(250px, calc(100% - 24px)); height: min(360px, 50vh); z-index: 45; background: #fff8ec; border: 6px solid #3c2f27; border-radius: 26px; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35); display: flex; flex-direction: column; padding: 10px 10px 12px; color: #3c2f27; transform-origin: 0% 100%; animation: mgUp .2s ease-out; }
#msgr::before { content: ''; position: absolute; top: -1px; left: 50%; width: 46px; height: 7px; margin-left: -23px; background: #3c2f27; border-radius: 0 0 8px 8px; } /* (the phone's notch) */
@keyframes mgUp { from { transform: scale(.4); opacity: 0; } }
#msgr .mgHead { display: flex; align-items: center; gap: 6px; flex: none; padding-top: 4px; } #msgr .mgHead b { flex: 1; font-size: 14px; }
#msgr .mgHead button { font-size: 11px; padding: 4px 8px; background: #f1e6d3; color: #3c2f27; box-shadow: none; }
#msgr canvas { width: 24px; height: 30px; image-rendering: pixelated; background: #f6e2c8; border-radius: 6px; flex: none; }
#msgr .mgTip { font-size: 10px; color: #8a7a6c; margin: 6px 0; background: #f6ecdc; border-radius: 8px; padding: 5px 7px; }
#msgr .mgList { overflow-y: auto; display: flex; flex-direction: column; gap: 5px; }
#msgr .mgRow { display: flex; align-items: center; gap: 8px; text-align: left; padding: 6px 8px; background: #fff; border: 2px solid #ecdcc4; border-radius: 10px; box-shadow: none; color: #3c2f27; font: inherit; }
#msgr .mgRow span { flex: 1; display: flex; flex-direction: column; min-width: 0; } #msgr .mgRow b { font-size: 13px; } #msgr .mgRow small { font-size: 12px; color: #8a7a6c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#msgr .mgRow i { font-style: normal; background: #e04a3a; color: #fff; border-radius: 99px; padding: 0 6px; font-size: 11px; }
#msgr .mgLog { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 8px 2px; }
#msgr .mgB { display: flex; } #msgr .mgB.me { justify-content: flex-end; }
#msgr .mgB span { font-size: 22px; line-height: 1; padding: 5px 8px; border-radius: 12px; background: #fff; border: 2px solid #ecdcc4; }
#msgr .mgB.me span { background: #ffe1c7; border-color: #f2b98a; }
#msgr .mgEmpty { text-align: center; color: #a89a88; font-size: 12px; margin-top: 20px; }
#msgr .mgPad { flex: none; display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; padding-top: 6px; border-top: 2px dashed #ecdcc4; }
#msgr .mgPad button { font-size: 16px; padding: 3px 0; background: #fff; border: 1px solid #ecdcc4; box-shadow: none; border-radius: 7px; }
#msgr .mgCount { font-size: 10px; color: #8a7a6c; } #msgr .mgFind { flex: none; margin: 6px 0; font: inherit; font-size: 12px; padding: 6px 9px; border: 2px solid #ecdcc4; border-radius: 10px; background: #fff; color: #3c2f27; }
#msgr .mgRow { cursor: pointer; } #msgr .mgStar { flex: none; padding: 0 2px; background: none; border: 0; box-shadow: none; font-size: 16px; color: #c9b9a6; } #msgr .mgStar.on { color: #f2b632; }
#msgr .mgList { flex: 1; min-height: 0; } #msgr .mgTip { flex: none; margin: 6px 0 0; text-align: center; }
#msgr .mgCode { flex: none; display: flex; align-items: center; gap: 5px; font-size: 11px; color: #8a7a6c; margin-top: 6px; } #msgr .mgCode b { color: #3c2f27; letter-spacing: 1px; flex: 1; }
#msgr .mgCode button, #msgr .mgAddRow button, #msgr .mgReq button { font-size: 11px; padding: 4px 8px; box-shadow: none; background: #e8743b; color: #fff; }
#msgr .mgAddRow { flex: none; display: flex; gap: 4px; margin-top: 5px; } #msgr .mgAddRow input { flex: 1; min-width: 0; font: inherit; font-size: 12px; padding: 5px 7px; border: 2px solid #ecdcc4; border-radius: 8px; text-transform: uppercase; }
#msgr .mgReq { flex: none; display: flex; align-items: center; gap: 4px; margin-top: 5px; font-size: 11px; background: #fff1dc; border-radius: 8px; padding: 5px 7px; } #msgr .mgReq span { flex: 1; } #msgr .mgReq button[data-no] { background: #b9a58c; }
#rmOut.new { animation: mgRing 1.4s ease-in-out 3; border-color: #e8743b; }
.omPin { transform-origin: 50% 100%; transition: transform .12s ease-out; animation-duration: 2.4s; }
.omPin:active { transform: translate(-50%, -100%) scale(.9); animation: none; transition-duration: .06s; } /* (사장님 11-13 "누를 때 위치가 과하게 내려가": the common button press moved the pin off its spot) */
#stWrap .stWalk { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; image-rendering: pixelated; } /* (people walking the street) */

.stGate.plate { background: linear-gradient(#fff8e6, #f3e2b8); border: 2px solid #c99a2e; border-radius: 6px; padding: 0.4cqw 2.2cqw; line-height: 1.1; font-size: max(11px, 3.4cqw); color: #7a4e14; box-shadow: 0 2px 0 #8a6416; } /* (팡구통 gate: no painted plaque, so a little gold plate under the crest — 사장님 11-13) */

/* 내 방 사진 (사장님 11-13 홍보) */
#rmShot { position: fixed; left: 12px; bottom: calc(318px + env(safe-area-inset-bottom)); z-index: 5; width: 46px; height: 46px; padding: 0; font-size: 22px; border-radius: 14px; background: #fff; color: var(--ink); border: 2px solid #e9dcc8; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15); }
#rmShot[hidden] { display: none; }
#shotBox { position: fixed; inset: 0; z-index: 60; background: rgba(30, 22, 16, 0.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
#shotBox .shotCard { background: #fff6e8; border-radius: 16px; padding: 14px; width: min(420px, 100%); max-height: 92vh; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.2); }
#shotBox img { width: 100%; max-height: 64vh; object-fit: contain; image-rendering: pixelated; border-radius: 8px; background: #fff; }
#shotBox .shotBtns { display: flex; gap: 8px; } #shotBox .shotBtns > * { flex: 1; text-align: center; padding: 10px 0; border-radius: 12px; font: inherit; font-weight: 700; text-decoration: none; border: 2px solid #e9dcc8; background: #fff; color: var(--ink); }
#shotBox .shotShare, #shotBox .shotSave { background: #e8743b; border-color: #e8743b; color: #fff; }