/* 우주선 공통 — index.html 과 board.html 이 같이 쓴다 */
:root{
  --void:#080F26; --deep:#0B1533; --hull:#101E44; --navy:#16264F;
  --gold:#F2C14E; --gold-d:#C99A34; --orbit:#7E9BD9; --earth:#2E5FA8;
  --cream:#F3EDE0; --paper:#F5F2EA; --ash:#9AA8C8; --sage:#7FC0A4;
  --kr:'Noto Sans KR',sans-serif; --log:'Gowun Batang',serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{font-family:var(--kr);background:var(--void);color:var(--paper);-webkit-font-smoothing:antialiased;
  line-height:1.6;word-break:keep-all;overflow-wrap:break-word}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:var(--void)}

/* 밤하늘 */
.stars{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 68% 8%,  #F2C14E, transparent),
    radial-gradient(1.2px 1.2px at 84% 32%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 26% 62%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 52% 44%, #C8D4F5, transparent),
    radial-gradient(1.3px 1.3px at 91% 71%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 38% 88%, #F2C14E, transparent),
    radial-gradient(1.4px 1.4px at 7% 78%,  #fff, transparent),
    radial-gradient(1.1px 1.1px at 74% 92%, #C8D4F5, transparent);
  opacity:.85;animation:twinkle 7s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.55}to{opacity:.95}}
.horizon{position:fixed;left:-25%;right:-25%;bottom:-58vw;height:88vw;z-index:0;pointer-events:none;
  border-radius:50%;background:radial-gradient(ellipse at 50% 0%,
    rgba(96,150,235,.34) 0%, rgba(46,95,168,.20) 34%, rgba(11,21,51,0) 68%)}

/* 상단 */
.bar{position:fixed;top:0;inset-inline:0;z-index:50;height:64px;
  background:rgba(8,15,38,.82);backdrop-filter:blur(10px);border-bottom:1px solid rgba(126,155,217,.12)}
.bar .in{max-width:1100px;margin:0 auto;height:100%;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand .mark{width:40px;height:40px;border-radius:50%;display:block;
  transition:transform .35s cubic-bezier(.2,.8,.3,1)}
.brand:hover .mark{transform:rotate(-8deg) scale(1.06)}
.brand b{font-size:15px;font-weight:700;letter-spacing:.2em;display:block}
.brand span{font-size:10px;color:var(--ash);letter-spacing:.06em;display:block}
.menu{display:flex;gap:26px;font-size:13.5px;color:var(--ash)}
.menu a{position:relative;transition:color .2s}
.menu a:hover,.menu a.on{color:var(--paper)}
.menu a::after{content:'';position:absolute;left:0;bottom:-5px;width:0;height:1px;background:var(--gold);transition:width .25s}
.menu a:hover::after,.menu a.on::after{width:100%}
@media(max-width:900px){.menu{display:none}}

/* 버튼 */
.btn{display:inline-block;padding:12px 24px;border-radius:99px;font-size:14px;font-weight:700;
  background:var(--gold);color:var(--void);border:none;cursor:pointer;font-family:var(--kr);transition:.2s}
.btn:hover{background:var(--paper)}
.btn.ghost{background:transparent;color:var(--paper);border:1px solid rgba(126,155,217,.4);font-weight:500}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold);background:transparent}
.btn.sm{padding:8px 16px;font-size:13px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* 뼈대 */
.wrap{width:100%;max-width:1100px;margin:0 auto;padding:0 20px}
section{position:relative;z-index:10}
.eyebrow{font-size:11px;letter-spacing:.24em;color:var(--gold);margin-bottom:18px}
h1{font-size:clamp(30px,4.6vw,50px);font-weight:900;line-height:1.24;letter-spacing:-.02em}
h2{font-size:clamp(26px,4vw,44px);font-weight:900;line-height:1.24;letter-spacing:-.015em}
h3{font-size:clamp(20px,2.6vw,30px);font-weight:900;line-height:1.3}
.gold{color:var(--gold)}
.lead{font-size:clamp(15px,1.7vw,18px);color:rgba(245,242,234,.8);line-height:1.95}
.small{font-size:13px;color:var(--ash);line-height:1.8}

.card{background:rgba(16,30,68,.6);border:1px solid rgba(126,155,217,.16);border-radius:14px;backdrop-filter:blur(8px)}
.chip{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;padding:4px 11px;border-radius:99px}
.chip.now{background:var(--gold);color:var(--void)}
.chip.done{border:1px solid rgba(127,192,164,.5);color:var(--sage)}
.chip.open{background:#DCEBE2;color:#2E6B51}
.chip.inner{background:#F2E3BD;color:#7A5A12}

.rise{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.3,1)}
.rise.shown{opacity:1;transform:none}   /* 'in' 은 .hero .in 그리드와 부딪힌다 */
@media(prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .stars,.float,.orbit{animation:none!important}
}

footer{position:relative;z-index:10;background:var(--deep);border-top:1px solid rgba(126,155,217,.1);margin-top:0}