@font-face { font-family: 'Nanum Pen Script'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/nanum/nanum-pen-script-korean-400-normal.woff2) format('woff2'); unicode-range: U+1100-11FF, U+3000-303F, U+3130-318F, U+A960-A97F, U+AC00-D7AF, U+D7B0-D7FF, U+FF00-FFEF; }
@font-face { font-family: 'Nanum Pen Script'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/nanum/nanum-pen-script-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+2190-21FF, U+2600-27BF; }

:root {
  --panel: rgba(17, 21, 36, 0.62);
  --panel-strong: rgba(17, 21, 36, 0.78);
  --line: rgba(255, 255, 255, 0.13);
  --line-strong: rgba(255, 255, 255, 0.24);
  --text: #f4f0ea;
  --muted: rgba(244, 240, 234, 0.62);
  --faint: rgba(244, 240, 234, 0.4);
  --pink: #f6ddd8;
  --pink-ink: #2b1f25;
  --gold: #ffd79a;
  --green: #4ade80;
  --radius: 20px;
  --blur: blur(18px) saturate(140%);
  font-family: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b1222; color: var(--text); -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }

#app { position: fixed; inset: 0; user-select: none; -webkit-user-select: none; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
#scene.can-pick { cursor: pointer; }
#scene.dragging { cursor: grabbing; }
.vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(4, 8, 20, 0.5) 100%); }
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity .5s ease; }
.flash.on { opacity: .85; transition: none; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ---------- left wish panel ---------- */
.wish-panel {
  position: absolute; left: 3.1vw; top: 4vh; width: 308px; padding: 28px 18px 18px;
  border-radius: var(--radius); transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .35s;
}
.wish-panel.folded { transform: translateX(-120%); opacity: 0; pointer-events: none; }
.wish-panel h2 { margin: 0 0 8px; padding-left: 2px; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
.wish-panel .sub { margin: 0 0 22px; padding-left: 2px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.panel-fold { position: absolute; top: 16px; right: 14px; width: 30px; height: 30px; border-radius: 50%; color: var(--faint); display: grid; place-items: center; }
.panel-fold:hover { color: var(--text); background: rgba(255,255,255,.07); }
.panel-fold svg { width: 18px; height: 18px; }
.panel-open { position: absolute; left: 3.1vw; top: 4vh; display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); font-weight: 600; font-size: 14px; }
.panel-open svg { width: 18px; height: 18px; color: var(--gold); }

.orn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
.orn {
  position: relative; aspect-ratio: 1; border-radius: 14px;
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden;
  transition: border-color .2s, background .2s, transform .15s, box-shadow .2s;
}
.orn img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 0 10px rgba(255, 196, 120, .25)); }
.orn .lbl { position: absolute; bottom: 5px; left: 0; right: 0; font-size: 10.5px; color: var(--faint); text-align: center; opacity: 0; transition: opacity .2s; }
.orn:hover { border-color: var(--line-strong); background: rgba(255,255,255,.07); }
.orn:hover .lbl, .orn.active .lbl { opacity: 1; }
.orn:active { transform: scale(.96); }
.orn.active { border-color: rgba(255, 215, 154, .75); background: radial-gradient(circle at 50% 45%, rgba(255, 200, 120, .16), rgba(255,255,255,.03) 70%); box-shadow: 0 0 0 1px rgba(255,215,154,.25), 0 0 22px rgba(255, 190, 100, .18); }
.orn:focus-visible, button:focus-visible, textarea:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.field { position: relative; margin-bottom: 16px; }
.field textarea {
  width: 100%; height: 82px; resize: none; padding: 16px 16px 26px; border-radius: 14px;
  background: rgba(255,255,255,.035); border: 1px solid var(--line); color: var(--text); font-size: 15px; line-height: 1.45;
  user-select: text; -webkit-user-select: text;
}
.field textarea::placeholder { color: var(--faint); }
.field textarea:focus { outline: none; border-color: rgba(255,215,154,.55); background: rgba(255,255,255,.06); }
.field .count { position: absolute; right: 14px; bottom: 10px; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.field .count.full { color: #ffb4a8; }
.field textarea.bad { border-color: rgba(255,150,130,.6); }
.wish-warn { margin: -8px 2px 14px; padding: 9px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.5; color: #ffd2c8; background: rgba(255,120,100,.12); border: 1px solid rgba(255,140,120,.25); }
.wish-warn.care { color: #e8f0ff; background: rgba(140,170,255,.13); border-color: rgba(160,190,255,.3); }
.wish-warn[hidden] { display: none; }
#hangBtn:disabled { opacity: .45; cursor: not-allowed; }

.btn-primary {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 50px;
  border-radius: 14px; background: var(--pink); color: var(--pink-ink); font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
  box-shadow: 0 8px 26px rgba(246, 200, 196, .22), inset 0 -2px 0 rgba(0,0,0,.06);
  transition: transform .15s, filter .2s; text-decoration: none;
}
.btn-primary:hover { filter: brightness(1.04); }
.btn-primary:active { transform: translateY(1px) scale(.99); }
.btn-primary:disabled { filter: grayscale(.4) brightness(.8); cursor: default; }
.btn-primary svg { width: 20px; height: 20px; stroke-width: 1.8; }
.btn-primary.sm { height: 42px; font-size: 14.5px; width: auto; padding: 0 18px; }
.btn-ghost { height: 42px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.04); font-size: 14px; font-weight: 600; color: var(--text); }
.btn-ghost:hover { background: rgba(255,255,255,.09); }
.btn-ghost.sm { height: 34px; font-size: 13px; padding: 0 12px; border-radius: 10px; }

/* ---------- preview card ---------- */
.preview-card {
  position: absolute; right: 3vw; top: 3.3vh; width: 352px; height: 408px; margin: 0;
  border-radius: 22px; overflow: hidden; border: 1.5px solid rgba(255,255,255,.75);
  box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.2); background: #0c1812;
  transition: opacity .35s, transform .35s;
}
.preview-card canvas { width: 100%; height: 100%; display: block; }
.preview-chip { position: absolute; left: 14px; top: 14px; padding: 6px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(10,14,24,.55); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: rgba(255,245,230,.9); }
.preview-foot { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 10px 10px 14px; border-radius: 14px; background: rgba(10,14,24,.6); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.preview-foot strong { display: block; font-size: 14px; }
.preview-foot small { font-size: 12px; color: var(--muted); }
.pv-nav { display: flex; gap: 6px; }
.pv-nav button { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.08); font-size: 20px; line-height: 1; }
.pv-nav button:hover { background: rgba(255,255,255,.16); }

/* ---------- adjust panel ---------- */
.adjust-panel { position: absolute; right: 3vw; top: calc(3.3vh + 408px + 26px); width: 270px; padding: 16px 16px 14px; border-radius: 18px; }
.adj-labels, .adj-row { display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; }
.adj-labels { grid-template-columns: 52px 1fr 1fr 52px; text-align: center; font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }
.adj-row { gap: 6px; }
.adj-rot { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; justify-self: center; background: rgba(255,255,255,.04); }
.adj-rot:hover { background: rgba(255,255,255,.1); }
.adj-rot svg { width: 20px; height: 20px; }
.adj-pad { position: relative; height: 96px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.05); display: grid; place-items: center; }
.adj-pad img { width: 70px; height: 70px; object-fit: contain; pointer-events: none; }
.pad { position: absolute; width: 24px; height: 24px; border-radius: 7px; color: var(--text); font-size: 18px; line-height: 22px; text-align: center; background: rgba(255,255,255,.07); }
.pad:hover { background: rgba(255,255,255,.18); }
.pad.l { left: 6px; top: 36px; } .pad.r { right: 6px; top: 36px; }
.pad.u { top: 4px; left: calc(50% - 12px); transform: rotate(90deg); } .pad.d { bottom: 4px; left: calc(50% - 12px); transform: rotate(-90deg); }
.adj-size { height: 96px; display: grid; place-items: center; }
.adj-size input { -webkit-appearance: none; appearance: none; width: 86px; height: 4px; transform: rotate(-90deg); background: rgba(255,255,255,.22); border-radius: 4px; }
.adj-size input::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.18); cursor: pointer; }
.adj-size input::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 0; }
.adj-hint { margin: 10px 0 12px; font-size: 12px; color: var(--faint); text-align: center; }
.adj-actions { display: flex; gap: 8px; }
.adj-actions .btn-ghost { flex: 0 0 auto; }
.adj-actions .btn-primary { flex: 1; }

/* ---------- me card ---------- */
.me-card { position: absolute; left: 2.8vw; bottom: 2.6vh; width: 274px; height: 66px; border-radius: 999px; display: flex; align-items: center; gap: 12px; padding: 0 20px 0 10px; }
.me-card img { width: 50px; height: 50px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.18), rgba(255,255,255,.03)); }
.me-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#meName { font-size: 15px; font-weight: 600; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
#meName:hover { text-decoration: underline dotted rgba(255,255,255,.4); text-underline-offset: 4px; }
.me-text input { width: 170px; padding: 3px 8px; border-radius: 8px; border: 1px solid var(--line-strong); background: rgba(0,0,0,.25); font-size: 14px; user-select: text; }
.me-online { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.me-online i { width: 7px; height: 7px; border-radius: 50%; background: #9aa3b5; box-shadow: 0 0 0 3px rgba(154,163,181,.15); }
.me-online i.on { background: var(--green); box-shadow: 0 0 0 3px rgba(74,222,128,.18), 0 0 8px rgba(74,222,128,.6); }
.me-online i.local { background: #fbbf24; box-shadow: 0 0 0 3px rgba(251,191,36,.18); }

/* ---------- dock ---------- */
.dock { position: absolute; left: 50%; bottom: 2.1vh; transform: translateX(-50%); display: flex; align-items: stretch; height: 64px; border-radius: 999px; padding: 4px 6px; }
.dock button { position: relative; width: 116px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: rgba(244,240,234,.82); border-radius: 999px; transition: background .2s, color .2s; }
.dock button + button::before { content: ''; position: absolute; left: 0; top: 16px; bottom: 16px; width: 1px; background: var(--line); }
.dock button span { font-size: 12px; font-weight: 500; }
.dock button:hover { color: #fff; background: rgba(255,255,255,.06); }
.dock button.active { color: #fff; }
.dock button.active svg { color: var(--gold); filter: drop-shadow(0 0 6px rgba(255, 215, 154, .6)); }

/* ---------- corner ---------- */
.corner { position: absolute; right: 2.4vw; bottom: 2.6vh; display: flex; gap: 10px; }
.pill { display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 30px 0 22px; border-radius: 999px; font-size: 16px; font-weight: 500; }
.pill svg { width: 22px; height: 22px; }
.round { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; }
.pill:hover, .round:hover { background: var(--panel-strong); }

/* ---------- drawer ---------- */
.drawer { position: absolute; left: 50%; bottom: calc(2.1vh + 76px); transform: translateX(-50%); width: min(460px, 92vw); max-height: 52vh; border-radius: 20px; display: flex; flex-direction: column; overflow: hidden; animation: rise .3s cubic-bezier(.2,.8,.2,1); }
.drawer header { display: flex; justify-content: space-between; align-items: center; padding: 16px 16px 12px 20px; border-bottom: 1px solid var(--line); }
.drawer h3 { margin: 0; font-size: 16px; }
.drawer header small { color: var(--muted); font-size: 12.5px; }
.drawer-actions { display: flex; gap: 8px; align-items: center; }
.drawer .x { width: 32px; height: 32px; border-radius: 50%; color: var(--muted); }
.drawer .x:hover { background: rgba(255,255,255,.08); color: var(--text); }
.drawer ul { list-style: none; margin: 0; padding: 8px; overflow: auto; }
.drawer li { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 14px; cursor: pointer; }
.drawer li:hover { background: rgba(255,255,255,.06); }
.drawer li img { width: 44px; height: 44px; flex: none; border-radius: 12px; background: rgba(255,255,255,.04); }
.drawer li p { margin: 0 0 3px; font-family: 'Nanum Pen Script', var(--font); font-size: 22px; line-height: 1.05; color: #fff3df; word-break: keep-all; overflow-wrap: anywhere; }
.drawer li small { color: var(--faint); font-size: 12px; }
.drawer .empty { padding: 30px; text-align: center; color: var(--muted); line-height: 1.6; margin: 0; }

/* ---------- photo modal ---------- */
.modal { position: absolute; inset: 0; display: grid; place-items: center; z-index: 20; }
.modal-bg { position: absolute; inset: 0; background: rgba(4,8,18,.6); }
.photo-box { position: relative; width: min(760px, 92vw); padding: 14px; border-radius: 22px; animation: rise .3s cubic-bezier(.2,.8,.2,1); }
.photo-box img { width: 100%; display: block; border-radius: 14px; }
.photo-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* ---------- small things ---------- */
.placing-banner { position: absolute; left: 50%; top: 3.6vh; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: 999px; background: rgba(17,21,36,.7); border: 1px solid var(--line); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); font-size: 14px; white-space: nowrap; }
.live { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); animation: pulse 1.4s infinite; }
.hint { position: absolute; left: 50%; bottom: calc(2.1vh + 80px); transform: translateX(-50%); font-size: 12.5px; color: rgba(244,240,234,.7); text-shadow: 0 1px 6px rgba(0,0,0,.6); white-space: nowrap; transition: opacity 1s; pointer-events: none; }
.hint.gone, body.placing .hint { opacity: 0; }
kbd { display: inline-block; min-width: 18px; padding: 0 4px; margin: 0 1px; border-radius: 4px; border: 1px solid rgba(255,255,255,.3); font: 600 11px/16px inherit; text-align: center; }
.toasts { position: absolute; left: 50%; top: 3.6vh; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; z-index: 30; }
.toast { padding: 11px 20px; border-radius: 999px; background: rgba(17,21,36,.72); border: 1px solid var(--line); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); font-size: 14px; animation: drop .35s cubic-bezier(.2,.8,.2,1); white-space: nowrap; }
.toast.out { opacity: 0; transform: translateY(-6px); transition: .4s; }
.placing-banner:not([hidden]) ~ .toasts { top: calc(3.6vh + 54px); }

body.zen .wish-panel, body.zen .preview-card, body.zen .adjust-panel, body.zen .me-card, body.zen .dock, body.zen .corner, body.zen .hint, body.zen .drawer, body.zen .panel-open { opacity: 0; pointer-events: none; transition: opacity 1.2s; }
.zen-ui { position: absolute; left: 0; right: 0; bottom: 6vh; display: flex; flex-direction: column; align-items: center; gap: 14px; animation: fade 2s; }
.zen-ui p { margin: 0; font-size: 17px; letter-spacing: .01em; color: rgba(255,248,236,.86); text-shadow: 0 2px 14px rgba(0,0,0,.6); }
.zen-ui .pill { height: 44px; font-size: 14px; padding: 0 20px; }

.loader { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 40%, #18264a, #070c18 70%); transition: opacity 1s ease; }
.loader.done { opacity: 0; pointer-events: none; }
.loader-inner { text-align: center; }
.loader h1 { margin: 10px 0 8px; font-size: 26px; letter-spacing: .32em; font-weight: 600; padding-left: .32em; }
.loader p { margin: 0; font-size: 14px; color: var(--muted); }
.loader-star { font-size: 34px; color: var(--gold); text-shadow: 0 0 24px rgba(255,200,120,.9); animation: pulse 1.6s infinite; }
.fatal { position: absolute; inset: 0; z-index: 60; display: grid; place-content: center; text-align: center; padding: 24px; background: #0b1222; }

@keyframes pulse { 50% { opacity: .45; } }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 12px); } }
.photo-box { animation-name: pop; }
@keyframes pop { from { opacity: 0; transform: scale(.96); } }
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } }
@keyframes fade { from { opacity: 0; } }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .preview-card { width: 280px; height: 320px; }
  .adjust-panel { top: calc(3.3vh + 320px + 18px); }
}
@media (max-height: 860px) and (min-width: 821px) {
  .preview-card { width: 300px; height: 330px; }
  .adjust-panel { top: calc(3.3vh + 330px + 14px); }
  .wish-panel { top: 3vh; padding-top: 22px; }
  .wish-panel .sub { margin-bottom: 14px; }
  .orn-grid { gap: 8px; margin-bottom: 14px; }
  .wish-panel { width: 280px; }
}
@media (max-width: 820px) {
  .wish-panel { left: 12px; right: 12px; top: auto; bottom: 156px; width: auto; max-width: 420px; margin: 0 auto; padding: 18px 14px 14px; }
  .wish-panel .sub { display: none; }
  .wish-panel h2 { font-size: 17px; margin-bottom: 12px; }
  .orn-grid { grid-template-columns: repeat(9, 1fr); gap: 5px; margin-bottom: 12px; }
  .orn { border-radius: 10px; }
  .orn .lbl { display: none; }
  .field textarea { height: 64px; padding: 12px 12px 22px; }
  .btn-primary { height: 46px; }
  .panel-open { left: 50%; transform: translateX(-50%); top: auto; bottom: 156px; }
  .preview-card { width: 150px; height: 170px; right: 12px; top: 12px; border-radius: 16px; }
  .preview-chip { display: none; }
  .preview-foot { left: 6px; right: 6px; bottom: 6px; padding: 6px 6px 6px 10px; }
  .preview-foot small { display: none; }
  .pv-nav button { width: 26px; height: 26px; }
  .adjust-panel { right: 12px; left: auto; top: 194px; width: 238px; padding: 12px; }
  .me-card { left: 12px; top: 12px; bottom: auto; width: auto; max-width: calc(100% - 186px); height: 52px; padding-right: 14px; }
  .me-online span { overflow: hidden; text-overflow: ellipsis; }
  .me-online { max-width: 100%; }
  .me-card img { width: 40px; height: 40px; }
  #meName { font-size: 14px; max-width: 120px; }
  .dock { bottom: 12px; height: 60px; width: calc(100% - 24px); justify-content: space-between; }
  .dock button { flex: 1; width: auto; }
  .corner { right: 12px; bottom: 84px; }
  .pill { height: 46px; padding: 0 18px 0 14px; font-size: 14px; }
  .round { width: 46px; height: 46px; }
  .hint { display: none; }
  .drawer { bottom: 84px; }
  .placing-banner { top: auto; bottom: 150px; font-size: 13px; white-space: normal; width: max-content; max-width: 90vw; }
  body.placing .wish-panel { display: none; }
  body.placing .corner { display: none; }
}

/* ---------- v2: wish card open/close ---------- */
.preview-close { position: absolute; right: 12px; top: 12px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(10,14,24,.5); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: rgba(255,245,230,.9); }
.preview-close:hover { background: rgba(10,14,24,.75); }
.preview-close svg { width: 16px; height: 16px; }
.preview-open { position: absolute; right: 3vw; top: 3.3vh; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 14px; border-radius: 999px; font-size: 14px; font-weight: 600; animation: drop .3s cubic-bezier(.2,.8,.2,1); }
.preview-open svg { width: 18px; height: 18px; color: var(--gold); }
.preview-open:hover { background: var(--panel-strong); }
body.pv-closed .adjust-panel { top: calc(3.3vh + 60px); }

/* ---------- v2: sound ---------- */
.sound-ctl { display: flex; align-items: center; height: 54px; border-radius: 999px; padding: 0 4px; }
.sound-ctl button { height: 46px; display: grid; place-items: center; border-radius: 999px; color: var(--text); }
#soundBtn { width: 46px; }
#soundMore { width: 30px; color: var(--muted); }
#soundMore svg { width: 18px; height: 18px; transition: transform .25s; }
#soundMore[aria-expanded="true"] svg { transform: rotate(180deg); }
.sound-ctl button:hover { background: rgba(255,255,255,.08); color: #fff; }
.sound-ctl .ico-off { display: none; }
.sound-ctl.muted .ico-on { display: none; }
.sound-ctl.muted .ico-off { display: block; color: var(--muted); }
.sound-ctl.playing #soundBtn svg { color: var(--gold); filter: drop-shadow(0 0 6px rgba(255,215,154,.5)); }
.sound-pop { position: absolute; right: 2.4vw; bottom: calc(2.6vh + 66px); width: 268px; padding: 16px; border-radius: 20px; animation: pop .25s cubic-bezier(.2,.8,.2,1); z-index: 5; }
.sp-now { display: flex; align-items: center; gap: 12px; padding: 4px 2px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.sp-now small { display: block; font-size: 11.5px; color: var(--faint); margin-bottom: 2px; }
.sp-now strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.eq { display: flex; align-items: flex-end; gap: 3px; width: 22px; height: 18px; flex: none; }
.eq i { flex: 1; height: 30%; background: var(--gold); border-radius: 2px; opacity: .85; }
.sound-pop.is-live .eq i { animation: eq 1.1s ease-in-out infinite; }
.sound-pop.is-live .eq i:nth-child(2) { animation-delay: -.35s; }
.sound-pop.is-live .eq i:nth-child(3) { animation-delay: -.7s; }
@keyframes eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }
.sw { display: flex; align-items: center; justify-content: space-between; padding: 9px 2px; font-size: 14px; cursor: pointer; }
.sw input { position: absolute; opacity: 0; pointer-events: none; }
.sw i { position: relative; width: 40px; height: 24px; border-radius: 999px; background: rgba(255,255,255,.16); transition: background .2s; flex: none; }
.sw i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.sw input:checked + i { background: #e9c27f; }
.sw input:checked + i::after { transform: translateX(16px); }
.sw input:focus-visible + i { outline: 2px solid var(--gold); outline-offset: 2px; }
.sound-pop.off .sw, .sound-pop.off .sp-vol { opacity: .45; }
.sp-vol { display: flex; align-items: center; gap: 10px; padding: 10px 2px 2px; }
.sp-vol svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.sp-vol input { flex: 1; accent-color: #e9c27f; }

/* ---------- v2: entrance ---------- */
.loader-actions { margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 12px; animation: fade .6s; }
.btn-primary.enter { width: auto; padding: 0 28px; height: 52px; font-size: 16px; }
.btn-primary.enter svg { width: 20px; height: 20px; }
.loader-quiet { font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.25); }
.loader-quiet:hover { color: var(--text); }

@media (max-width: 820px) {
  .preview-open { right: 12px; top: 12px; height: 40px; }
  .preview-close { right: 6px; top: 6px; width: 26px; height: 26px; }
  .sound-ctl { height: 46px; }
  .sound-ctl button { height: 40px; }
  #soundBtn { width: 40px; }
  .sound-pop { right: 12px; bottom: 140px; }
  body.pv-closed .adjust-panel { top: 64px; }
}

/* keep the corner buttons clear of the dock on mid-size screens */
@media (min-width: 821px) and (max-width: 1360px) {
  #goTree { width: 54px; padding: 0; justify-content: center; }
  #goTree span { display: none; }
}

.sp-title { flex: 1; min-width: 0; }
.sp-next { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); color: var(--text); }
.sp-next:hover:not(:disabled) { background: rgba(255,255,255,.16); }
.sp-next:disabled { opacity: .35; cursor: default; }
.sp-next svg { width: 16px; height: 16px; fill: currentColor; stroke-width: 1.4; }

/* =====================================================================
   v3: special ornaments, emotes, events, hearts, share, customizer
   ===================================================================== */
.orn-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.orn .lock { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(8,12,24,.55); font-size: 15px; color: rgba(255,255,255,.85); }
.orn.locked img { filter: grayscale(.8) brightness(.55); }
.orn.special:not(.locked)::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 14px rgba(255,215,154,.35); pointer-events: none; }
.orn.new::before { content: 'NEW'; position: absolute; top: 4px; right: 4px; font-size: 9px; font-weight: 800; letter-spacing: .04em; padding: 2px 5px; border-radius: 6px; background: #ff5c7a; color: #fff; z-index: 2; }

.dock button { width: 100px; }

/* me card → customizer */
.me-avatar { position: relative; width: 50px; height: 50px; border-radius: 50%; flex: none; }
.me-avatar img { width: 100%; height: 100%; }
.me-edit { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 8px; background: var(--pink); color: var(--pink-ink); white-space: nowrap; }
.me-avatar:hover img { filter: brightness(1.15); }

/* emote tray */
.emote-tray { position: absolute; left: 50%; bottom: calc(2.1vh + 76px); transform: translateX(-50%); display: flex; gap: 4px; padding: 6px; border-radius: 20px; animation: rise .25s cubic-bezier(.2,.8,.2,1); }
.emote-tray button { position: relative; width: 74px; height: 74px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.emote-tray button:hover { background: rgba(255,255,255,.08); }
.emote-tray button:active { transform: scale(.95); }
.emote-tray .em { font-size: 26px; line-height: 1; }
.emote-tray small { font-size: 11.5px; color: var(--muted); }
.emote-tray kbd { position: absolute; top: 5px; right: 6px; font-size: 9px; padding: 0 3px; min-width: 0; line-height: 13px; opacity: .55; }
.emote-tray .ball { background: rgba(190,225,255,.08); }
.emote-tray button.cool { opacity: .4; }

/* top info chips */
.infobar { position: absolute; left: 50%; top: 3.3vh; transform: translateX(-50%); display: flex; gap: 8px; z-index: 3; }
.chip { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px 0 11px; border-radius: 999px; background: rgba(17,21,36,.6); border: 1px solid var(--line); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); font-size: 13px; font-weight: 600; white-space: nowrap; color: rgba(244,240,234,.9); }
.chip:hover { background: rgba(17,21,36,.8); }
.chip .ci { font-size: 15px; }
.chip.gold { border-color: rgba(255,215,154,.55); color: #ffe7c2; box-shadow: 0 0 18px rgba(255,200,110,.18); }
.chip.live { border-color: rgba(255,215,154,.7); animation: glowpulse 1.6s infinite; }
@keyframes glowpulse { 50% { box-shadow: 0 0 22px rgba(255,200,110,.45); } }
.toasts { top: calc(3.3vh + 48px); }
body.placing .infobar, body.zen .infobar { opacity: 0; pointer-events: none; }

/* countdown & big text */
.countdown { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; z-index: 8; }
.countdown small { display: block; font-size: 18px; letter-spacing: .2em; color: rgba(255,240,220,.85); text-shadow: 0 2px 12px rgba(0,0,0,.6); margin-bottom: 4px; }
.countdown strong { display: block; font-size: 150px; font-weight: 800; line-height: 1; color: #fff3df; text-shadow: 0 0 40px rgba(255,190,100,.8), 0 4px 20px rgba(0,0,0,.5); animation: tick 1s ease-out; }
@keyframes tick { from { transform: scale(1.35); opacity: 0; } 30% { opacity: 1; } }
.bigtext { position: absolute; left: 0; right: 0; top: 34%; text-align: center; pointer-events: none; z-index: 8; font-family: 'Nanum Pen Script', var(--font); font-size: clamp(56px, 9vw, 120px); color: #fff3df; text-shadow: 0 0 36px rgba(255,190,100,.9), 0 4px 18px rgba(0,0,0,.5); animation: bigin 1.2s cubic-bezier(.2,.8,.2,1); }
.bigtext small { display: block; font-family: var(--font); font-size: 18px; letter-spacing: .08em; color: rgba(255,240,220,.85); margin-top: 6px; }
@keyframes bigin { from { opacity: 0; transform: scale(.85); filter: blur(8px); } }

/* hearts on the wish card */
.preview-foot { gap: 8px; }
.pv-who { min-width: 0; }
.pv-who strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.pv-nav button svg { width: 17px; height: 17px; }
.pv-nav button { display: grid; place-items: center; }
.pv-heart { width: auto !important; padding: 0 9px; display: flex !important; gap: 4px; font-size: 13px; font-weight: 700; }
.pv-heart[aria-pressed="true"] { background: rgba(255,92,122,.22) !important; color: #ff8aa0; }
.pv-heart[aria-pressed="true"] svg { fill: #ff5c7a; stroke: #ff5c7a; }
.pv-heart.pop svg { animation: hpop .4s; }
@keyframes hpop { 40% { transform: scale(1.5); } }
.drawer li .hearts { margin-left: 8px; color: #ff8aa0; }
.drawer li.today { background: rgba(255,215,154,.08); }
.drawer li.today p::before { content: '✨ 오늘의 소원 '; font-family: var(--font); font-size: 11px; font-weight: 700; color: var(--gold); vertical-align: middle; }

/* share modal */
.share-box { position: relative; display: flex; gap: 22px; align-items: center; width: min(760px, 94vw); padding: 22px; border-radius: 24px; animation: pop .3s cubic-bezier(.2,.8,.2,1); }
.share-img { flex: none; width: 270px; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: #0b1430; box-shadow: 0 12px 40px rgba(0,0,0,.4); }
.share-img img { width: 100%; height: 100%; display: block; object-fit: cover; }
.share-side { flex: 1; min-width: 0; }
.share-side h3 { margin: 0 0 8px; font-size: 20px; }
.share-side .sub { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.share-link { display: flex; gap: 6px; margin-bottom: 14px; }
.share-link input { flex: 1; min-width: 0; height: 34px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0,0,0,.25); font-size: 12.5px; color: var(--muted); user-select: all; }
.share-actions { display: flex; flex-direction: column; gap: 8px; }
.share-actions .btn-ghost { display: grid; place-items: center; text-decoration: none; height: 46px; }
.modal .x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; color: var(--muted); z-index: 2; }
.modal .x:hover { background: rgba(255,255,255,.08); color: var(--text); }

/* customizer */
.dress-box { position: relative; display: flex; gap: 22px; width: min(720px, 94vw); padding: 22px; border-radius: 24px; animation: pop .3s cubic-bezier(.2,.8,.2,1); }
.dress-preview { flex: none; width: 240px; display: grid; place-items: center; border-radius: 18px; background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.14), rgba(255,255,255,.02) 70%); }
.dress-preview img { width: 220px; height: 220px; }
.dress-form { flex: 1; min-width: 0; }
.dress-form h3 { margin: 4px 0 14px; font-size: 20px; }
.dress-name { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 13px; color: var(--muted); }
.dress-name input { flex: 1; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.05); font-size: 15px; user-select: text; }
.dress-group { margin-bottom: 14px; }
.dress-group > span { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 7px; }
.opts { display: flex; flex-wrap: wrap; gap: 6px; }
.opts button { position: relative; height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.04); font-size: 13px; }
.opts button:hover:not(:disabled) { background: rgba(255,255,255,.1); }
.opts button.on { border-color: rgba(255,215,154,.8); background: rgba(255,215,154,.14); color: #ffe7c2; }
.opts button:disabled { opacity: .45; cursor: default; }
.opts button .lk { margin-left: 4px; font-size: 11px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatches button { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255,255,255,.15); }
.swatches button.on { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,215,154,.45); }
.dress-form .btn-primary { margin-top: 6px; }

@media (max-width: 820px) {
  .orn-grid { grid-template-columns: repeat(6, 1fr); }
  .infobar { left: 12px; right: 174px; top: 72px; transform: none; flex-wrap: wrap; gap: 6px; }
  .chip { height: 30px; font-size: 11.5px; padding: 0 10px 0 8px; }
  .toasts { top: 150px; }
  .dock button { width: auto; }
  .dock button span { font-size: 11px; }
  .emote-tray { bottom: 84px; width: calc(100% - 24px); justify-content: space-between; }
  .emote-tray button { width: auto; flex: 1; height: 64px; }
  .emote-tray kbd { display: none; }
  .countdown strong { font-size: 110px; }
  .share-box, .dress-box { flex-direction: column; max-height: 90vh; overflow: auto; }
  .share-img { width: 180px; align-self: center; }
  .dress-preview { width: 100%; }
  .dress-preview img { width: 150px; height: 150px; }
}
@media (max-width: 1180px) and (min-width: 821px) {
  .infobar { left: calc(3.1vw + 300px); transform: none; }
}
@media (min-width: 821px) and (max-width: 1120px) {
  .dock button { width: 78px; }
  .dock button span { font-size: 11px; }
  .me-card { width: 224px; padding-right: 14px; }
  #meName { max-width: 140px; }
  .me-online { font-size: 12px; }
  .emote-tray button { width: 66px; height: 66px; }
}
#emoteTray:not([hidden]) ~ .hint { opacity: 0; }
@media (min-width: 821px) and (max-width: 1120px) { .emote-tray button { width: 60px; height: 62px; } .emote-tray .em { font-size: 22px; } }
@media (max-width: 820px) {
  .emote-tray { bottom: 140px; z-index: 6; }
  body.tray-open .panel-open, body.tray-open .wish-panel { display: none; }
}

/* ---------- v4: Snow Village mobile layout ---------- */
html, body { touch-action: manipulation; -webkit-text-size-adjust: 100%; }
.loader h1 { letter-spacing: .14em; padding-left: .14em; font-size: 28px; }
.loader-foot { position: absolute; left: 0; right: 0; bottom: calc(22px + env(safe-area-inset-bottom)); text-align: center; font-size: 13px; letter-spacing: .04em; color: rgba(244,240,234,.62); }
.loader-foot small { display: block; margin-top: 4px; font-size: 10.5px; letter-spacing: .08em; color: rgba(244,240,234,.38); }
@media (pointer: coarse) { #fullBtn { display: none; } }
@media (max-width: 820px) {
  #fullBtn { display: none; }
  /* 트리로 가기 + 소리: right column under the wish card */
  .corner { top: 194px; bottom: auto; right: 12px; flex-direction: column; align-items: flex-end; gap: 8px; z-index: 4; }
  body.pv-closed .corner { top: 62px; }
  .sound-pop { top: 298px; bottom: auto; }
  body.pv-closed .sound-pop { top: 166px; }
  /* bottom row is free now: wish button, wish form and play tray sit right above the dock */
  .panel-open { bottom: 84px; }
  .wish-panel { bottom: 84px; }
  .placing-banner { bottom: 84px; }
  .emote-tray { bottom: 80px; padding: 4px; gap: 2px; border-radius: 16px; }
  .emote-tray button { height: 48px; flex-direction: row; gap: 5px; border-radius: 12px; }
  .emote-tray .em { font-size: 18px; }
  .emote-tray small { font-size: 11px; }
  /* no zoom-in when typing on iPhone (inputs under 16px make Safari zoom) */
  .field textarea, .dress-name input { font-size: 16px; }
  /* wish list: calmer sizes */
  .drawer { max-height: 56vh; }
  .drawer header { padding: 12px 10px 10px 16px; gap: 8px; align-items: flex-start; }
  .drawer h3 { font-size: 15px; }
  .drawer header small { display: block; font-size: 11px; line-height: 1.45; margin-top: 2px; word-break: keep-all; }
  .drawer-actions { gap: 4px; flex: none; }
  .drawer-actions .btn-ghost.sm { height: 28px; padding: 0 9px; font-size: 11.5px; border-radius: 8px; white-space: nowrap; }
  .drawer .x { width: 28px; height: 28px; }
  .drawer ul { padding: 6px; }
  .drawer li { gap: 10px; padding: 8px; border-radius: 12px; }
  .drawer li img { width: 36px; height: 36px; border-radius: 10px; }
  .drawer li p { font-size: 17px; line-height: 1.15; }
  .drawer li small { font-size: 11px; }
}
@media (max-width: 380px) {
  .emote-tray small { display: none; }
  .emote-tray .em { font-size: 20px; }
}
@media (max-width: 820px) { body:has(#drawer:not([hidden])) .corner, body:has(#drawer:not([hidden])) .sound-pop { display: none; } }