@font-face{font-family:Wanted;src:local("Wanted Sans"),local("WantedSans");font-display:swap}@font-face{font-family:Pretendard;src:local("Pretendard Variable"),local("Pretendard");font-display:swap}
:root{--bg:#f3efe7;--ink:#292825;--muted:#77736b;--wood:#c9a979;--wood2:#a98555;--stone:#353532;--panel:#fbf8f1}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Wanted,system-ui,sans-serif;min-height:100vh}header{max-width:1300px;margin:auto;padding:34px 34px 20px;display:flex;align-items:center;gap:42px;position:relative;z-index:5}.logo{display:flex;text-decoration:none;color:inherit;font:700 30px Pretendard,sans-serif;letter-spacing:.08em}.logo span,.screenLogo span{animation:wave 2.7s ease-in-out infinite;animation-delay:calc(var(--i)*.12s)}@keyframes wave{0%,45%,100%{font-weight:250}20%{font-weight:900}}
#search{flex:1;max-width:680px;margin-left:auto;display:flex;background:var(--panel);border:1.5px solid #cbc4b8;border-radius:999px;overflow:hidden;transition:.2s}#search:focus-within{border-color:var(--wood2);box-shadow:0 0 0 3px color-mix(in srgb,var(--wood) 22%,transparent)}#search input{border:0;outline:0;background:none;width:100%;font:inherit;padding:13px 19px;color:inherit}#search button{border:0;background:none;font-size:27px;padding:0 18px;cursor:pointer;color:inherit}
main{max-width:1300px;margin:auto;padding:25px 34px 150px}.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:48px 34px}.art{border:0;background:none;color:inherit;text-align:left;padding:0;font:inherit;cursor:pointer}.frame{position:relative;aspect-ratio:1;background:var(--wood);padding:10px;border:1px solid color-mix(in srgb,var(--wood2) 80%,#000);box-shadow:0 11px 24px #31271720,inset 0 0 0 2px #fff3;transition:transform .25s,box-shadow .25s}.frame:after{content:"";position:absolute;inset:9px;box-shadow:inset 0 0 10px #0005;pointer-events:none}.frame img{width:100%;height:100%;object-fit:cover;display:block}.art:hover .frame{transform:translateY(-4px);box-shadow:0 16px 30px #3127172c}.art strong,.art span{display:block}.art strong{font-size:17px;margin-top:14px}.art span{font-size:14px;color:var(--muted);margin-top:4px}#empty{text-align:center;color:var(--muted);padding:15vh 0}
.lp{position:fixed;width:min(20vw,220px);aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,#171717 0 3px,#222 4px 5px);z-index:20;pointer-events:none;display:none;box-shadow:0 15px 25px #0005}.lp div{position:absolute;inset:33%;border-radius:50%;background-size:cover;background-position:center}.lp.fly{display:block;animation:lpDrop 1s cubic-bezier(.25,.7,.3,1) forwards}.lp.fly div{animation:spin .55s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes lpDrop{0%{transform:translate(0,0) scale(.75) rotate(0);opacity:0}18%{transform:translate(70px,-25px) scale(1);opacity:1}60%{transform:translate(100px,15vh) rotate(260deg)}100%{transform:translate(120px,105vh) rotate(720deg);opacity:.8}}
.player{position:fixed;left:50%;bottom:18px;width:min(820px,calc(100% - 28px));transform:translate(-50%,calc(100% + 45px));background:var(--stone);color:#f8f4eb;border-radius:18px;z-index:30;box-shadow:0 16px 50px #0005;transition:transform .42s cubic-bezier(.2,.8,.2,1)}.player.show{transform:translate(-50%,0)}#drag{display:flex;align-items:center;padding:9px;gap:13px}.pcCover{width:58px;height:58px;position:relative;flex:0 0 auto}.pcCover img{width:100%;height:100%;object-fit:cover;border-radius:10px}.pcCover #close{position:absolute;inset:0;border:0;border-radius:10px;background:#0009;color:#fff;font-size:32px;opacity:0;cursor:pointer;transition:.15s}.pcCover:hover #close{opacity:1}.meta{min-width:0;flex:1}.meta strong,.meta span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.meta span{font-size:13px;opacity:.68;margin-top:3px}.controls{display:flex;align-items:center;gap:5px}.ctrl,.toggle{display:grid;place-items:center;border:0;color:#f8f4eb;background:transparent;cursor:pointer;border-radius:50%;position:relative}.ctrl{width:42px;height:42px;font-size:20px;opacity:.72}.ctrl:hover,.ctrl.active{opacity:1;background:#ffffff16}.ctrl.active{color:#fff}.toggle{width:54px;height:54px;background:#f7f2e8;color:#252522;font-size:23px;margin:0 2px}.repeat[data-mode="one"]:after{content:"1";position:absolute;right:5px;bottom:4px;font:700 10px Pretendard,sans-serif;background:#f7f2e8;color:#252522;width:14px;height:14px;border-radius:50%;display:grid;place-items:center}
.screen{position:fixed;inset:0;z-index:50;display:none;opacity:0;transition:opacity .6s;color:#fff}.screen.on{display:block;opacity:1}.screen section{width:100%;height:100%;display:grid;grid-template-columns:1fr 1fr;align-items:center}.screen img{width:min(68%,540px);aspect-ratio:1;object-fit:cover;justify-self:center;box-shadow:0 24px 80px #0008}.screen section>div{padding:8vw}.screen strong,.screen span{display:block}.screen strong{font-size:clamp(42px,6vw,96px);line-height:1.04}.screen section span{font-size:clamp(18px,2vw,30px);opacity:.7;margin-top:22px}.screenLogo{position:absolute;right:max(30px,env(safe-area-inset-right));bottom:max(26px,env(safe-area-inset-bottom));display:flex;font:700 clamp(18px,2vw,27px) Pretendard,sans-serif;letter-spacing:.13em;color:#fff;text-shadow:0 2px 14px #000,0 1px 3px #000}.screen.lightLogo .screenLogo{color:#171714;text-shadow:0 2px 14px #fff,0 1px 3px #fff}
@media(max-width:650px){header{padding:24px 18px 12px;display:block}.logo{font-size:25px;margin-bottom:20px}main{padding:22px 18px 130px}.gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 18px}.frame{padding:7px}.art strong{font-size:15px}.player{bottom:max(12px,env(safe-area-inset-bottom));border-radius:17px}.pcCover #close{display:none}#drag{gap:9px;flex-wrap:wrap}.pcCover{width:52px;height:52px}.meta{width:calc(100% - 70px)}.controls{width:100%;justify-content:center;padding:1px 0 4px}.ctrl{width:44px;height:44px}.toggle{width:52px;height:52px}.screen section{grid-template-columns:1fr;grid-template-rows:1fr 1fr}.screen img{width:min(70vw,42vh)}.screen section>div{text-align:center;padding:8vw}.screen strong{font-size:clamp(34px,10vw,64px)}}
@media(orientation:portrait){.screenLogo{left:50%;right:auto;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.logo span,.screenLogo span{animation:none}}
@media(prefers-color-scheme:dark){:root{--bg:#171714;--ink:#eee9df;--muted:#a8a197;--wood:#62472f;--wood2:#87613e;--stone:#292925;--panel:#22221f}.frame{box-shadow:0 11px 25px #0008,inset 0 0 0 2px #ffffff12}#search{border-color:#44413b}}