:root{--ink:#0f1f18;--muted:#5b6b63;--accent:#00a36c;--line:#e3e8e5}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:#fff;color:var(--ink);font-family:"Pretendard",-apple-system,"Segoe UI","Noto Sans KR",system-ui,sans-serif;display:flex;flex-direction:column;min-height:100svh;overflow-x:hidden}
.page{flex:1;display:flex;flex-direction:column;padding:0 16px;min-height:0;background:radial-gradient(60% 55% at 50% 42%,#f1faf6 0%,#fff 70%)}
.stage{position:relative;flex:1;min-height:340px;width:100%;max-width:1480px;margin:auto;overflow:hidden;contain:layout paint}
.logo{position:absolute;left:50%;top:50%;width:var(--logo-w,200px);height:auto;transform:translate(-50%,-50%);z-index:500;user-select:none;-webkit-user-drag:none}
.orbit-layer{position:absolute;inset:0}
.ico{position:absolute;left:0;top:0;display:block;border-radius:22%;will-change:transform;backface-visibility:hidden;box-shadow:0 6px 16px rgba(15,31,24,.16);background:#fff;transition:filter .25s}
.ico img{display:block;width:100%;height:100%;border-radius:22%;-webkit-user-drag:none}
.ico.b1{filter:blur(.7px)}.ico.b2{filter:blur(1.4px)}
.ico:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.actions{display:flex;gap:10px;justify-content:flex-end;padding:8px 0 14px;max-width:1480px;width:100%;margin:0 auto}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;height:48px;padding:0 18px 0 14px;border-radius:12px;text-decoration:none;color:#fff;background:var(--ink);border:1px solid var(--ink);font-size:14px}
.btn svg{width:24px;height:24px;fill:currentColor;flex:none}
.btn-text{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.btn-text small{font-size:11px;opacity:.85}
.btn-text b{font-size:16px;font-weight:700}
.badge-play{display:inline-flex;align-items:center;margin:-8px -6px;border-radius:12px}.badge-play img{display:block;height:64px;width:auto}
.badge-play:focus-visible{outline:3px solid var(--accent);outline-offset:-4px}
.btn-disabled{background:#f2f4f3;color:#7a867f;border-color:var(--line);cursor:not-allowed}
.foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.foot nav{display:flex;gap:24px}
.foot a{color:var(--muted);text-decoration:none;padding:6px 0;cursor:pointer}
.foot a:hover{color:var(--ink);text-decoration:underline}
@media (max-width:640px){.stage{min-height:300px}.actions{align-items:center;gap:6px}.btn{flex:1;justify-content:center;padding:0 12px}.badge-play{flex:1;justify-content:center;margin:-8px -4px}.badge-play img{height:auto;width:100%;max-width:170px}.foot{justify-content:center;text-align:center;flex-direction:column;align-items:center;gap:14px;padding-top:18px}.foot nav{gap:28px}.foot a{padding:8px 4px}}