:root{--ink: #4a3b2e;--ink-soft: #5b4632;--muted: #9c8366;--muted-2: #b09479;--paper: #fffdf8;--paper-warm: #fbf4e6;--font-title: "Jua", sans-serif;--font-hand: "Gaegu", cursive;--font-body: "Gowun Dodum", sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:#cdb18a;font-family:var(--font-body);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}::-webkit-scrollbar{width:0;height:0}*{scrollbar-width:none}button{font-family:inherit}img{display:block;max-width:100%}@keyframes globespin{0%{transform:translate(0)}to{transform:translate(-50%)}}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-9px)}}@keyframes drift{0%{transform:translate(-50px)}to{transform:translate(340px)}}@keyframes popIn{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes popModal{0%{opacity:0;transform:scale(.9) translateY(14px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes sheetUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}@keyframes twinkle{0%,to{opacity:.25}50%{opacity:.9}}@keyframes pageNext{0%{transform:perspective(1300px) rotateY(-26deg) translate(34px);opacity:.4}to{transform:none;opacity:1}}@keyframes pagePrev{0%{transform:perspective(1300px) rotateY(26deg) translate(-34px);opacity:.4}to{transform:none;opacity:1}}.app{min-height:100dvh;display:flex;flex-direction:column;position:relative}.screen{flex:1}.header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px clamp(14px,4vw,30px);background:#fcf6ecd9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(150,110,70,.18)}.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:var(--font-title);font-size:15px;border:2.5px solid #fdf7ee;box-shadow:0 2px 5px #50371e40}.photo-fill{position:relative;overflow:hidden;background-size:cover;background-position:center}.photo-fill>.leak,.photo-fill>.grain{border-radius:inherit}.chip{display:flex;align-items:center;gap:7px;padding:7px 15px;border-radius:999px;font-family:var(--font-body);font-size:13.5px;white-space:nowrap;cursor:pointer;color:#5b4a3c;transition:transform .15s ease}.chip:hover{transform:translateY(-2px)}.polaroid{position:relative;background:var(--paper);padding:9px 9px 30px;border-radius:3px;box-shadow:0 9px 20px #5037233d,0 2px 4px #50372329;transform:rotate(var(--rot, 0deg));cursor:pointer;transition:transform .25s ease,box-shadow .25s ease}.polaroid:hover{transform:rotate(var(--rot, 0deg)) translateY(-7px) scale(1.035);box-shadow:0 18px 34px #5037234d}.photo-stack{position:relative}.photo-stack .stack-back{position:absolute;top:0;right:0;bottom:0;left:0;background:#fdf9f0;border-radius:3px;box-shadow:0 5px 11px #50372333}.photo-stack .stack-back.b1{transform:rotate(-5deg) translate(-4px,3px);z-index:1}.photo-stack .stack-back.b2{transform:rotate(5.5deg) translate(5px,5px);z-index:0}.photo-stack .polaroid{position:relative;z-index:2}.nav{position:fixed;left:50%;bottom:clamp(12px,3vw,22px);transform:translate(-50%);z-index:30;display:flex;gap:5px;padding:7px;background:#fcf6eced;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(150,110,70,.22);border-radius:999px;box-shadow:0 12px 30px #5a3c1e47}.nav-btn{display:flex;flex-direction:column;align-items:center;gap:3px;width:66px;padding:8px 0;border:none;border-radius:999px;cursor:pointer;font-family:var(--font-body);font-size:11px;background:transparent;color:#a89683;transition:all .18s ease}.nav-btn.active{background:#fff1e6;color:#c2708a}.album-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,4vw,30px) clamp(14px,3vw,22px);width:min(880px,100%);margin:0 auto}@media (min-width: 620px){.album-grid{grid-template-columns:repeat(3,1fr)}}@media (min-width: 900px){.album-grid{grid-template-columns:repeat(4,1fr)}}.album-card{position:relative;cursor:pointer;aspect-ratio:3 / 3.9;border-radius:3px 9px 9px 3px;box-shadow:0 13px 22px #5f412342,inset 0 0 0 1px #ffffff38;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}.album-card:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:0 22px 34px #5f412357}.album-create{cursor:pointer;aspect-ratio:3 / 3.9;border-radius:3px 9px 9px 3px;border:2px dashed #c8a878;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;color:#a9835c;background:#ffffff38;transition:background .18s ease,transform .2s ease}.album-create:hover{background:#ffffff80;transform:translateY(-4px)}.round-btn{width:48px;height:48px;border-radius:50%;border:none;background:var(--paper-warm);box-shadow:0 5px 14px #50371e38;cursor:pointer;display:grid;place-items:center;transition:transform .15s ease}.round-btn:hover{transform:scale(1.08)}.round-btn:disabled{opacity:.4;cursor:default;transform:none}.place-card{flex:none;width:118px;scroll-snap-align:start;cursor:pointer;transition:transform .18s ease}.place-card:hover{transform:translateY(-5px)}.marker{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;border:none;background:transparent;cursor:pointer;z-index:6;transition:transform .18s ease}.marker:hover{transform:translate(-50%,-100%) scale(1.12)}.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;justify-content:center;animation:fadeIn .2s ease}.sheet{width:min(620px,100%);border-radius:22px 22px 0 0;box-shadow:0 -14px 40px #28373c4d;animation:sheetUp .35s cubic-bezier(.2,.9,.3,1.1) both;max-height:82vh;overflow-y:auto}.sheet-handle{width:44px;height:5px;border-radius:999px;background:#dcccb2;margin:0 auto 14px}.pick-cell{position:relative;cursor:pointer;border-radius:9px;overflow:hidden;transition:box-shadow .15s ease,transform .15s ease}.pick-cell:hover{transform:translateY(-2px)}.region-card{cursor:pointer;background:var(--paper);padding:7px 7px 14px;border-radius:3px;box-shadow:0 6px 14px #5037232e;transform:rotate(var(--rot, 0deg));transition:transform .18s ease}.region-card:hover{transform:rotate(var(--rot, 0deg)) translateY(-4px)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}