/* MPIA 소개 페이지 — 토큰, 리셋, 내비게이션, 히어로, 섹션 껍데기.
   각 섹션의 고유 스타일은 sections.css 에 있다. 두 파일 모두 index.html 이
   <link> 로 읽고, 이 파일이 먼저다 (변수와 리셋이 앞서야 한다). */

:root{
  /* 팔레트(2026-09-27) — 쨍한 민트가 메인, 채도 낮은 밝은 주황과 어두운 보라가 받친다.
     세 앱의 RetroColors·RostoreColors 와 같은 값이다. 다크는 보라 기운의 바탕에 민트가 뜬다.
     라이트 값은 ui-kit.css 의 html[data-theme="light"] 에 있다. */
  --ink:#f1eef6;
  --ink-dim:#bdb5cc;
  --ink-faint:#8f87a0;
  --bg:#14111a;
  --bg-raised:#1e1928;
  --bg-rgb:20,17,26;              /* 반투명 그라데이션용 — bg 와 같은 색 */
  --line: rgba(185,166,217,0.14);
  --line-strong: rgba(185,166,217,0.26);
  --mint:#3ff5c8;                 /* 메인 — 강조·주요 동작 */
  --mint-dim:#1f6b5b;
  --mint-hover:#7cf8d9;
  --on-mint:#14111a;              /* 민트 위 글자 */
  --warm:#e4b28c;                 /* 보조 — 소제목·"아직/여는 중" */
  --warm-dim:#6a5242;
  --plum:#8c7bae;                 /* 포인트 — 보라 */
  --plum-dim:#3a3150;

  /* 사신수 accent — 각 절에서만 절제해서 사용 */
  --hyeonmu:#3b6ea5;   /* 현무 — 바퀴/실내 */
  --cheongryong:#2f8f7a; /* 청룡 — 손/바다 */
  --jujak:#c1543b;     /* 주작 — 날개/하늘 */
  --baekho:#c9c2ab;    /* 백호 — 다리/산 */

  --serif: 'Noto Serif KR', serif;
  --sans: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:88px; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}

a{ color:inherit; text-decoration:none; }
.wrap{ max-width:1080px; margin:0 auto; padding:0 32px; }
@media (max-width:640px){ .wrap{ padding:0 20px; } }

/* ---------- Nav ---------- */
header.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:linear-gradient(to bottom, rgba(var(--bg-rgb),0.92), rgba(var(--bg-rgb),0));
  padding:22px 0 40px;
  pointer-events:none;
}
header.nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  pointer-events:auto;
}
.brand{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--serif); font-weight:700; font-size:19px;
  letter-spacing:0.06em; color:var(--ink);
}
.brand img{
  width:26px; height:26px; border-radius:6px;
  /* 로고 배경이 밝은 회색이라 어두운 헤더에서 카드처럼 보인다 — 테두리로 정리 */
  border:1px solid var(--line-strong);
}
.brand span{ color:var(--mint); }
nav.links{ display:flex; gap:28px; font-size:14px; color:var(--ink-dim); }
nav.links a{ transition:color .2s ease; }
nav.links a:hover{ color:var(--ink); }
@media (max-width:640px){ nav.links{ display:none; } }

/* ---------- Hero ---------- */
.hero{
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  position:relative;
  padding:140px 0 100px;
}
.hero-eyebrow{
  font-size:13px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--warm); margin-bottom:22px; font-weight:600;
}
.hero h1{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(38px, 6vw, 74px);
  line-height:1.18;
  letter-spacing:-0.01em;
  max-width:15ch;
}
.hero h1 em{ font-style:normal; color:var(--mint); }
.hero p.lead{
  margin-top:28px; max-width:52ch;
  font-size:clamp(16px, 1.6vw, 19px);
  color:var(--ink-dim);
}
.hero .motto{
  margin-top:44px;
  display:flex; align-items:baseline; gap:14px;
  font-family:var(--serif);
  font-size:clamp(17px, 2vw, 22px);
  color:var(--ink);
}
.hero .motto .rule{ width:40px; height:1px; background:var(--line-strong); }

.hero-bg{
  position:absolute; inset:0; z-index:-1; overflow:hidden;
}
.hero-bg svg{ position:absolute; top:50%; right:-8%; transform:translateY(-50%); width:min(760px, 80vw); opacity:0.5; }
@media (max-width:900px){ .hero-bg svg{ right:-30%; opacity:0.3; } }

.scroll-cue{
  position:absolute; bottom:40px; left:32px;
  font-size:12px; color:var(--ink-faint); letter-spacing:0.08em;
  display:flex; align-items:center; gap:10px;
}
.scroll-cue .bar{ width:1px; height:28px; background:var(--line-strong); position:relative; overflow:hidden; }
.scroll-cue .bar::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background:var(--mint); animation:cue 2.2s ease-in-out infinite;
}
@keyframes cue{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

/* ---------- Section shell ---------- */
section{ padding:120px 0; border-top:1px solid var(--line); position:relative; }
@media (max-width:640px){ section{ padding:80px 0; } }

.section-head{ margin-bottom:64px; max-width:640px; }
.section-kicker{
  font-size:13px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--warm); font-weight:600; margin-bottom:18px;
}
.section-title{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(28px, 3.4vw, 40px);
  line-height:1.3;
}
.section-sub{
  margin-top:18px; color:var(--ink-dim); font-size:16px; max-width:56ch;
}