:root{--paper:#f4f0e7;--ink:#292c27;--accent:#c86b50}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Apple SD Gothic Neo','Noto Sans KR',sans-serif;word-break:keep-all}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:4px}
[hidden]{display:none!important}
.sr-only{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.entrance{height:100svh;min-height:600px;position:relative;overflow:clip;isolation:isolate;background:radial-gradient(ellipse at 50% 50%,#fffcf5 0%,var(--paper) 75%)}
.floor{position:absolute;left:-10%;right:-10%;bottom:7%;height:22%;background:radial-gradient(ellipse,#c5c9b826,transparent 70%);pointer-events:none;opacity:0}
body[data-phase=playing] .floor{opacity:1}
.header{position:absolute;inset:0 4.5% auto;height:88px;display:flex;justify-content:space-between;align-items:center;gap:30px;z-index:8;opacity:0;visibility:hidden;transition:opacity .5s}
.header nav,.header-right{display:flex;gap:30px;align-items:center;font-size:12px}
.inquiry{padding:12px 18px;border:1px solid #9eaa94;border-radius:30px}
.header a:hover{color:var(--accent)}
#stage{position:absolute;inset:0;z-index:3;pointer-events:none}
#stage canvas{display:block;width:100%;height:100%}
.logo-intro{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:380px;max-width:84vw;z-index:4;pointer-events:none;will-change:transform,top}
.logo-face-wrap{position:relative;width:100%;aspect-ratio:1}
.logo-part,.logo-outline,.logo-eyes{position:absolute;inset:0;width:100%;height:100%}
.logo-part{opacity:0}
.logo-left{clip-path:inset(0 50% 0 0)}
.logo-right{clip-path:inset(0 0 0 50%)}
/* Keep all pieces in the original 568×568 coordinates. The inner hole excludes both eyes. */
.logo-outline{clip-path:polygon(evenodd,0% 0%,100% 0%,100% 100%,0% 100%,0% 0%,31% 32%,31% 55%,60% 55%,60% 32%,31% 32%,0% 0%)}
.logo-eyes{clip-path:inset(32% 40% 45% 31%);transform-origin:46% 44%}
.logo-mouth{position:absolute;left:53.66%;top:51.83%;width:49.65%;height:51.23%;transform:translate(-50%,-50%);opacity:0}
.intro-wordmark{width:95%;display:block;margin:-12% auto -5%;opacity:0}
.intro-tools{position:absolute;left:5%;right:5%;bottom:32px;display:flex;align-items:center;justify-content:space-between;gap:25px;z-index:10}
.intro-tools>span{font-size:11px;color:#8a8d7d}
.intro-tools button{border-bottom:1px solid #7c866d;font-size:12px;padding:8px 0;margin-left:auto}
#load-error{position:absolute;left:50%;bottom:75px;max-width:90%;transform:translateX(-50%);font-size:11px;color:#986346;text-align:center;z-index:9;background:var(--paper);padding:7px 12px}
body[data-phase=finished] .header{opacity:1;visibility:visible}
body[data-phase=finished] .intro-tools{display:none}
/* The inline skip button also works before the renderer or its assets have loaded. */
body[data-phase=finished] .logo-intro{top:112px!important;transform:translate(-50%,-50%) scale(.38)!important}
body[data-phase=finished] .logo-part,body[data-phase=finished] .logo-mouth,body[data-phase=finished] .intro-wordmark{opacity:1!important}
body[data-phase=finished] .logo-left,body[data-phase=finished] .logo-right,body[data-phase=finished] .logo-eyes{transform:none!important}
body[data-phase=finished] .logo-mouth{transform:translate(-50%,-50%)!important}
@media(max-width:760px){
  .header{height:68px;left:6%;right:6%;gap:12px}
  .header nav,.header-right{gap:15px;font-size:10px}
  .header nav{visibility:hidden}
  .inquiry{padding:9px 11px}
  .logo-intro{width:310px}
  .intro-tools{left:6%;right:6%;bottom:24px}
  .intro-tools button{font-size:11px}
  body[data-phase=finished] .logo-intro{top:212px!important;transform:translate(-50%,-50%) scale(.48)!important}
}
@media(min-width:761px) and (max-width:1000px){
  body[data-phase=finished] .logo-intro{top:184px!important}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}