/* MPIA 소개 페이지 — 토큰, 리셋, 내비게이션, 히어로, 섹션 껍데기.
   각 섹션의 고유 스타일은 sections.css 에 있다. 두 파일 모두 index.html 이
   <link> 로 읽고, 이 파일이 먼저다 (변수와 리셋이 앞서야 한다).
   memo.html 도 이 파일을 읽는다 — 토큰·리셋·body 를 바꿀 때는 m-emo 화면도 함께 본다. */

: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;
  --mint-rgb:63,245,200;          /* 빛 번짐용 — mint 와 같은 색 */
  --on-mint:#14111a;              /* 민트 위 글자 */
  --warm:#e4b28c;                 /* 보조 — 소제목·"아직/여는 중" */
  --warm-dim:#6a5242;
  --warm-rgb:228,178,140;
  --plum:#8c7bae;                 /* 포인트 — 보라 */
  --plum-dim:#3a3150;
  --plum-rgb:140,123,174;
  --bad:#e08a76;                  /* 안 맞음 — 조립대 그림의 끊긴 선 */

  /* 움직임(2026-09-29) — 세 앱 lib/kit/motion.dart 의 Motion 과 같은 값이다(mpia-ops ui-kit 검사).
     움직임은 상태를 알리는 신호로만 쓴다. 안전 신호는 기다리지 않는다. */
  --motion-fast:120ms;
  --motion-normal:200ms;
  --motion-slow:320ms;
  --motion-pulse:1600ms;
  --motion-ease:cubic-bezier(.2,.7,.2,1);

  --radius:14px;
  --serif: 'Noto Serif KR', serif;
  /* Pretendard 는 jsDelivr 에서 받는다(index.html). 못 받아도 시스템 고딕으로 선다. */
  --sans: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

*{ 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;
}
/* 한국어 제목이 '파 / 일까지' 처럼 낱자 사이에서 끊기지 않게 — 띄어쓰기에서만 줄을 바꾼다(2026-10-12). */
.landing{ word-break:keep-all; overflow-wrap:anywhere; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
  html{ scroll-behavior:auto; }
}

a{ color:inherit; text-decoration:none; }
.landing code{ font-family:var(--mono); font-size:.88em; padding:.1em .38em; border-radius:6px; background:var(--plum-dim); color:var(--ink); }
.wrap{ max-width:1160px; 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;
  padding:14px 0;
  background:rgba(var(--bg-rgb),0.72);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--line);
}
header.nav .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:800; font-size:18px;
  letter-spacing:0.04em; color:var(--ink);
}
.brand img{ width:26px; height:26px; border-radius:7px; border:1px solid var(--line-strong); }
.brand span{ color:var(--mint); }
nav.links{ display:flex; gap:26px; font-size:14px; color:var(--ink-dim); }
nav.links a{ transition:color var(--motion-normal) var(--motion-ease); }
nav.links a:hover{ color:var(--ink); }
.nav-toggle{ display:none; }
@media (max-width:900px){
  header.nav .wrap{ gap:12px; }
  .nav-toggle{
    order:3;
    display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
    width:34px; height:34px; padding:6px; background:transparent;
    border:1px solid var(--line-strong); border-radius:8px; cursor:pointer; box-sizing:border-box;
  }
  .nav-toggle .bar{
    width:100%; height:2px; background:var(--ink); border-radius:1px;
    transition:transform var(--motion-fast) var(--motion-ease), opacity var(--motion-fast) var(--motion-ease);
  }
  header.nav.open .nav-toggle .bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  header.nav.open .nav-toggle .bar:nth-child(2){ opacity:0; }
  header.nav.open .nav-toggle .bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  nav.links{ display:none; }
  header.nav.open nav.links{
    display:flex; flex-direction:column; position:absolute;
    top:100%; left:0; right:0;
    background:rgba(var(--bg-rgb),0.96);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    padding:20px 24px; gap:16px;
    border-bottom:1px solid var(--line-strong);
    box-shadow:0 16px 36px rgba(0,0,0,0.45);
  }
  header.nav.open nav.links a{ font-size:15px; font-weight:600; color:var(--ink); padding:4px 0; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding:150px 0 72px;
  border-top:0;
}
@media (max-width:640px){
  .hero{ padding:104px 0 56px; }
}
.hero-glow{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(640px 420px at 18% 12%, rgba(var(--mint-rgb),0.10), transparent 70%),
    radial-gradient(720px 520px at 86% 28%, rgba(var(--plum-rgb),0.20), transparent 70%);
}
/* 옅은 격자 — 가운데서 멀어질수록 사라진다 */
.hero-glow::after{
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
          mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
  opacity:.55;
}
/* 문구는 가운데에, 조립대 그림은 그 아래에 넓게(2026-10-12) — 그림 속 이름·값이 읽혀야 그림이 일을 한다. */
.hero-grid{ display:flex; flex-direction:column; align-items:center; gap:64px; }
.hero-copy{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  padding:6px 14px 6px 8px; border-radius:999px;
  border:1px solid var(--line-strong); background:rgba(var(--bg-rgb),0.5);
  font-size:13px; font-weight:600; color:var(--ink-dim);
  margin-bottom:26px;
}
.hero-eyebrow img{ width:22px; height:22px; }
.hero h1{
  font-weight:800;
  font-size:clamp(36px, 5.6vw, 72px);
  line-height:1.1;
  letter-spacing:-0.04em;
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(100deg, var(--mint) 20%, var(--mint-hover) 80%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p.lead{
  margin-top:26px; max-width:46em;
  font-size:clamp(16px, 1.45vw, 18px);
  color:var(--ink-dim); line-height:1.75;
}
.hero-cta{ margin-top:34px; display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.hero-meta{
  margin-top:26px; display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:center;
  font-size:12.5px; color:var(--ink-faint); font-family:var(--mono);
}
.hero-meta span::before{ content:'●'; color:var(--mint-dim); margin-right:8px; font-size:9px; vertical-align:2px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 22px; border-radius:11px;
  font-size:15px; font-weight:700; letter-spacing:-0.005em;
  border:1px solid var(--line-strong);
  transition:border-color var(--motion-normal) var(--motion-ease), background var(--motion-normal) var(--motion-ease),
             transform var(--motion-normal) var(--motion-ease), box-shadow var(--motion-normal) var(--motion-ease);
}
.btn.primary{
  background:var(--mint); color:var(--on-mint); border-color:var(--mint);
  box-shadow:0 0 0 1px rgba(var(--mint-rgb),0.2), 0 8px 28px -8px rgba(var(--mint-rgb),0.55);
}
.btn.primary:hover{ background:var(--mint-hover); transform:translateY(-1px); }
.btn.ghost{ background:rgba(var(--bg-rgb),0.4); }
.btn.ghost:hover{ border-color:var(--ink-dim); }
.btn:focus-visible{ outline:2px solid var(--mint); outline-offset:3px; }
.btn-arrow{ transition:transform var(--motion-normal) var(--motion-ease); }
.btn:hover .btn-arrow{ transform:translateX(3px); }

/* ---------- 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:56px; max-width:680px; }
.section-kicker{
  font-size:13px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--warm); font-weight:700; margin-bottom:16px; font-family:var(--mono);
}
.section-title{
  font-weight:800;
  font-size:clamp(28px, 3.4vw, 44px);
  line-height:1.22; letter-spacing:-0.03em;
}
.section-sub{
  margin-top:18px; color:var(--ink-dim); font-size:16.5px; max-width:58ch; line-height:1.75;
}

/* 스크롤하면 한 번 떠오른다(landing.js). 스크립트가 없거나 '동작 줄이기'면 처음부터 보인다.
   불투명도는 두 값의 곱이다 — 떠올랐는가(--shown) × 원래 흐린 정도(--fade). 순서 절의 흐린 줄(다음·그다음)이
   떠오른 뒤에도 흐린 채로 남아야 해서 opacity 를 직접 덮어쓰지 않는다. */
.reveal{ opacity:calc(var(--fade, 1) * var(--shown, 1)); }
.js-reveal .reveal{
  --shown:0; transform:translateY(14px);
  transition:opacity var(--motion-slow) var(--motion-ease), transform var(--motion-slow) var(--motion-ease);
}
.js-reveal .reveal.shown{ --shown:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .js-reveal .reveal{ --shown:1; transform:none; }
}