@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');
:root{--site-header-height:89px;--site-gold:#d8c39a;--site-mint:#b9f6d1;--site-bg:#080f14;--site-line:#ffffff20}
html{scroll-padding-top:calc(var(--site-header-height) + 24px);scrollbar-gutter:stable}
body{padding-top:var(--site-header-height);background:var(--site-bg);font-family:'Noto Sans KR',sans-serif;-webkit-font-smoothing:antialiased}
.site-header,.site-header *,.site-footer,.site-footer *{box-sizing:border-box}
.site-header{position:fixed;inset:0 0 auto;z-index:50;background:#091217f5;border-bottom:1px solid var(--site-line);backdrop-filter:blur(20px);font:400 14px/1.5 'Noto Sans KR',sans-serif;color:#edf4f1}
.site-topbar{width:100%;max-width:2200px;min-height:88px;margin:auto;padding:0 4.5%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:36px}
.site-brand{display:inline-flex;align-items:center;gap:11px;white-space:nowrap;color:#f5f8f6;text-decoration:none;font-size:24px;font-weight:800;letter-spacing:-1px;line-height:1.5}
.site-brand img{width:36px;height:36px;object-fit:contain;flex:none}.site-brand i{width:5px;height:5px;border-radius:50%;background:var(--site-gold);align-self:flex-end;margin-bottom:9px}
.site-nav{display:flex;justify-content:center;gap:clamp(16px,1.8vw,36px);min-width:0;scrollbar-width:thin;scrollbar-color:#69766d transparent}
.site-nav>a{position:relative;display:flex;align-items:center;min-height:88px;flex:none;color:#a9b8ba;text-decoration:none;white-space:nowrap;font-size:13px;font-weight:500;transition:color .2s}
.site-nav>a:after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--site-gold);transform:scaleX(0);transition:transform .2s}.site-nav>a:hover,.site-nav>a[aria-current]{color:#fff}.site-nav>a[aria-current]:after,.site-nav>a:hover:after{transform:scaleX(1)}
.site-actions{display:flex;align-items:center;gap:16px;min-width:0}.site-languages{position:relative;border:0;margin:0}.site-languages summary{display:flex;align-items:center;gap:9px;cursor:pointer;list-style:none;padding:10px 0;font:400 12px/1.5 'Noto Sans KR',sans-serif;white-space:nowrap;color:#c1cccb}.site-languages summary::-webkit-details-marker{display:none}.site-languages summary svg{fill:none;stroke:currentColor;stroke-width:1.3}.site-languages summary span{color:inherit;transform:none!important}.site-languages summary b{font-weight:400}
.site-languages nav{position:absolute;right:0;top:calc(100% + 14px);display:grid;width:215px;max-height:65vh;overflow:auto;padding:8px;background:#111e24;border:1px solid #d8c39a50;border-radius:7px;box-shadow:0 18px 60px #0008}.site-languages nav a{padding:10px 13px;border-radius:3px;text-decoration:none;color:#c6d2cf;font-size:13px;line-height:1.5}.site-languages nav a:hover,.site-languages nav a[aria-current]{color:var(--site-mint);background:#203235}
.site-play{display:flex;align-items:center;justify-content:center;gap:19px;padding:12px 20px;border:1px solid #c4d8ce66;border-radius:3px;background:#b9f6d10a;color:#eef8f3;text-decoration:none;font-size:12px;font-weight:600;white-space:nowrap;transition:background .2s,border-color .2s}.site-play:hover{background:#b9f6d121;border-color:var(--site-mint)}.site-play b{font-size:15px;font-weight:400}
.site-skip{position:fixed;top:-100px;left:20px;z-index:100;padding:12px 20px;background:#b9f6d1;color:#102820}.site-skip:focus{top:12px}.site-header a:focus-visible,.site-header summary:focus-visible,.site-footer a:focus-visible{outline:2px solid var(--site-mint);outline-offset:4px}
.site-footer{padding:60px 6%;display:flex;align-items:flex-start;justify-content:space-between;gap:45px;border-top:1px solid var(--site-line);background:#070d11;color:#b4c4c3}.site-footer p{font-size:12px;line-height:1.8;margin:18px 0 0;max-width:380px;color:#8a9b9e}.site-footer nav{display:grid;grid-template-columns:repeat(4,auto);gap:18px 30px;margin:0;font-size:12px;line-height:1.6}.site-footer nav a{color:#aebfbd;text-decoration:none}.site-footer nav a:hover{color:var(--site-mint)}
@media(max-width:1500px){:root{--site-header-height:134px}.site-topbar{grid-template-columns:1fr auto;gap:0 24px;min-height:0}.site-brand,.site-actions{min-height:80px}.site-nav{grid-column:1/-1;grid-row:2;justify-content:flex-start;gap:30px;overflow-x:auto;border-top:1px solid #ffffff0b}.site-nav>a{min-height:52px}.site-actions .site-brand{min-height:0}}
@media(max-width:700px){:root{--site-header-height:124px}.site-topbar{padding:0 5%;gap:0 12px}.site-brand{font-size:21px;gap:8px;min-height:72px}.site-brand img{width:30px;height:30px}.site-brand i{display:none}.site-actions{min-height:72px;gap:13px}.site-languages summary span,.site-languages summary b{display:none}.site-languages summary{padding:12px 3px}.site-play{padding:10px 12px;gap:10px;font-size:11px;max-width:155px;white-space:normal;line-height:1.4;text-align:center}.site-nav{gap:25px}.site-nav>a{min-height:50px;font-size:12px}.site-footer{padding:42px 6%;display:block}.site-footer nav{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:32px;gap:18px}.site-footer .site-brand{min-height:0}.site-languages nav{right:-85px}}
@media(max-width:360px){.site-brand{font-size:18px}.site-brand img{width:26px;height:26px}.site-actions{gap:8px}.site-play{max-width:125px;padding:9px}.site-topbar{gap:0 8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.site-header *{transition:none!important}}

.site-brand i{align-self:center;margin:0;transform:translateY(7px)}.site-nav{scrollbar-width:none}.site-nav::-webkit-scrollbar{display:none}
/* Color accents across the shared navigation. */
.site-header{background:linear-gradient(110deg,#111c35f5,#102e37f5 55%,#231b3bf5);border-bottom-color:#6fbbd750}
.site-nav>a{--nav-color:#75dfff}.site-nav>a:nth-child(2){--nav-color:#c4a2ff}.site-nav>a:nth-child(3){--nav-color:#6ee8c4}.site-nav>a:nth-child(4){--nav-color:#ffce78}
.site-nav>a:hover,.site-nav>a[aria-current]{color:var(--nav-color)}.site-nav>a[aria-current]::after{background:var(--nav-color);box-shadow:0 0 12px var(--nav-color)}
.site-play{background:linear-gradient(110deg,#53cbe3,#9b87ed);color:#091724;border-color:transparent}.site-play:hover{background:linear-gradient(110deg,#8be6f5,#bca7ff);color:#091724}
.site-footer{padding-top:34px;padding-bottom:34px;background:linear-gradient(110deg,#0e1b2c,#17172a)}
@media(min-width:1201px) and (max-width:1500px){:root{--site-header-height:89px}.site-topbar{grid-template-columns:auto minmax(0,1fr) auto;gap:24px;min-height:88px}.site-brand,.site-actions{min-height:0}.site-nav{grid-column:auto;grid-row:auto;border-top:0;justify-content:center;gap:23px}.site-nav>a{min-height:88px}}