/* 꾸미기(10/29 대형 업데이트): 무대 유세차 · 테두리 · 당선 도장·연출 · 카드 테마 · 상점 */
/* 유세차: 선거 있는 해 유세장에서 짐칸에 선다(점 하나 = 무대 캐릭터와 같은 4px, 폰 3px) */
.stage-panel { --cell: 4px; }
@media (max-width: 760px) { .stage-panel { --cell: 3px; } }
.cos-truck-at { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); z-index: 3; line-height: 0; pointer-events: none; }   /* 짐칸 옆판이 다리를 가린다(짐칸에 선 모습) */
.cos-truck { display: block; width: calc(46 * var(--cell, 4px)); height: auto; image-rendering: pixelated; }
.stage-panel.has-truck .actor { bottom: calc(2px + 13 * var(--cell)); margin-left: calc(7 * var(--cell)); }
/* 테두리: 무대·장면 상자를 덮는 캔버스(점 3px). 둥근 모서리를 펴고, 장소 딱지는 테두리 안쪽으로 */
canvas.cos-fr { position: absolute; z-index: 6; pointer-events: none; image-rendering: pixelated; }
.stage-panel.cosfr, .e-scene.cosfr { border-radius: 4px; overflow: visible; clip-path: inset(calc(-1 * var(--frx, 0px)) 0 round 4px); }   /* 위·아래 띠는 상자 바깥(js/cos-frame.js), 양옆은 그대로 자른다 */
.stage-panel.cosfr { margin-block: var(--frx, 0px); }
.e-scene.cosfr { margin-top: calc(var(--frx, 0px) - 2px); margin-bottom: calc(14px + var(--frx, 0px)); }
.stage-panel.cosfr .st-loc { left: 26px; }
.e-scene.cosfr .sticker, .e-scene.cosfr .e-tag { margin-left: 12px; }
.e-scene.cosfr .e-stamp { right: 26px; }
/* 프로필: 아바타 안쪽 테두리(점 2px)와 이름 명패 */
.profile .avatar.px.cosfr { border-radius: 4px; }
.profile .p-name.cosfr { position: relative; display: inline-block; padding: 3px 12px 7px; isolation: isolate; }   /* 한글은 글줄 안에서 아래로 앉아 위를 덜 비운다 */
.profile .p-name.cosfr > canvas.cos-fr { z-index: -1; }
/* 당선 도장 잉크(개표 결과 .r-scene): 원래 도장 그림을 가면(mask)으로 써서 잉크만 바꾼다 */
.r-stamp.cos-hid { visibility: hidden; }
.cos-stampw { position: absolute; right: 16px; top: 14px; width: 146px; height: 146px; z-index: 3; transform: rotate(-12deg); animation: stampSlam .55s var(--spring, ease-out) .25s backwards; pointer-events: none; }
.cos-stampw > i { position: absolute; inset: 0; -webkit-mask: var(--stamp) center / contain no-repeat; mask: var(--stamp) center / contain no-repeat; }
.cos-shine { background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.95) 50%, transparent 60%) 0 0 / 260% 100% no-repeat; animation: cosShine 2.4s ease-in-out 1s infinite; }
.st-gold { filter: drop-shadow(1px 0 0 #2A1604) drop-shadow(-1px 0 0 #2A1604) drop-shadow(0 1px 0 #2A1604) drop-shadow(0 -1px 0 #2A1604) drop-shadow(0 3px 0 #5A3A08) drop-shadow(0 0 8px rgba(255,236,160,.95)); }
.st-gold .cos-ink { background: linear-gradient(135deg, #6A4208 0%, #FFE58A 22%, #B07818 40%, #FFF6C4 58%, #9A6610 78%, #FFD45A 100%); }
.st-neon { filter: drop-shadow(0 0 3px #FF3FD8) drop-shadow(0 0 12px #FF3FD8); animation: stampSlam .55s var(--spring, ease-out) .25s backwards, cosFlick 3.2s steps(1) 1s infinite; }
.st-neon .cos-ink { background: #FFD6F6; } .st-neon .cos-shine { display: none; }
.st-holo { filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 12px rgba(181,140,255,.9)); }
.st-holo .cos-ink { background: linear-gradient(120deg, #FF5FA2, #FFD45A, #5FE3FF, #9B6BFF, #FF5FA2, #FFD45A) 0 0 / 300% 300%; animation: cosHolo 3s linear infinite; }
.cos-winfx { position: absolute; left: 0; top: 0; z-index: 5; image-rendering: pixelated; pointer-events: none; }
@keyframes cosShine { 0% { background-position: 120% 0; } 55%, 100% { background-position: -40% 0; } }
@keyframes cosFlick { 0%, 86%, 90%, 100% { opacity: 1; } 88% { opacity: .45; } }
@keyframes cosHolo { to { background-position: 300% 300%; } }
@media (prefers-reduced-motion: reduce) { .cos-stampw, .cos-shine, .st-holo .cos-ink { animation: none !important; } }
/* 위쪽 바 입구(설정 왼쪽) · 타이틀 가게 아이콘 */
.cos-topbtn { position: relative; }
.cos-dot { position: absolute; right: 0; top: 0; width: 9px; height: 9px; border-radius: 50%; background: #E2452B; box-shadow: 0 0 0 2px var(--dark, #151515); }
.cos-dot[hidden] { display: none; }
.title-screen > button.cos-stall.cos-stall { position: relative; z-index: 4; grid-area: cast; justify-self: end; align-self: end; margin-bottom: 8px; justify-items: center; }   /* 폰: 세 사람과 같은 줄 오른쪽 끝(메뉴 바로 위). 떠 있는 자리(top 27%)는 메뉴가 길거나 화면이 낮으면 '새 인생 시작'에 겹쳤다 */
.cos-stall { z-index: 4; display: grid; justify-items: center; gap: 2px; background: none; border: 0; padding: 0; cursor: pointer; animation: cosBob 1.2s steps(2) infinite; }
.cos-stall canvas { width: 66px; height: 60px; image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(0,0,0,.35)); }
.cos-stall .lbl { font: var(--hw) 13px var(--head); color: #fff; background: #2A211E; padding: 3px 8px 2px; border-radius: 6px; box-shadow: 2px 2px 0 rgba(0,0,0,.3); }
.cos-stall .cos-dot { right: 4px; top: 0; box-shadow: 0 0 0 2px #fff; }
@keyframes cosBob { 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .cos-stall { animation: none; } }
@media (max-width: 820px) { .title-screen > .cos-stall .lbl { max-width: 84px; line-height: 1.15; text-align: center; word-break: keep-all; overflow-wrap: normal; } }   /* 폰: 'Cosmetics Shop'처럼 긴 이름은 두 줄로(셋째 사람과 겹치지 않게) */
/* 상점 */
.cos-fundbar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 8px; padding: 10px 12px; border-radius: 12px; background: #2A211E; color: #FFF6DE; }
.cos-fundbar b { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; } .cos-fundbar small { font-size: 12px; opacity: .85; }
.cos-fundbar svg { width: 15px; height: 15px; }
.cos-webnote { margin: 0 0 8px; font-size: 12.5px; color: var(--muted); }
.cos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 8px; }
.cos-prod { display: grid; grid-template-rows: auto 1fr; border-radius: 14px; overflow: hidden; background: var(--card); border: 2px solid var(--gc); min-width: 0; }
.cos-prod.own { opacity: .92; }
.cos-thumb { position: relative; line-height: 0; background: #2A2A35; }
.cos-th { display: block; width: 100%; height: auto; aspect-ratio: 32 / 22; image-rendering: pixelated; }
.cos-frprev { aspect-ratio: 300 / 170; }
.cos-grade, .cos-rib { position: absolute; top: 6px; line-height: 1.4; font: 800 11px var(--body); color: #fff; padding: 2px 8px; border-radius: 999px; box-shadow: 0 2px 0 rgba(0,0,0,.2); }
.cos-grade { left: 6px; background: var(--gc); } .cos-rib { right: 6px; background: #D94F3D; }
.cos-body { display: grid; gap: 5px; align-content: start; padding: 9px 10px 10px; min-width: 0; }
.cos-n { font-size: 14px; } .cos-d { font-size: 12px; color: var(--muted); line-height: 1.35; }
.cos-prices { display: flex; flex-wrap: wrap; gap: 5px; }
.cos-prices button { font: 800 12.5px var(--body); border-radius: 9px; padding: 6px 9px; cursor: pointer; border: 1.5px solid var(--ink); background: var(--card); color: var(--ink); }
.cos-prices .cos-won { background: var(--ink); color: var(--paper, #FFF8EC); } .cos-worth { flex-basis: 100%; font-size: 11.5px; color: var(--muted); }
.cos-app, .cos-ach, .cos-owned { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); } .cos-owned { color: var(--good); font-weight: 800; }
.cos-ach svg, .cos-owned svg { width: 13px; height: 13px; }
.cos-try { justify-self: start; font: 600 12px var(--body); color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.cos-sws { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cos-sw { width: 22px; height: 22px; border-radius: 50%; padding: 0; cursor: pointer; background: var(--c); border: 2px solid var(--card); box-shadow: 0 0 0 1.5px var(--line); }
.cos-sw[aria-pressed="true"] { box-shadow: 0 0 0 2.5px var(--ink); } .cos-swn { font-size: 12px; color: var(--muted); }
.r-scene.cos-winprev { height: auto; aspect-ratio: 32 / 22; margin: 0; border-radius: 0; box-shadow: none; }
.r-scene.cos-winprev .r-stamp, .r-scene.cos-winprev .cos-stampw { width: 46%; height: auto; aspect-ratio: 1; right: 6%; top: 6%; }
.cos-foot { margin: 10px 0 0; text-align: center; } .cos-foot button { background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font: inherit; font-size: 13px; }
.cos-mine h4 { margin: 12px 0 6px; font-size: 13px; color: var(--muted); } .cos-mine h4 small { font-weight: 400; }
.cos-mine-stage { display: grid; place-items: center; padding: 10px 0 4px; background: var(--soft); border-radius: 12px; }
.cos-chip[aria-pressed="true"] { outline: 2.5px solid var(--acc, #E8553E); }
.cos-tryscene { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 16px; padding: 12px 0; background: var(--soft); border-radius: 12px; }
.cos-trytruck { position: relative; --cell: 3px; width: calc(46 * var(--cell)); height: calc(30 * var(--cell) + 60px); }
.cos-trytruck .cos-truck-at { bottom: 0; } .cos-trytruck .actor { position: absolute; left: 50%; bottom: calc(13 * var(--cell)); width: 72px; transform: translateX(-50%); margin-left: calc(7 * var(--cell)); z-index: 2; line-height: 0; }
.cos-end p { margin: 0 0 8px; } .cos-end small { color: var(--muted); } .cos-gift { font-size: 13px; }
@media (max-width: 420px) { .cos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .cos-prices button { padding: 5px 7px; font-size: 12px; } }
.cos-panes .pane-tabs { flex-wrap: wrap; row-gap: 2px; }   /* 영어·일본어 탭 이름이 길어도 줄을 바꿔 다 보이게 */
.cos-prevbox { display: grid; gap: 8px; } .cos-prevh { margin: 6px 0 0; font-size: 12.5px; font-weight: 800; color: var(--muted); }
.cos-prevbox .e-scene { margin: var(--frx, 0px) 0; }   /* 테두리 위·아래 띠 자리 */
.profile.cos-prevprof { margin: 0; }
/* 도전 목록의 보상 줄(달성 전용 꾸미기) */
.chal-rew { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 4px; font-size: 12px; color: var(--muted); }
.chal-rew i { width: 8px; height: 8px; border-radius: 50%; background: var(--gc); }
.chal-rew b { color: var(--ink); } .chal-rew em { font-style: normal; font-size: 10.5px; font-weight: 800; color: #fff; background: var(--gc); padding: 0 6px; border-radius: 999px; }
.chal-rew button { font: 600 12px var(--body); color: var(--muted); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.cos-prevbox > * { order: 0 !important; }   /* 게임 화면의 .stage-panel·.profile 배치 순서(order)를 미리보기에선 쓰지 않는다 */
@media (min-width: 821px) {   /* PC: 메뉴가 오른쪽 칸이라 오른쪽 위에 두면 메뉴와 겹친다(노트북 높이) → 왼쪽 아래 세 사람 옆, 골목 가게처럼 */
  .title-screen > button.cos-stall.cos-stall { position: absolute; grid-area: auto; margin: 0; top: auto; right: auto; left: calc(clamp(16px, 5vw, 72px) + 300px); bottom: 46px; justify-items: center; }
}
/* 제1대 국새 인주(한정, js/asm-event.js): 짙은 주홍 인주에 금 테두리 */
.st-seal { filter: drop-shadow(1px 0 0 #F2C744) drop-shadow(-1px 0 0 #F2C744) drop-shadow(0 1px 0 #F2C744) drop-shadow(0 -1px 0 #F2C744) drop-shadow(0 0 9px rgba(242,199,68,.75)); }
.st-seal .cos-ink { background: radial-gradient(circle at 32% 28%, #FF7A55 0%, #D2231A 38%, #8E0E14 78%, #5A0710 100%); }