*{box-sizing:border-box;margin:0}body{font-family:'Pretendard Variable',sans-serif;color:#f2f2f2;background:#101010;-webkit-font-smoothing:antialiased;letter-spacing:-.01em;--ac:#E9462B}
a{color:inherit;text-decoration:none;cursor:pointer}p{word-break:keep-all}.wrap{max-width:1280px;margin:0 auto;padding:0 48px}
html::-webkit-scrollbar{display:none}html{scrollbar-width:none}
header .wrap{display:flex;align-items:center;height:76px}header nav{margin-left:auto;display:flex;gap:30px;font-size:15px;font-weight:500;color:#bdbdbd}
.intro{padding:52px 0 36px;font-size:26px;line-height:1.55;font-weight:600;color:#fff;letter-spacing:-.025em}.intro span{color:#8a8a8a;font-weight:500}
.tabs{position:relative;display:flex;gap:4px;border-bottom:1px solid #2a2a2a}.tabs a{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 16px 18px;font-size:14px;font-weight:600;color:#8f8f8f;transition:color .25s}
.tabs img{width:60px;height:60px;border-radius:14px;box-shadow:0 0 0 1px #3a3a3a;transition:transform .35s cubic-bezier(.2,.8,.2,1)}.tabs a:hover img{transform:translateY(-4px)}.tabs a.on{color:#fff}.tabs a.on img{transform:translateY(-4px) scale(1.06)}
#ind{position:absolute;bottom:-1px;height:3px;border-radius:3px;background:var(--ac);transition:left .45s cubic-bezier(.2,.8,.2,1),width .45s cubic-bezier(.2,.8,.2,1),background-color .45s}
.stagewrap{transition:background-color .7s ease;background:color-mix(in srgb,var(--ac) 9%,#101010)}
#info{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;padding:52px 0 32px}
#info .n{font-size:14px;color:#8a8a8a;font-variant-numeric:tabular-nums;letter-spacing:.02em}#info h1{font-size:60px;font-weight:700;letter-spacing:-.04em;margin:10px 0 12px;line-height:1.05}
#info p{font-size:19px;line-height:1.6;color:#d2d2d2;max-width:640px}#info .meta{margin-top:12px;font-size:14px;color:#8a8a8a}
.side{display:flex;flex-direction:column;align-items:flex-end;gap:14px}.btns{display:flex;gap:10px}.btns a{background:#fff;color:#101010;padding:13px 22px;border-radius:999px;font-weight:700;font-size:15px;transition:transform .2s}.btns a:hover{transform:translateY(-2px)}
.pp{font-size:14px;color:#9a9a9a;border-bottom:1px solid #444}.arrows{display:flex;gap:10px}.arrows a{width:46px;height:46px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #444;display:grid;place-items:center;font-size:18px;transition:background .2s,box-shadow .2s}.arrows a:hover{background:#fff;color:#101010;box-shadow:none}
.rise>*{opacity:0;transform:translateY(14px);animation:rise .55s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i,0)*60ms)}
@keyframes rise{to{opacity:1;transform:none}}
.band{background:#1a1a1a;padding:26px 0}.band .wrap{display:flex;gap:18px;align-items:center;font-size:16px;color:#cfcfcf}.band b{color:#fff}.band u{margin-left:auto;color:#fff;font-weight:700;text-underline-offset:4px}
.all{padding-top:72px;padding-bottom:72px}.all h2{font-size:28px;font-weight:700;margin-bottom:28px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{background:#191919;border-radius:20px;padding:24px;min-height:210px;display:block;transition:transform .3s cubic-bezier(.2,.8,.2,1),background .3s}.card:hover{transform:translateY(-6px);background:#202020}.card img{width:56px;height:56px;border-radius:13px;box-shadow:0 0 0 1px #3a3a3a}
.card h3{font-size:19px;margin:16px 0 4px}.card .d{font-size:12.5px;color:#7d7d7d;font-variant-numeric:tabular-nums}.card p{font-size:14px;line-height:1.55;color:#9d9d9d;margin-top:8px}
footer{border-top:1px solid #2a2a2a;padding:40px 0 72px;color:#8a8a8a;font-size:14px;line-height:1.9}footer .wrap{display:grid;grid-template-columns:1fr auto;gap:40px}footer b{color:#fff}footer .ppl a{margin-right:16px;border-bottom:1px solid #444}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rise>*{opacity:1;transform:none}}

@media (max-width:720px){
.wrap{padding:0 20px}header .wrap{height:60px}header .wrap>img{height:20px!important}header nav{gap:16px;font-size:14px}
.tabs{overflow-x:auto;scrollbar-width:none;gap:0}.tabs::-webkit-scrollbar{display:none}.tabs a{flex:none!important;padding:10px 10px 14px!important;font-size:12px}.tabs img{width:52px!important;height:52px!important;border-radius:12px!important}
#info{grid-template-columns:1fr;gap:20px;padding:32px 0 24px}#info h1{font-size:40px}#info p{font-size:16px}
.side{align-items:flex-start}
.all{padding-top:48px;padding-bottom:48px}.all h2{font-size:22px;margin-bottom:18px}.cards{grid-template-columns:1fr;gap:12px}.card{min-height:0;padding:20px}
footer .wrap{grid-template-columns:1fr;gap:12px}footer .wrap>div:last-child{text-align:left!important}footer .ppl a{display:inline-block;margin:0 12px 4px 0}
/* ux bounding pass (mobile only) */
header nav{gap:28px}header nav a{position:relative}header nav a::after{content:'';position:absolute;top:-14px;bottom:-14px;left:50%;width:max(calc(100% + 24px),44px);transform:translateX(-50%)}
.tabs{margin:0 -20px;padding:0 20px;border-bottom:0;background:linear-gradient(#2a2a2a,#2a2a2a) bottom/100% 1px no-repeat content-box}.tabs a{width:84px}#ind{bottom:0}
#info p,#info .meta,.card p,.card h3{word-break:keep-all;text-wrap:pretty}
.side{gap:16px}.arrows a{position:relative}.arrows a::after{content:'';position:absolute;inset:-1px}.pp{position:relative}.pp::after{content:'';position:absolute;inset:-13px 0}
footer .ppl a{position:relative;margin:0 16px 16px 0}footer .ppl a::after{content:'';position:absolute;top:-8px;bottom:-8px;left:50%;width:max(calc(100% + 16px),44px);transform:translateX(-50%)}
}
