.stage-shell { background: var(--paper); color: var(--night); font-family: var(--font-sans); }
.stage-shell button, .stage-shell a { -webkit-tap-highlight-color: transparent; }
.stage-shell a:focus-visible, .stage-shell button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 5px; }
.stage-shell h1, .stage-shell h2, .stage-shell h3 { word-break: keep-all; overflow-wrap: anywhere; }
.stage-shell p { word-break: keep-all; }
.stage-shell .studio-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.stage-header { position: sticky; top: 0; z-index: 60; color: var(--lavender-white); background: rgb(12 16 48 / 96%); border-bottom: 1px solid rgb(244 241 255 / 9%); }
.stage-header-inner { max-width: 1600px; min-height: 92px; padding: 0 clamp(24px, 3.35vw, 56px); margin: 0 auto; display: flex; align-items: center; gap: clamp(26px, 3vw, 48px); }
.stage-header .brand { flex: none; }
.stage-desktop-nav { display: flex; align-items: center; gap: clamp(20px, 2.05vw, 32px); flex: 1; }
.stage-desktop-nav > a, .stage-nav-trigger { padding: 18px 0; white-space: nowrap; color: var(--lavender-white); font-size: 15px; font-weight: 600; line-height: 1.4; }
.stage-desktop-nav > a:hover, .stage-nav-trigger:hover, .stage-nav-group[data-open="true"] .stage-nav-trigger { color: var(--star-cyan); }
.stage-nav-trigger { background: none; border: 0; display: flex; gap: 5px; align-items: center; }
.stage-nav-trigger svg { transition: transform 180ms; }
.stage-nav-group[data-open="true"] .stage-nav-trigger svg { transform: rotate(180deg); }
.stage-nav-group { position: relative; }
.stage-dropdown-wrap { position: absolute; top: 100%; left: -24px; padding-top: 15px; width: 360px; visibility: hidden; opacity: 0; transform: translateY(-4px); transition: opacity 180ms var(--ease-panel), transform 180ms var(--ease-panel), visibility 180ms; }
.stage-nav-group[data-open="true"] .stage-dropdown-wrap { visibility: visible; opacity: 1; transform: translateY(0); transition-property: opacity, transform; }
.stage-dropdown { padding: 12px; border: 1px solid rgb(244 241 255 / 12%); border-radius: 22px; background: #1a2040; box-shadow: 0 20px 52px rgb(0 0 0 / 22%); }
.stage-dropdown-item { display: flex; align-items: center; gap: 14px; padding: 17px 12px; color: var(--lavender-white); border-radius: 13px; text-decoration: none; }
.stage-dropdown-item:hover, .stage-dropdown-item:focus-visible { background: rgb(244 241 255 / 7%); }
.stage-menu-icon { width: 44px; height: 44px; border-radius: 12px; background: rgb(126 224 255 / 9%); color: var(--star-cyan); display: grid; place-items: center; flex: none; }
.stage-dropdown-item > span:nth-child(2) { flex: 1; }
.stage-dropdown-item strong { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 650; }
.stage-dropdown-item > span > span { display: block; color: var(--dark-muted); font-size: 12px; margin-top: 4px; }
.stage-dropdown-item > svg { opacity: .55; flex: none; }
.stage-soon { display: inline-flex; align-items: center; color: var(--dark-muted); border: 1px solid rgb(185 188 224 / 25%); border-radius: 5px; padding: 2px 6px; font-size: 10px; line-height: 1.3; font-weight: 500; white-space: nowrap; }
.stage-header-actions { display: flex; gap: 22px; align-items: center; }
.stage-studio-entry { color: var(--lavender-white); font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none; }
.stage-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 17px 25px; border-radius: 12px; font-size: 17px; line-height: 1.3; font-weight: 700; text-decoration: none; border: 1px solid transparent; transition: background 180ms, border-color 180ms; }
.stage-button-primary { background: var(--action); color: var(--action-ink); }
.stage-button-primary:hover { background: color-mix(in srgb, var(--action) 90%, var(--action-ink)); }
.stage-button-secondary { border-color: var(--line); background: transparent; color: var(--ink); }
.stage-button-secondary:hover { background: var(--accent-soft); }
.stage-header-actions .stage-button { min-height: 44px; padding: 12px 16px; font-size: 14px; border-radius: 10px; white-space: nowrap; }
.stage-menu-toggle, .stage-menu-close { display: none; color: var(--lavender-white); background: none; border: 0; width: 44px; height: 44px; align-items: center; justify-content: center; }
.stage-skip-link { position: fixed; top: 8px; left: 12px; transform: translateY(-180%); background: var(--star-cyan); color: var(--cyan-ink); padding: 12px 20px; border-radius: 8px; z-index: 110; }
.stage-skip-link:focus { transform: none; }
.stage-mobile-sheet { position: fixed; inset: 0; z-index: 100; overflow-y: auto; overscroll-behavior: contain; background: var(--night-deep); color: var(--lavender-white); padding: 0 24px 36px; animation: stage-sheet-in 180ms both; }
.stage-mobile-top { min-height: 84px; display: flex; justify-content: space-between; align-items: center; }
.stage-mobile-top .stage-menu-close { display: inline-flex; margin-right: -8px; }
.stage-mobile-major { padding: 25px 0; display: flex; justify-content: space-between; align-items: center; font-size: 24px; font-weight: 700; border-bottom: 1px solid var(--line); }
.stage-mobile-group { padding: 24px 0; border-bottom: 1px solid var(--line); }
.stage-mobile-group p { color: var(--dark-muted); font-size: 13px; margin-bottom: 12px; }
.stage-mobile-group a { display: flex; align-items: center; gap: 12px; padding: 14px 0; font-size: 19px; font-weight: 600; }
.stage-mobile-group a > svg:first-child { color: var(--star-cyan); }
.stage-mobile-bottom-links { display: flex; gap: 32px; padding: 27px 0; font-size: 19px; font-weight: 600; }
.stage-mobile-sheet .stage-mobile-studio { width: 100%; min-height: 52px; margin-bottom: 13px; font-size: 17px; }
.stage-mobile-sheet .stage-button { width: 100%; }
.stage-footer { padding: 64px var(--page-gutter) 24px; color: var(--lavender-white); background: var(--night-deep); }
.stage-footer-top, .stage-footer-bottom { max-width: var(--content-width); margin: 0 auto; display: flex; }
.stage-footer-top { gap: 48px; align-items: flex-start; padding-bottom: 52px; }
.stage-footer-top > div { flex: 1; }
.stage-footer-top p { font-size: 16px; line-height: 1.65; color: var(--dark-muted); margin-top: 21px; }
.stage-footer-top nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 38px; padding-top: 8px; }
.stage-footer-top nav a { color: var(--lavender-white); font-size: 15px; }
.stage-footer-studio { padding-top: 7px; color: var(--star-cyan); font-size: 16px; text-decoration: none; }
.stage-footer-bottom { padding-top: 24px; border-top: 1px solid var(--line); align-items: center; gap: 28px; color: var(--dark-muted); font-size: 12px; }
.stage-footer-bottom > div { display: flex; gap: 20px; }
.stage-footer-bottom > span:last-child { margin-left: auto; }
@keyframes stage-sheet-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1120px) {
  .stage-header-inner { min-height: 78px; justify-content: space-between; padding: 0 24px; }
  .stage-desktop-nav, .stage-header-actions { display: none; }
  .stage-menu-toggle { display: inline-flex; margin-right: -8px; }
}
@media (max-width: 767px) {
  .stage-header-inner { min-height: 76px; padding: 0 22px; }
  .stage-shell .brand.brand img.brand-logo { width: 119px; height: 35px; }
  .stage-footer { padding-top: 46px; }
  .stage-footer-top { display: grid; grid-template-columns: 1fr; gap: 30px; padding-bottom: 38px; }
  .stage-footer-top nav { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 320px; }
  .stage-footer-studio { justify-content: flex-start !important; }
  .stage-footer-bottom { flex-wrap: wrap; gap: 16px 24px; }
  .stage-footer-bottom > span:last-child { width: 100%; margin-left: 0; }
  .stage-footer-bottom > div { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .stage-shell *, .stage-shell *::before, .stage-shell *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* 웹 헤더 CTA: Galaxy Glow 레퍼런스 / Magic UI Shimmer Button 구조 참고.
   독립 CSS 구현, 출처 docs/button-motion-source.md. */
@property --alma-orbit-angle { syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes alma-cta-orbit { to { --alma-orbit-angle:360deg; } }
@media(min-width:1121px) {
 .stage-header.stage-shell .stage-header-actions .stage-button-primary {
  position:relative; isolation:isolate; min-height:48px; padding:12px 24px;
  border:1px solid #344253; border-radius:999px; background:#090f1a; color:#f4f6fa;
  box-shadow:inset 0 0 18px #7ee0ff08; transition:background .25s,box-shadow .25s;
 }
 .stage-header-actions .stage-button-primary::before {
  content:''; position:absolute; inset:-1px; padding:2px; border-radius:inherit; pointer-events:none;
  background:conic-gradient(from var(--alma-orbit-angle),transparent 0deg 200deg,#91b4ff55 250deg,#7ee0ff 310deg,#e0f8ff 330deg,transparent 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:alma-cta-orbit 5s linear infinite;
 }
 .stage-header-actions .stage-button-primary::after {
  content:''; position:absolute; inset:4px; border-radius:inherit; pointer-events:none; z-index:-1; opacity:.3;
  background:radial-gradient(circle at 12% 30%,#c2edff 0 1px,transparent 1.5px),radial-gradient(circle at 82% 73%,#91b4ff 0 1px,transparent 1.5px),radial-gradient(circle at 91% 26%,#fff 0 .7px,transparent 1px),radial-gradient(ellipse at 15% 50%,#7ee0ff22,transparent 60%);
  transition:opacity .25s;
 }
 .stage-header.stage-shell .stage-header-actions .stage-button-primary:is(:hover,:focus-visible) {
  background:#0d1929; color:#fff; box-shadow:0 0 18px #7ee0ff25,inset 0 0 16px #7ee0ff0d;
 }
 .stage-header-actions .stage-button-primary:is(:hover,:focus-visible)::after { opacity:.8; }
}
@media(prefers-reduced-motion:reduce) {
 .stage-header-actions .stage-button-primary::before { animation:none; --alma-orbit-angle:35deg; }
 .stage-header-actions .stage-button-primary,.stage-header-actions .stage-button-primary::after { transition:none; }
}
