:root { --ease: cubic-bezier(0.22, 1, 0.36, 1); }
html { scroll-behavior: smooth; }
body { background: #000000; color: #FFFFFF; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.heading-grad {
  background: linear-gradient(to right, #FFFFFF, #9B9B9B);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.reveal { opacity: 0; transform: translateY(32px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.nav-link-item { opacity: 0; transform: translateY(24px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
#menu-panel.is-open .nav-link-item { opacity: 1; transform: none; }
#menu-panel { opacity: 0; pointer-events: none; transition: opacity 500ms var(--ease); }
#menu-panel.is-open { opacity: 1; pointer-events: auto; }
.bar { transition: transform 500ms var(--ease), opacity 300ms var(--ease); }
.menu-open .bar-1 { transform: translateY(7px) rotate(45deg); }
.menu-open .bar-2 { opacity: 0; }
.menu-open .bar-3 { transform: translateY(-7px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .reveal, .nav-link-item { transform: none; transition: opacity 300ms linear; }
  .bar { transition: opacity 300ms linear; }
  html { scroll-behavior: auto; }
}

/* article body (newsinfo pages): cleaned text from the original articles */
.news-body { color: rgba(255,255,255,0.82); font-size: 16px; line-height: 1.9; overflow-wrap: anywhere; }
.news-body p { margin-top: 1.25em; }
.news-body p.tc { text-align: center; }
.news-body strong { color: #FFFFFF; font-weight: 700; }
.news-body h2 { margin-top: 2em; color: #FFFFFF; font-size: 24px; line-height: 32px; font-weight: 600; }
.news-body img { display: block; margin: 1.5em auto 0; max-width: 100%; height: auto; border-radius: 8px; }
.news-body ul, .news-body ol { margin-top: 1.25em; padding-left: 1.5em; list-style: revert; }
.news-body a { color: #C9A24B; text-decoration: underline; text-underline-offset: 3px; }

/* Korean pages: Korean system fonts first, and keep words together when wrapping */
html:lang(ko) .font-sans { font-family: 'Manrope', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif; }
html:lang(ko) body { word-break: keep-all; }
