.site-top {
  --st-top: 30px;
  --st-h: 51px;
  --st-gutter: 60px;
  --st-ease-io: cubic-bezier(0.76, 0, 0.24, 1);
  --st-ease-std: cubic-bezier(0.44, 0, 0.56, 1);
  position: relative; z-index: 30;
  height: calc(var(--st-top) + var(--st-h));
}

.site-top--overlay { position: absolute; top: 0; left: 0; right: 0; height: 0; }


.site-top .pill {
  position: absolute; top: var(--st-top); left: 50%; z-index: 30;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 22px;
  width: auto; height: var(--st-h); margin: 0; padding: 0 18px 0 20px;
  background: #FFFFFF; border-radius: 14px; box-shadow: none;
  color: #000000; animation: none; flex-wrap: nowrap;
}
.site-top .pill a { color: inherit; text-decoration: none; }
.site-top .pill__brand { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }
html[lang="ko"] .site-top .pill__brand { font-weight: 700; }
.site-top .pill__links { display: flex; align-items: center; gap: 22px; overflow: hidden; max-width: 0; opacity: 0; visibility: hidden; flex-wrap: nowrap; justify-content: flex-start; transition: max-width 0.7s var(--st-ease-io), opacity 0.7s var(--st-ease-io), visibility 0s linear 0.7s; }
.site-top .pill__links a { white-space: nowrap; font-size: 16px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; }
html[lang="en"] .site-top .pill__links a { letter-spacing: 0; }
.site-top .pill__links a:hover { opacity: 0.55; }
.site-top .pill.is-open .pill__links { max-width: var(--open-w, 420px); opacity: 1; visibility: visible; transition-delay: 0s; }
.site-top .pill__toggle { width: 44px; height: 44px; display: grid; place-items: center; margin-right: -13px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.site-top .pill__bars { display: grid; gap: 4px; }
.site-top .pill__bars i { display: block; width: 16px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.7s var(--st-ease-io); }
.site-top .pill.is-open .pill__bars i:first-child { transform: translateY(3px) rotate(45deg); }
.site-top .pill.is-open .pill__bars i:last-child { transform: translateY(-3px) rotate(-45deg); }
.site-top .pill :focus-visible { outline: 2px solid #000000; outline-offset: 3px; }


.site-top .langsw {
  position: absolute; z-index: 30;
  top: calc(var(--st-top) + var(--st-h) / 2 - 18px); right: var(--st-gutter); left: auto;
  display: flex; align-items: center; height: 36px; margin: 0;
  color: #FFFFFF; text-shadow: 0 1px 10px rgba(6, 18, 40, 0.35);
  font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0;
  transition: opacity 0.4s var(--st-ease-std);
  animation: none;
}
.site-top .langsw a { position: relative; display: inline-flex; align-items: center; height: 36px; padding: 0 6px; color: inherit; text-decoration: none; opacity: 0.55; transition: opacity 0.4s var(--st-ease-std); }
.site-top .langsw a:last-child { padding-right: 0; }
.site-top .langsw a::after { content: ''; position: absolute; inset: -4px 0; }
.site-top .langsw a:hover { opacity: 1; }
.site-top .langsw a[aria-current] { opacity: 1; font-weight: 700; }
.site-top .langsw__bar { opacity: 0.4; }
.site-top .langsw :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.site-top .langsw.is-dark { color: #000000; text-shadow: none; }

@media (max-width: 767px) {
  .site-top { --st-top: 16px; --st-gutter: 16px; }
  .site-top .pill.is-open { gap: 14px; }
  .site-top .pill.is-open .pill__links { gap: 14px; }
  .site-top .pill.is-open .pill__brand { display: none; }
  .site-top .langsw a { padding: 0 5px; }
  html.is-menu .site-top .langsw { opacity: 0; pointer-events: none; }
}
@media (max-width: 400px) { .site-top .pill { left: calc(50% - 14px); } .site-top .pill.is-open { left: 50%; } }
@media (max-width: 350px) { .site-top .pill { left: calc(50% - 32px); } .site-top .pill.is-open { left: 50%; gap: 10px; padding: 0 14px 0 16px; } .site-top .pill.is-open .pill__links { gap: 10px; } }
@media (max-width: 374px) { html[lang="en"] .site-top .pill:not(.is-open) { gap: 8px; padding: 0 10px 0 14px; } }
@media (max-width: 340px) { html[lang="en"] .site-top .pill.is-open { gap: 8px; padding: 0 12px 0 14px; } html[lang="en"] .site-top .pill.is-open .pill__links { gap: 8px; } }
@media (prefers-reduced-motion: reduce) {
  .site-top .pill__links, .site-top .pill__bars i, .site-top .langsw, .site-top .langsw a { transition: none; }
}


.band-has-more { position: relative; padding-right: 32px !important; }
.band-more {
  position: absolute; right: 0; bottom: 0; width: 26px; height: 26px;
  display: grid; place-items: center; margin: 0; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 50%;
  background: rgba(6, 18, 40, 0.35); color: #FFFFFF; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.band-more[hidden] { display: none; }
.band-more::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; } 
.band-more svg { display: block; width: 14px; height: 14px; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.band-more:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
.band-open {
  position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
  z-index: 60 !important; width: auto !important; max-width: none !important; max-height: min(70svh, 560px) !important;
  margin: 0 !important; padding: 20px 52px calc(20px + env(safe-area-inset-bottom)) 20px !important;
  overflow: auto !important; border-radius: 18px 18px 0 0 !important;
  background: rgba(6, 18, 40, 0.94) !important; -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important;
  color: rgba(255, 255, 255, 0.9) !important; opacity: 1 !important; transform: none !important;
  text-align: left !important; font-size: 12.5px !important; line-height: 1.7 !important; text-shadow: none !important;
}
.band-open > .lg-foot__lines, .band-open > .lgm__lines { display: block !important; -webkit-line-clamp: unset !important; overflow: visible !important; }
.band-open dl, .band-open .site-footer__biz { display: block !important; }
.band-open dl > div { display: block !important; }
.band-open dl > div::after { content: none !important; }
.band-open .site-footer__policy, .band-open .site-footer__bottom { display: block !important; margin-top: 10px !important; }
.band-open .site-footer__policy::before, .band-open .site-footer__bottom::before { content: none !important; }
.band-open .band-more { top: 14px; right: 14px; bottom: auto; }
.band-open .band-more svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .band-more svg { transition: none; } }


.stage__shade::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: min(34vh, 320px);
  
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.385) 0%, rgba(0, 0, 0, 0.196) 45%, rgba(0, 0, 0, 0) 100%);
  opacity: 0; transition: opacity 0.9s ease; pointer-events: none; }
html[data-weather="grass"] .stage__shade::after { opacity: 1; }