/* ============================================================
   EDUVERSE Design System — v1.0
   모두의교육 EDUVERSE  |  정적 HTML + CDN 표준
   이 파일이 모든 화면의 "정본" 디자인 토큰입니다.
   사이트별 커스터마이즈는 --ev-accent 계열만 오버라이드.
   ============================================================ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

:root{
  /* ---- 우주 배경 ---- */
  --ev-void:        #04050c;
  --ev-deep:        #080b1a;
  --ev-nebula-1:    #131a3d;
  --ev-nebula-2:    #241540;
  --ev-nebula-3:    #0a2338;

  /* ---- 표면 (글래스) ---- */
  --ev-surface:     rgba(255,255,255,.045);
  --ev-surface-2:   rgba(255,255,255,.075);
  --ev-surface-3:   rgba(255,255,255,.11);
  --ev-line:        rgba(255,255,255,.10);
  --ev-line-strong: rgba(255,255,255,.20);
  --ev-blur:        18px;

  /* ---- 텍스트 ---- */
  --ev-text:        #EEF1FB;
  --ev-text-2:      #A8B0CC;
  --ev-text-3:      #6C7391;

  /* ---- 액센트 ---- */
  --ev-accent:      #6D8BFF;   /* 프라이머리 · 링크 · 포커스 */
  --ev-accent-2:    #A87BFF;   /* 세컨더리 · 그라데이션 짝 */
  --ev-gold:        #FFC24B;   /* 에그머니 · 보상 */
  --ev-mint:        #45E0A8;   /* 성공 · 성장 */
  --ev-coral:       #FF6B81;   /* 경고 · 마감임박 */
  --ev-cyan:        #4CC9F0;   /* 정보 · 데이터 */

  /* ---- 행성 팔레트 (모듈군 색상 코드) ---- */
  --pl-career:      #6D8BFF;   /* 진로·진학 */
  --pl-study:       #45E0A8;   /* 학습·공부 */
  --pl-record:      #A87BFF;   /* 학생부·포트폴리오 */
  --pl-book:        #FFC24B;   /* 출판·독서 */
  --pl-admin:       #4CC9F0;   /* 교사 행정 */
  --pl-parent:      #FF8FB1;   /* 학부모 */
  --pl-future:      #FF6B81;   /* 미래역량·창업 */

  /* ---- 형태 ---- */
  --r-sm: 10px;  --r-md: 16px;  --r-lg: 24px;  --r-xl: 32px;  --r-pill: 999px;

  /* ---- 그림자 / 발광 ---- */
  --sh-1: 0 2px 12px rgba(0,0,0,.35);
  --sh-2: 0 12px 40px rgba(0,0,0,.45);
  --glow: 0 0 32px rgba(109,139,255,.35);

  /* ---- 레이아웃 ---- */
  --wrap: 1240px;
  --nav-h: 68px;

  /* ---- 이징 ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ============ RESET ============ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; min-height:100vh;
  font-family:"Pretendard Variable",Pretendard,-apple-system,"Segoe UI",system-ui,sans-serif;
  font-size:16px; line-height:1.65; letter-spacing:-.01em;
  color:var(--ev-text);
  background:var(--ev-void);
  -webkit-font-smoothing:antialiased;
}
img,svg,canvas{ display:block; max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:800; letter-spacing:-.035em; line-height:1.2; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

/* ============ 우주 배경 ============ */
.ev-space{ position:fixed; inset:0; z-index:-2; background:
    radial-gradient(1200px 800px at 12% -5%,  var(--ev-nebula-1) 0%, transparent 60%),
    radial-gradient(1000px 700px at 92% 8%,   var(--ev-nebula-2) 0%, transparent 58%),
    radial-gradient(1100px 900px at 50% 110%, var(--ev-nebula-3) 0%, transparent 60%),
    var(--ev-void);
}
.ev-stars{ position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.55;
  background-image:
    radial-gradient(1.4px 1.4px at 20% 30%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 70% 18%, #cfe0ff, transparent),
    radial-gradient(1px   1px   at 44% 72%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 85% 62%, #ffe9c0, transparent),
    radial-gradient(1px   1px   at 12% 84%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 58% 46%, #d7c9ff, transparent);
  background-size:520px 520px,460px 460px,380px 380px,600px 600px,440px 440px,500px 500px;
  animation:ev-drift 220s linear infinite;
}
@keyframes ev-drift{ to{ background-position:520px 520px,-460px 460px,380px -380px,-600px 600px,440px 440px,-500px -500px; } }

/* ============ 레이아웃 ============ */
.wrap{ width:min(100% - 40px, var(--wrap)); margin-inline:auto; }
.stack{ display:flex; flex-direction:column; }
.row{ display:flex; align-items:center; }
.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-24{gap:24px}
.grid{ display:grid; gap:20px; }
.section{ padding:clamp(56px,8vw,104px) 0; }

/* ============ 글래스 카드 ============ */
.card{
  background:var(--ev-surface);
  border:1px solid var(--ev-line);
  border-radius:var(--r-lg);
  backdrop-filter:blur(var(--ev-blur));
  -webkit-backdrop-filter:blur(var(--ev-blur));
  box-shadow:var(--sh-1);
  transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.card--pad{ padding:24px; }
.card--hover:hover{ transform:translateY(-4px); border-color:var(--ev-line-strong); box-shadow:var(--sh-2); }

/* ============ 버튼 ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:46px; padding:0 22px; border:1px solid transparent; border-radius:var(--r-pill);
  font-weight:700; font-size:.94rem; cursor:pointer; white-space:nowrap;
  transition:transform .2s var(--ease), filter .2s var(--ease), background .2s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn:focus-visible{ outline:2px solid var(--ev-accent); outline-offset:3px; }
.btn--primary{ background:linear-gradient(135deg,var(--ev-accent),var(--ev-accent-2)); color:#fff; box-shadow:0 8px 26px rgba(109,139,255,.35); }
.btn--primary:hover{ filter:brightness(1.08); }
.btn--ghost{ background:var(--ev-surface-2); border-color:var(--ev-line-strong); color:var(--ev-text); }
.btn--ghost:hover{ background:var(--ev-surface-3); }
.btn--gold{ background:linear-gradient(135deg,#FFD27A,var(--ev-gold)); color:#3A2600; box-shadow:0 8px 26px rgba(255,194,75,.28); }
.btn--sm{ height:36px; padding:0 15px; font-size:.84rem; }
.btn--lg{ height:54px; padding:0 30px; font-size:1.02rem; }
.btn--block{ width:100%; }

/* ============ 배지 / 칩 ============ */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:var(--r-pill);
  background:var(--ev-surface-2); border:1px solid var(--ev-line);
  font-size:.76rem; font-weight:700; color:var(--ev-text-2); letter-spacing:0;
}
.badge--gold{ background:rgba(255,194,75,.13); border-color:rgba(255,194,75,.3); color:var(--ev-gold); }
.badge--mint{ background:rgba(69,224,168,.12); border-color:rgba(69,224,168,.3); color:var(--ev-mint); }
.badge--accent{ background:rgba(109,139,255,.14); border-color:rgba(109,139,255,.32); color:#9DB0FF; }
.badge--coral{ background:rgba(255,107,129,.13); border-color:rgba(255,107,129,.3); color:var(--ev-coral); }

/* ============ 타이포 유틸 ============ */
.eyebrow{ font-size:.78rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--ev-accent); }
.h1{ font-size:clamp(2.2rem,5.2vw,3.9rem); }
.h2{ font-size:clamp(1.7rem,3.4vw,2.6rem); }
.h3{ font-size:clamp(1.15rem,2vw,1.45rem); }
.lead{ font-size:clamp(1rem,1.4vw,1.12rem); color:var(--ev-text-2); }
.muted{ color:var(--ev-text-2); }
.dim{ color:var(--ev-text-3); font-size:.86rem; }
.grad{ background:linear-gradient(115deg,#fff 10%,var(--ev-accent) 48%,var(--ev-accent-2) 90%);
       -webkit-background-clip:text; background-clip:text; color:transparent; }
.num{ font-variant-numeric:tabular-nums; letter-spacing:-.02em; }

/* ============ 상단 내비 ============ */
.nav{
  position:sticky; top:0; z-index:80; height:var(--nav-h);
  display:flex; align-items:center;
  background:rgba(6,8,20,.6); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--ev-line);
}
.nav__inner{ width:min(100% - 40px,var(--wrap)); margin-inline:auto; display:flex; align-items:center; gap:28px; }
.logo{ display:flex; align-items:center; gap:10px; font-weight:900; font-size:1.06rem; letter-spacing:-.04em; }
.logo__mark{ width:30px; height:30px; border-radius:50%;
  background:radial-gradient(circle at 32% 30%,#BFD0FF,var(--ev-accent) 42%,#2C3B8F 100%);
  box-shadow:0 0 18px rgba(109,139,255,.6); position:relative; flex:none; }
.logo__mark::after{ content:""; position:absolute; inset:-6px -12px; border:1.5px solid rgba(168,123,255,.6);
  border-radius:50%; transform:rotate(-22deg); }
.nav__links{ display:flex; gap:22px; font-size:.92rem; font-weight:600; color:var(--ev-text-2); }
.nav__links a:hover{ color:var(--ev-text); }
/* 현재 페이지 표시 — 인라인 style 대신 토큰 기반 상태 표현 */
.nav__links a[aria-current="page"]{ color:var(--ev-text); }
.nav__spacer{ flex:1; }

/* ============ 에그머니 지갑 칩 ============ */
.egg{
  display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 14px;
  border-radius:var(--r-pill); background:rgba(255,194,75,.12);
  border:1px solid rgba(255,194,75,.32); color:var(--ev-gold); font-weight:800; font-size:.88rem;
}
.egg__icon{ width:16px; height:20px; border-radius:50% 50% 46% 46%/60% 60% 40% 40%;
  background:linear-gradient(160deg,#FFF0C4,var(--ev-gold)); flex:none; }

/* ============ 진행 바 / 게이지 ============ */
.bar{ height:8px; border-radius:var(--r-pill); background:rgba(255,255,255,.08); overflow:hidden; }
.bar__fill{ height:100%; border-radius:var(--r-pill); background:linear-gradient(90deg,var(--ev-accent),var(--ev-accent-2)); }
.bar__fill--mint{ background:linear-gradient(90deg,var(--ev-mint),#4CC9F0); }
.bar__fill--gold{ background:linear-gradient(90deg,#FFD880,var(--ev-gold)); }

/* ============ 통계 타일 ============ */
.stat{ padding:20px 22px; }
.stat__label{ font-size:.8rem; font-weight:700; color:var(--ev-text-3); }
.stat__value{ font-size:1.85rem; font-weight:900; letter-spacing:-.04em; margin-top:4px; }
.stat__delta{ font-size:.8rem; font-weight:700; }
.up{ color:var(--ev-mint); } .down{ color:var(--ev-coral); }

/* ============ 테이블 ============ */
.tbl{ width:100%; border-collapse:collapse; font-size:.9rem; }
.tbl th{ text-align:left; padding:12px 14px; font-size:.78rem; font-weight:800;
  color:var(--ev-text-3); border-bottom:1px solid var(--ev-line); white-space:nowrap; }
.tbl td{ padding:14px; border-bottom:1px solid rgba(255,255,255,.05); vertical-align:middle; }
.tbl tbody tr:hover{ background:rgba(255,255,255,.03); }

/* ============ 입력 ============ */
.field{ display:flex; flex-direction:column; gap:7px; }
.field__label{ font-size:.83rem; font-weight:700; color:var(--ev-text-2); }
.input{
  height:50px; padding:0 16px; border-radius:var(--r-md);
  background:rgba(255,255,255,.05); border:1px solid var(--ev-line); color:var(--ev-text);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.input::placeholder{ color:var(--ev-text-3); }
.input:focus{ outline:none; border-color:var(--ev-accent); background:rgba(109,139,255,.07); }

/* ============ 상태 점 ============ */
.dot{ width:8px; height:8px; border-radius:50%; flex:none; display:inline-block; }
.dot--live{ background:var(--ev-mint); box-shadow:0 0 0 3px rgba(69,224,168,.18); }
.dot--dev{  background:var(--ev-gold); box-shadow:0 0 0 3px rgba(255,194,75,.16); }
.dot--plan{ background:var(--ev-text-3); box-shadow:0 0 0 3px rgba(255,255,255,.06); }

/* ============ 애니메이션 ============ */
@keyframes ev-float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }
@keyframes ev-pulse{ 0%,100%{ opacity:.5 } 50%{ opacity:1 } }
@keyframes ev-rise{ from{ opacity:0; transform:translateY(22px) } to{ opacity:1; transform:translateY(0) } }
.float{ animation:ev-float 7s ease-in-out infinite; }
.rise{ animation:ev-rise .7s var(--ease) both; }

/* ============ 스크롤바 ============ */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:var(--r-pill); border:3px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.2); background-clip:content-box; }

/* ============ 접근성 ============ */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
:focus-visible{ outline:2px solid var(--ev-accent); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}

/* ============ 반응형 ============ */
@media (max-width:900px){
  /* 내비를 숨기지 않고 2행(로고+지갑 / 링크 스트립)으로 접는다.
     --nav-h 를 함께 올려야 sticky 사이드바·scroll-margin 이 어긋나지 않는다. */
  :root{ --wrap:100%; --nav-h:104px; }
  .nav__inner{ flex-wrap:wrap; column-gap:14px; row-gap:8px; padding-block:10px; }
  .nav__links{
    order:9; width:100%; gap:18px; font-size:.86rem;
    overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
  }
  .nav__links::-webkit-scrollbar{ display:none; }
  .nav__links a{ white-space:nowrap; }
}
@media (max-width:560px){
  .logo{ font-size:.98rem; }
  .logo .muted{ display:none; }          /* 좁은 화면에서 1행이 넘치지 않도록 */
  .nav__inner{ column-gap:10px; }
  .egg{ height:32px; padding:0 11px; font-size:.82rem; }
}