/* 알고크라시 — 디자인 시스템.
   스펙: todo-v2/docs/superpowers/specs/2026-07-07-algocracy-website-design.md
   원칙: 무채색. 텍스트는 움직이지 않는다. */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
  font-size: 17px; line-height: 1.8; word-break: keep-all;
  background: #FAFAF7; color: #131210;
  -webkit-font-smoothing: antialiased;
}

.frame { max-width: 74rem; margin: 0 auto; padding: 0 clamp(1.2rem, 4vw, 3rem); }

/* ---------- 헤더 ---------- */
.top {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 1.6rem 0; border-bottom: 1px solid #131210;
  font-family: 'IBM Plex Mono', monospace; font-size: .75rem;
}
.top .mark { font-family: 'Pretendard Variable', sans-serif; font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; }
.top .mark span { font-weight: 400; }
.top a { color: inherit; text-decoration: none; position: relative; }
.top a::after {
  content: ''; position: absolute; left: 0; bottom: -.15em; width: 100%; height: 1px;
  background: #131210; transform: scaleX(0); transform-origin: left center;
  transition: transform .3s cubic-bezier(.7, 0, .3, 1);
}
.top a:hover::after { transform: scaleX(1); }

/* ---------- 히어로 ---------- */
.hero {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 3rem; align-items: center;
  padding: 6.5rem 0; border-bottom: 1px solid #131210;
}
h1 { font-weight: 800; font-size: clamp(2.3rem, 6vw, 4.2rem); line-height: 1.28; letter-spacing: -.028em; }
.hero-sub { margin-top: 1.8rem; color: #55524A; max-width: 28rem; }
.hero-meta {
  font-family: 'IBM Plex Mono', monospace; font-size: .72rem; color: #8B877C;
  letter-spacing: .08em; margin-bottom: 2rem; min-height: 1.2em;
}
.hero-meta::after { content: '_'; animation: blink 1s step-end infinite; }
body.meta-done .hero-meta::after { content: ''; animation: none; }
@keyframes blink { 50% { opacity: 0; } }

/* 동심원 — 결정의 세 층위 */
.rings { justify-self: center; }
.rings svg { display: block; width: clamp(230px, 26vw, 330px); height: auto; }
.rings .lbl { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; fill: #131210; }
.rings .lbl.dim { fill: #8B877C; }
.rings circle { fill: none; stroke: #131210; }
.rings .r1 {
  stroke-width: 1.6; stroke-dasharray: 330; stroke-dashoffset: 330;
  animation: draw 1.3s cubic-bezier(.4, 0, .2, 1) .3s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
.rings .r2 { stroke-width: 1; stroke-dasharray: 3 3; }
.rings .r3 { stroke-width: 1; stroke-dasharray: 1.5 4; }
.rings .r2, .rings .r3 { opacity: 0; transform-box: fill-box; transform-origin: center; }
body.meta-done .rings .r2 { animation: fade .9s ease .9s forwards, orbit 80s linear 1.8s infinite; }
body.meta-done .rings .r3 { animation: fade .9s ease 1.15s forwards, orbit 140s linear 1.8s infinite reverse; }
.rings .lbl { opacity: 0; animation: fade .6s ease 1.4s forwards; }
.rings-cap {
  text-align: center; font-family: 'IBM Plex Mono', monospace; font-size: .72rem;
  color: #8B877C; margin-top: 1.2rem;
  opacity: 0; animation: fade .6s ease 1.7s forwards;
}
@keyframes fade { to { opacity: 1; } }
@keyframes orbit { to { transform: rotate(360deg); } }

/* ---------- 사업 목록 ---------- */
.levels { border-bottom: 1px solid #131210; }
.level-row {
  display: grid; grid-template-columns: 4.5rem 11rem 1fr; gap: 2rem;
  align-items: baseline; padding: 2.4rem 0; border-top: 1px solid #D9D5C9;
}
.level-row:first-child { border-top: none; }
.idx { font-family: 'IBM Plex Mono', monospace; font-size: .75rem; color: #8B877C; }
.lv-name { font-weight: 800; font-size: 1.55rem; letter-spacing: -.02em; white-space: nowrap; }
.mini { display: inline-block; width: 22px; height: 22px; vertical-align: -2px; margin-left: .55rem; opacity: 0; transition: opacity .35s ease; }
.mini circle { fill: none; stroke: #C9C5B9; stroke-width: 1; }
.mini .on { stroke: #131210; stroke-width: 1.8; }
.level-row:hover .mini { opacity: 1; }
.lv-body .what {
  display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; align-items: baseline;
  font-weight: 600;
}
.lv-body .how { grid-column: 1 / -1; color: #55524A; font-size: .93rem; margin-top: .2rem; font-weight: 400; }
.lv-body .how a { color: inherit; }
.lv-body .what + .what { margin-top: 1.1rem; }
.chip {
  font-family: 'IBM Plex Mono', monospace; font-size: .7rem; letter-spacing: .05em;
  border: 1px solid #131210; border-radius: 99px; padding: .18em .7em; white-space: nowrap;
  display: inline-block; opacity: 0;
}
.level-row.in .chip { animation: stamp .32s cubic-bezier(.34, 1.4, .5, 1) forwards; }
.level-row.in .what + .what .chip { animation-delay: .12s; }
@keyframes stamp { from { opacity: 0; transform: scale(1.45) rotate(-4deg); } to { opacity: 1; transform: none; } }
.chip.dim { border-color: #B5B1A4; color: #8B877C; }
.level-row .chip:not(.dim) { transition: transform .25s cubic-bezier(.34, 1.4, .5, 1); }
.level-row:hover .chip:not(.dim) { transform: rotate(-3deg); }

/* ---------- 스토리 + 기록 ---------- */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; padding: 5rem 0; border-bottom: 1px solid #131210; }
h2 { font-weight: 800; font-size: 1.45rem; letter-spacing: -.02em; margin-bottom: 1.6rem; }
.story p { margin-bottom: 1.2rem; color: #24221D; font-size: .97rem; }
.hist { width: 100%; border-collapse: collapse; }
.hist td { padding: .8rem 0; border-bottom: 1px solid #D9D5C9; font-size: .93rem; vertical-align: top; }
.hist td:first-child { font-family: 'IBM Plex Mono', monospace; font-size: .78rem; color: #8B877C; width: 6rem; white-space: nowrap; }
.hist tr { opacity: 0; }
.hist.in tr { animation: fade .5s ease forwards; }
.hist.in tr:nth-child(1) { animation-delay: .05s; }
.hist.in tr:nth-child(2) { animation-delay: .17s; }
.hist.in tr:nth-child(3) { animation-delay: .29s; }
.hist.in tr:nth-child(4) { animation-delay: .41s; }
.hist.in tr:nth-child(5) { animation-delay: .53s; }
.hist.in tr:nth-child(6) { animation-delay: .65s; }
.hist.in tr:nth-child(7) { animation-delay: .77s; }

/* ---------- 사람 ---------- */
.people-sec { padding: 5rem 0; border-bottom: 1px solid #131210; }
.people-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; margin-top: .5rem; }
.member .name { font-weight: 800; font-size: 1.15rem; }
.member .role { color: #55524A; font-size: .92rem; }
.member .bio { color: #24221D; font-size: .95rem; margin-top: .9rem; max-width: 26rem; }

/* ---------- 푸터 ---------- */
.foot { padding: 6rem 0 3rem; }
.foot-flex { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 2.5rem; }
.foot .big { font-weight: 800; font-size: clamp(1.9rem, 5vw, 3rem); letter-spacing: -.025em; line-height: 1.3; }
.foot .big .dot { display: inline-block; opacity: 0; }
.foot-flex.in .dot { animation: period .4s cubic-bezier(.34, 1.5, .5, 1) .5s forwards; }
@keyframes period { from { opacity: 0; transform: scale(2.8); } to { opacity: 1; transform: none; } }
.foot .meta { font-family: 'IBM Plex Mono', monospace; font-size: .74rem; color: #8B877C; text-align: right; line-height: 2; margin-left: auto; }
.foot .meta a { color: #131210; }

/* ---------- 모션 축소 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::after { animation: none !important; transition: none !important; }
  .rings circle, .rings .lbl, .rings-cap, .hist tr, .chip, .foot .big .dot {
    opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important;
  }
  html { scroll-behavior: auto; }
}

/* ---------- 반응형 ---------- */
@media (max-width: 56rem) {
  .hero { grid-template-columns: 1fr; padding: 4.5rem 0; }
  .rings { justify-self: center; }
  .level-row { grid-template-columns: 3rem 7.5rem 1fr; gap: 1.2rem; }
  .lv-name { font-size: 1.3rem; }
  .two-col { grid-template-columns: 1fr; gap: 3rem; }
  .people-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 40rem) {
  .level-row { grid-template-columns: 1fr; gap: .8rem; padding: 2rem 0; }
  .level-row .idx { display: none; }
}