/* version: 0.14.0 — 시안 중의 공통 우주 배경과 장식. 공식 로고 원본은 가공하지 않아. */
body { background-color: #101421; background-image: radial-gradient(circle at 12% 24%, #e4d9ff30 1px, transparent 1.5px), linear-gradient(#c9baff05 1px, transparent 1px), linear-gradient(90deg, #c9baff05 1px, transparent 1px); background-size: 197px 173px, 40px 40px, 40px 40px; }
.brand-logos { position: relative; }
.brand-star { position: absolute; width: 4px; height: 4px; background: #e8dfff; transform: rotate(45deg); box-shadow: 0 0 9px #d6c0ff88; pointer-events: none; animation: brand-starlight 10s ease-in-out infinite; }
.brand-star:nth-of-type(1) { left: 1px; top: -9px; }
.brand-star:nth-of-type(2) { right: 0; bottom: -8px; animation-delay: -4s; }
.brand-star:nth-of-type(3) { left: 46%; top: -15px; animation-delay: -2s; }
.brand-star:nth-of-type(4) { right: -6px; top: 35%; animation-delay: -6s; }
.eyebrow, .english-name, .member-count, .card-number, .navigation span { font-family: "PlliTitleA", sans-serif; }
.hero { margin-top: 26px; padding: 34px 30px 0; gap: 0 20px; background: linear-gradient(120deg, #1b2135e8, #15192ae8); border: 1px solid #c6b3ff50; border-radius: 2px 24px 2px 24px; }
.hero::after { content: "ORBIT / 01" / ""; position: absolute; top: 14px; right: 22px; color: #c6b9df; font: 9px "PlliTitleA", sans-serif; letter-spacing: 2px; }
.hero-copy { padding-top: 10px; align-self: center; }
.hero h1 { font-size: clamp(32px, 3.5vw, 49px); }
.hero h1 em { color: #d6c4ff; }
.hero-bottom { border-top: 1px solid #b8a0e433; border-bottom: 0; margin-top: 20px; }
.orbit-art { display: grid; place-items: center; min-width: 0; padding: 10px 0; }
.hero-universe { position: relative; width: min(100%, 366px); aspect-ratio: 1; }
.hero-planet { position: absolute; inset: 17%; border-radius: 50%; overflow: hidden; box-shadow: 0 0 28px #c2a4ff18; }
.hero-planet img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.universe-ring { position: absolute; inset: 10%; border: 1px solid #c3acff55; border-radius: 50%; animation: universe-revolve 80s linear infinite; }
.universe-ring.outer { inset: 4%; border-style: dashed; border-color: #c3acff25; animation-duration: 110s; animation-direction: reverse; }
.satellite-path { position: absolute; inset: 7%; border-radius: 50%; animation: universe-revolve 65s linear infinite; }
.satellite-path i { position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: #d2b9ed; box-shadow: 0 0 12px #c5b3ee66; }
.satellite-path.second { animation-delay: -22s; animation-duration: 90s; animation-direction: reverse; }
.satellite-path.second i { width: 7px; height: 7px; background: #a8c5e5; }
.hero-text-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: universe-revolve 130s linear infinite; }
.hero-text-ring text { fill: #ddd3f1; font: 12px "PlliTitleA", sans-serif; letter-spacing: 2.7px; }
/* 모서리를 잘라내는 clip-path는 카드의 키보드 초점선을 자르므로 사용하지 않아. */
.member-card, .album-card, .mmmm-card, .video-card, .board-post { border-color: #ba9dff55; border-radius: 2px 17px 2px 17px; box-shadow: inset 0 0 0 3px #bba2ff05; }
.card-content { border-top: 2px solid #c2a4ff80; }
.portrait .card-number { background: #15192adb; padding: 3px 8px; border-left: 2px solid #c2a4ff; }
@keyframes brand-starlight { 0%, 100% { opacity: .25; scale: .85; } 50% { opacity: .85; scale: 1.1; } }
@keyframes universe-revolve { to { transform: rotate(360deg); } }
@media (max-width: 600px) {
  .hero { padding: 30px 18px 0; }
  .hero h1 { font-size: clamp(32px, 9vw, 43px); }
  .orbit-art { margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .brand-star { opacity: .65; scale: 1; }
}