/* ===================================================================
   cosmos.css — 박준T 수학 공유 디자인 시스템 (우주 × 수학, 다크 단일 테마)
   사용법: <link rel="stylesheet" href="/cosmos.css">  +  <script src="/cosmos.js"></script>
   cosmos.js가 별필드/은하수/성운 배경을 자동 삽입합니다.
=================================================================== */
:root{
  --void:#060815; --void-2:#0a0e27; --nebula:#1a1245;
  --plasma:#6d5cff; --plasma-dim:#4a3fb0; --plasma-l:rgba(109,92,255,.14);
  --cyan:#22d3ee; --cyan-l:rgba(34,211,238,.12); --gold:#f5c86b;
  --starlight:#e8ecff; --mute:#8b93c7; --faint:#5b6291;
  --line:rgba(139,147,199,.14); --line-2:rgba(139,147,199,.24);
  --card:rgba(20,22,52,.9); --card-2:rgba(24,26,60,.94);
  --ok:#34d399; --warn:#fbbf24; --bad:#fb7185;
  --sans:'Pretendard','Apple SD Gothic Neo',-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans KR',sans-serif;
  --serif:'Iowan Old Style','Palatino Linotype','Georgia',serif;
  --mono:ui-monospace,'SFMono-Regular',Menlo,monospace;
  --r:16px; --r-sm:10px; --r-lg:22px;
  --shadow-glow:0 24px 60px -30px var(--plasma);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--void); color:var(--starlight); font-family:var(--sans);
  line-height:1.6; -webkit-font-smoothing:antialiased; word-break:keep-all;
  min-height:100vh; overflow-x:hidden;
}
h1,h2,h3,h4,p,.balance{overflow-wrap:break-word}
h1,h2,h3{text-wrap:balance;line-height:1.14;font-weight:250;letter-spacing:.01em}
a{color:inherit;text-decoration:none}
::selection{background:rgba(109,92,255,.4);color:#fff}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wrap{width:min(1120px,92vw);margin:0 auto}
.serif{font-family:var(--serif);font-style:italic}
.text-cyan{color:var(--cyan)} .text-gold{color:var(--gold)} .text-mute{color:var(--mute)}

/* ── 배경 레이어 (cosmos.js가 삽입) ── */
#cosmos-stars{position:fixed;inset:0;z-index:0;pointer-events:none}
.cosmos-milkyway{position:fixed;z-index:0;inset:-30%;pointer-events:none;transform:rotate(-24deg);
  background:linear-gradient(90deg,transparent 30%,rgba(120,140,255,.06) 43%,
    rgba(190,170,255,.11) 50%,rgba(130,190,255,.05) 57%,transparent 70%);
  filter:blur(26px);opacity:.9;mix-blend-mode:screen}
.cosmos-nebula{position:fixed;border-radius:50%;filter:blur(90px);z-index:0;pointer-events:none}
.cosmos-nebula{filter:blur(60px)}
.cosmos-nebula.n1{width:min(520px,62vw);height:min(520px,62vw);opacity:.34;
  background:radial-gradient(circle,var(--plasma),transparent 70%);top:-160px;left:-110px}
.cosmos-nebula.n2{width:min(460px,54vw);height:min(460px,54vw);opacity:.2;
  background:radial-gradient(circle,var(--cyan),transparent 70%);bottom:-150px;right:-130px}
.cosmos-content{position:relative;z-index:1}

/* ── 타이포 라벨 ── */
.eyebrow{font-size:.72rem;letter-spacing:.4em;text-transform:uppercase;color:var(--cyan);font-weight:600}
.kicker{font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--plasma);
  font-weight:600;display:flex;align-items:center;gap:12px}
.kicker::before{content:'';width:36px;height:1px;background:var(--plasma)}
h1 b,h2 em{font-weight:600}
h2 em{font-family:var(--serif);font-style:italic;color:var(--gold);font-weight:400}

/* ── 버튼 ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 24px;border-radius:100px;font-size:.9rem;font-weight:600;font-family:inherit;
  border:1px solid transparent;cursor:pointer;transition:transform .25s,box-shadow .25s,border-color .25s,background .25s;color:var(--starlight)}
.btn-primary{background:linear-gradient(120deg,var(--plasma),var(--plasma-dim));color:#fff;
  box-shadow:0 0 0 1px rgba(109,92,255,.5),0 12px 40px -12px var(--plasma)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--plasma),0 20px 50px -14px var(--plasma)}
.btn-ghost{border-color:var(--line-2);background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}
.btn-sm{padding:7px 14px;font-size:.78rem}
.btn:disabled{opacity:.5;cursor:default;transform:none}

/* ── 카드 / 패널 ── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;
  position:relative;overflow:hidden;transition:border-color .3s,box-shadow .3s,transform .3s}
.card::before{content:'';position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .4s;
  background:radial-gradient(400px circle at var(--mx,50%) var(--my,0%),var(--plasma-l),transparent 60%)}
.card:hover::before{opacity:1}
.card:hover{border-color:rgba(109,92,255,.5);box-shadow:var(--shadow-glow)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.glyph{font-family:var(--serif);font-style:italic;color:var(--cyan)}
.pill{display:inline-block;padding:3px 11px;border-radius:100px;font-size:.7rem;font-weight:600;
  border:1px solid var(--line);color:var(--mute)}
.pill.on{background:var(--cyan-l);border-color:var(--cyan);color:var(--cyan)}
.pill.ok{background:rgba(52,211,153,.14);border-color:transparent;color:var(--ok)}
.pill.warn{background:rgba(251,191,36,.14);border-color:transparent;color:var(--warn)}
.pill.bad{background:rgba(251,113,133,.14);border-color:transparent;color:var(--bad)}

/* ── 폼 ── */
.field-label{display:block;font-size:.68rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;color:var(--faint);margin-bottom:6px}
.field{width:100%;padding:11px 13px;background:rgba(8,10,25,.6);border:1px solid var(--line-2);
  border-radius:var(--r-sm);color:var(--starlight);font-size:.9rem;font-family:inherit;outline:none;
  transition:border-color .2s,box-shadow .2s}
.field::placeholder{color:var(--faint)}
.field:focus{border-color:var(--plasma);box-shadow:0 0 0 3px var(--plasma-l)}

/* ── 스크롤 리빌 (cosmos.js) ── */
.reveal{opacity:0;transform:translateY(30px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.07s}.reveal.d2{transition-delay:.14s}.reveal.d3{transition-delay:.21s}
.reveal.d4{transition-delay:.28s}.reveal.d5{transition-delay:.35s}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}