/* ============================================================
   Orbit 공통 스타일
   ------------------------------------------------------------
   모든 페이지가 실제로 함께 쓰는 것만 둔다.
   색 변수 · 기본 body · 배경 글로우 · 상단바 · 푸터 · 모션 감속.

   각 페이지의 <style>은 이 파일보다 뒤에 오므로,
   페이지 고유 스타일은 그대로 두고 필요하면 여기 값을 덮어쓰면 된다.
   (예: main.html은 푸터를 사이드바 레이아웃에 맞춰 다시 잡는다)

   상단바를 태그 이름(`nav`)이 아니라 `.site-topbar`로 잡는 이유:
   main.html의 사이드바(<nav class="side-nav">)와
   index.html의 바로가기(<nav class="quick-links">)도 nav 요소라서
   태그로 잡으면 그 둘까지 상단 고정바가 되어 버린다.
   `.topbar`가 아닌 이유는 main.html이 그 이름을 앱 셸의 상단바로 이미 쓰고 있어서다.
   ============================================================ */

:root {
    --bg-color:  #0F172A;
    --accent:    #FF9F43;
    --text-main: #E2E8F0;
    --card-bg:   rgba(30, 41, 59, 0.7);
    --mint:      #4FD1C5;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: 'Pretendard', sans-serif;
    overflow-x: hidden;
}

/* ===== 스크롤바 =====
   기본 스크롤바는 밝은 회색이라 어두운 밤하늘 배경 위에서 혼자 튄다.
   표준 속성(scrollbar-*)과 WebKit 전용을 함께 둔다 — 표준 쪽은 Firefox와
   최신 크롬이, WebKit 쪽은 사파리와 옛 크롬이 읽는다.
   폭까지 줄이면 터치패드가 아닌 마우스 사용자가 잡기 어려워지므로 색만 맞춘다. */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,159,67,0.28) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(255,159,67,0.25);
    border-radius: 99px;
    /* 투명 테두리 + background-clip으로 트랙과 사이를 띄운다 */
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,159,67,0.45); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ===== 배경 글로우 ===== */
.bg-glow {
    position: fixed; top: -10%; right: -10%;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(255,159,67,0.08) 0%, rgba(15,23,42,0) 70%);
    pointer-events: none; z-index: -1;
}

/* ===== 상단바 ===== */
.site-topbar {
    position: fixed; top: 0; width: 100%;
    padding: 1.5rem 2rem;
    display: flex; justify-content: space-between; align-items: center;
    z-index: 100; backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255,159,67,0.1);
}
.logo { font-weight: 700; letter-spacing: 2px; color: var(--accent); cursor: pointer; text-decoration: none; }
.nav-back {
    font-size: 12px; color: #64748B; cursor: pointer;
    border: 1px solid rgba(255,255,255,0.08); border-radius: 8px;
    padding: 6px 12px; transition: 0.2s; background: transparent;
    font-family: 'Pretendard';
}
.nav-back:hover { color: var(--accent); border-color: rgba(255,159,67,0.3); }

/* ===== 푸터 ===== */
.site-footer {
    max-width: 720px; margin: 60px auto 0; padding: 26px 20px 36px;
    border-top: 1px solid rgba(255,159,67,0.1); text-align: center;
}
.foot-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 13px; }
.foot-links a { font-size: 12px; color: #64748B; text-decoration: none; transition: color 0.2s; }
.foot-links a:hover { color: var(--accent); }
.foot-sign {
    font-size: 11.5px; color: #64748B; letter-spacing: 0.03em;
    display: flex; align-items: center; justify-content: center; gap: 5px;
}
.foot-star { width: 13px; height: 13px; flex-shrink: 0; animation: foot-twinkle 2.8s ease-in-out infinite; }
@keyframes foot-twinkle {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.85; }
    50%      { transform: scale(1.2) rotate(18deg); opacity: 1; }
}

/* ============================================================
   콘텐츠 페이지 공통 (lucky · fortune · sky가 함께 쓴다)
   ------------------------------------------------------------
   세 페이지에 똑같이 복붙되어 있던 히어로 · SEO 본문 · 안내 박스 ·
   광장 CTA를 한곳으로 모았다. 페이지 고유의 추가 규칙
   (lucky의 code/tiny-note, sky의 .notice a)은 각 페이지에 남긴다.
   ============================================================ */
.hero { margin-bottom: 26px; }
.hero h1 { font-size: 2rem; font-weight: 200; margin: 0; line-height: 1.3; }
.hero h1 strong { color: var(--accent); font-weight: 700; }
.hero p { color: #94A3B8; margin-top: 12px; font-size: 0.95rem; line-height: 1.7; }

.seo-content { margin-top: 44px; }
.seo-content h2 {
    font-size: 1.15rem; font-weight: 600; margin: 36px 0 12px;
    padding-bottom: 8px; border-bottom: 1px solid rgba(255,159,67,0.12);
}
.seo-content h3 { font-size: 0.95rem; font-weight: 600; margin: 20px 0 6px; color: #CBD5E1; }
.seo-content p { color: #94A3B8; font-size: 14px; line-height: 1.8; margin: 0 0 12px; }
.seo-content ol, .seo-content ul { color: #94A3B8; font-size: 14px; line-height: 1.8; padding-left: 20px; margin: 0 0 12px; }
.seo-content li { margin-bottom: 6px; }
.seo-content strong { color: var(--accent); font-weight: 600; }

.notice {
    margin-top: 28px; padding: 16px 18px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px; font-size: 12.5px; color: #64748B; line-height: 1.7;
}

.cta-lounge {
    display: block; margin-top: 32px; padding: 20px 22px; text-decoration: none;
    background: linear-gradient(135deg, rgba(255,159,67,0.12), rgba(255,183,77,0.04));
    border: 1px solid rgba(255,159,67,0.25); border-radius: 16px;
    transition: 0.2s;
}
.cta-lounge:hover { border-color: rgba(255,159,67,0.5); transform: translateY(-2px); }
.cta-lounge .ct { font-size: 15px; font-weight: 700; color: var(--text-main); margin-bottom: 5px; }
.cta-lounge .cd { font-size: 12.5px; color: #94A3B8; line-height: 1.6; }

@media (max-width: 768px) {
    .hero h1 { font-size: 1.55rem; }
}

/* ============================================================
   모션 감속 (prefers-reduced-motion)
   ------------------------------------------------------------
   이 사이트는 유성우·파티클·반짝임이 계속 움직인다.
   전정기관이 예민하거나 멀미가 있는 분들에게는 그게 실제로 괴로우므로,
   기기에서 "동작 줄이기"를 켠 경우에는 움직임을 걷어낸다.

   애니메이션을 0으로 만들지 않고 0.01ms로 두는 이유:
   animation 완료(animationend)를 기다렸다 다음 일을 하는 코드가 있어도
   그 이벤트는 그대로 발생하기 때문에 화면이 멈춰버리지 않는다.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* 끝난 자리에 흔적만 남는 장식들은 아예 감춘다.
       (유성우는 마지막 프레임이 opacity:0이라 어차피 보이지 않는다) */
    .starfield, .meteor { display: none !important; }

    /* 반짝이는 별은 움직임만 멈추고 그대로 보이게 둔다 */
    .foot-star { animation: none !important; opacity: 0.9 !important; }

    /* 대문의 "아무곳이나 클릭" 힌트는 기본 opacity가 0이고 애니메이션으로만
       나타난다. 애니메이션을 1회로 줄이면 힌트가 영영 안 보이므로,
       여기서는 애니메이션 없이 고정된 밝기로 보여준다. */
    .click-hint { animation: none !important; opacity: 0.5 !important; }
}