@charset "UTF-8";
:root{color-scheme:dark;--paper:#eeeee9;--muted:#8d8d8a;--accent:#d6ff83;--line:#ffffff24;font-family:"Malgun Gothic","Apple SD Gothic Neo",sans-serif;background:#000;color:var(--paper)}
*{box-sizing:border-box}
body{margin:0}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
a{color:inherit;text-decoration:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.stage{min-height:620px;height:100svh;position:relative;isolation:isolate;overflow:hidden;background:#000}
.artwork{position:absolute;inset:0;z-index:-1;background:url("assets/title.png") center 42%/contain no-repeat;transform:translateY(clamp(-30px,-3vh,-18px));pointer-events:none;animation:artwork-reveal 3s ease-in-out both}
.navigation-area{position:absolute;top:calc(50% + min(10vw,17vh));margin-top:clamp(6px,1vh,10px);width:min(620px,82%);left:50%;transform:translateX(-50%)}
.project-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;justify-items:center}
.nav-item{display:grid;place-items:center;width:64px;height:64px;padding:12px;color:var(--paper);border:0;background:transparent;cursor:pointer;transition:color .25s;animation:icon-rise 1.15s cubic-bezier(.2,.65,.3,1) 3.15s both}
.nav-item>svg{width:35px;height:35px;stroke:currentColor;stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round;transition:transform .25s,filter .25s}
.nav-item:nth-child(2){animation-delay:3.4s}
.nav-item:nth-child(3){animation-delay:3.65s}
.nav-item:nth-child(4){animation-delay:3.9s}
.stage:not(.is-ready) .artwork,.stage:not(.is-ready) .nav-item{animation-play-state:paused}
.stage:not(.is-ready){visibility:hidden}
.intro{position:fixed;inset:0;z-index:20;background:#000;display:grid;place-items:center;color:#e8e6df;pointer-events:auto;cursor:pointer;touch-action:manipulation}
.intro[hidden]{display:none}
.intro-copy{font-family:"Batang","바탕","Nanum Myeongjo","AppleMyungjo",serif;font-size:clamp(11px,2.1vw,23px);font-weight:600;line-height:2.3;letter-spacing:.05em;padding:0 18px;transform:translateY(-1vh)}
.intro-line{display:block;position:relative;width:max-content;margin:0 auto;white-space:nowrap}
.intro-ghost{visibility:hidden}
.intro-typed{position:absolute;left:0;top:0}
.intro-typed.is-typing::after{content:"";display:inline-block;height:1em;border-left:1px solid #b7b5ac;margin-left:4px;vertical-align:-.1em;animation:typing-caret .65s steps(1) infinite}
.intro.is-leaving{animation:intro-fade .9s ease-in-out both}
dialog{width:min(480px,calc(100% - 40px));max-height:calc(100svh - 48px);padding:32px 36px 38px;color:var(--paper);background:#080808;border:0;box-shadow:none;overscroll-behavior:contain;font-family:"Malgun Gothic","Apple SD Gothic Neo","Noto Sans KR",sans-serif}
dialog::backdrop{background:#000b;backdrop-filter:blur(3px)}
.dialog-header{display:flex;align-items:center;justify-content:space-between;gap:20px}
.close-button{width:44px;height:44px;margin-right:-12px;padding:12px;border:0;background:transparent;color:#aaa;display:grid;place-items:center;cursor:pointer}
.close-button svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.2}
dialog button:focus-visible{outline:1px solid #888;outline-offset:2px}
#dialog-title{font-family:inherit;font-size:22px;font-weight:600;line-height:1.6;letter-spacing:0;margin:0}
#dialog-content{margin-top:24px;font-family:inherit;font-size:15px;line-height:2;color:#d0d0cb}
.empty-message{margin:0}
.paragraph{margin:0;white-space:pre-wrap;font-size:15px;line-height:2}
dialog[data-panel="intent"]{width:min(580px,calc(100% - 40px));scrollbar-width:thin;scrollbar-color:#444 transparent}
dialog[data-panel="intent"] .dialog-header{position:sticky;top:0;z-index:1;background:#080808}
dialog[data-panel="intent"] .paragraph{font-size:15px;font-weight:400;line-height:2.05;white-space:normal;word-break:keep-all;overflow-wrap:anywhere}
dialog[data-panel="intent"] .paragraph+.paragraph{margin-top:24px}
dialog[data-panel="intent"] .paragraph strong{font-weight:700;color:var(--paper)}
.intent-signature{margin:32px 0 0;text-align:center;font-size:14px;color:var(--paper)}
.staff-row{padding:12px 0;display:flex;justify-content:space-between;gap:25px;font-size:15px;line-height:1.9}
.staff-row span:first-child{color:#aaa}
.staff-row span:last-child{text-align:right;font-weight:500;word-break:keep-all}
dialog[data-panel="rewards"]{width:min(760px,calc(100% - 40px))}
.rewards-scroll{overflow-x:auto;scrollbar-width:thin;scrollbar-color:#444 transparent}
.rewards-scroll:focus-visible{outline:1px solid #888;outline-offset:4px}
.rewards-table{width:100%;min-width:320px;border-collapse:collapse;table-layout:fixed;font-size:14px;line-height:1.8}
.rewards-table th,.rewards-table td{padding:22px 8px;text-align:center;vertical-align:middle;word-break:keep-all}
.rewards-table thead th{padding-top:4px;padding-bottom:18px;border-bottom:1px solid #ffffff38;font-weight:500;color:#c6c6c0}
.rewards-table th:first-child{width:34%;text-align:left}
.rewards-table tbody tr+tr{border-top:1px solid #ffffff1c}
.rewards-table .reward-amount{font-weight:500;color:var(--paper);white-space:pre-line}
.rewards-table td{font-size:20px}
.reward-included{color:var(--paper)}
.reward-excluded{color:#62625e}
@media(hover:hover){.nav-item:hover{color:var(--accent)}.nav-item:hover>svg{transform:translateY(-3px);filter:drop-shadow(1px 0 2px #6fffc570) drop-shadow(-1px 0 2px #bd78ff60)}.close-button:hover{color:var(--paper)}}
@media(min-aspect-ratio:19/10){.artwork{background-size:auto 115%;background-position:center 32%}}
@media(max-width:640px){
  .artwork{background-size:170% auto;background-position:center calc(42% - 6.69vw)}
  .navigation-area{top:calc(42% + 14vw);width:calc(100% - 32px)}
  .nav-item{width:56px;height:56px;padding:12px}
  .nav-item>svg{width:29px;height:29px}
  dialog{padding:24px 26px 30px}
  #dialog-title{font-size:20px}
  dialog[data-panel="intent"] .paragraph{font-size:15px}
  dialog[data-panel="rewards"]{width:calc(100% - 24px);padding:24px 20px 30px}
  .rewards-table{font-size:13px}
  .rewards-table th,.rewards-table td{padding:18px 6px}
}
@media(max-height:600px) and (min-width:641px){.stage{min-height:560px}.navigation-area{top:61%;width:min(620px,82%)}.artwork{background-size:auto 115%;background-position:center -68px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
@keyframes typing-caret{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes intro-fade{from{opacity:1}to{opacity:0}}
@keyframes artwork-reveal{from{opacity:0}to{opacity:1}}
@keyframes icon-rise{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}