/* ===================== AutoDex project page — restrained academic ===================== */
:root {
  --ink: #1a1a1a;       /* headings / strong text */
  --body: #333a44;      /* body text */
  --muted: #6b7280;     /* secondary */
  --accent: #2a4fb8;    /* calm academic blue — links & active states only */
  --rule: #e5e7eb;
  --bg: #ffffff;
  --bg-soft: #fafafa;
  --radius: 8px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', sans-serif;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
  font-size: 17px;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 880px; margin: 0 auto; padding: 0 1.5rem; }
.wrap-wide { max-width: 1080px; margin: 0 auto; padding: 0 1.5rem; }

/* ---------- Navbar ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--rule); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 56px; }
.nav-logo { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.2px; color: var(--ink); }
.nav-logo:hover { text-decoration: none; }
.nav-links { display: flex; gap: 1.5rem; align-items: center; }
.nav-links a { color: var(--muted); font-weight: 500; font-size: 0.93rem; }
.nav-links a:hover { color: var(--ink); text-decoration: none; }
.nav-links a.active { color: var(--ink); }
.nav-cta { color: var(--accent) !important; }
@media (max-width: 820px){ .nav-links .navlink { display:none; } }

/* ---------- Hero ---------- */
.hero { padding: 3.5rem 0 1.5rem; text-align: center; }
.eyebrow {
  display:inline-block; font-weight:600; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color: var(--muted); margin-bottom:1.1rem;
}
.title {
  font-weight: 800; letter-spacing: -0.8px; line-height: 1.12;
  font-size: clamp(1.9rem, 4.2vw, 2.9rem); color: var(--ink); margin: 0 auto; max-width: 18ch;
}
.tagline { color: var(--muted); font-size: 1.12rem; margin: 1.1rem auto 0; max-width: 58ch; }

.authors { margin-top: 1.7rem; font-size: 1.05rem; line-height: 1.85; color: var(--ink); }
.authors .a { white-space: nowrap; }
.affil { color: var(--muted); margin-top: .45rem; font-size: 1rem; }

.btns { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-top: 1.7rem; }
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  background: var(--ink); color:#fff; padding:.55rem 1.15rem; border-radius: var(--radius);
  font-weight:500; font-size:.96rem; border:1px solid var(--ink); transition: background .15s, color .15s;
}
.btn:hover { background:#000; color:#fff; text-decoration:none; }
.btn.ghost { background:#fff; color: var(--ink); border:1px solid var(--rule); }
.btn.ghost:hover { background: var(--bg-soft); color: var(--ink); border-color:#d0d3da; }

/* ---------- Frames / media ---------- */
.frame { border-radius: var(--radius); overflow:hidden; border:1px solid var(--rule); background:#000; }
.frame video, .frame img { display:block; width:100%; }
.caption { color: var(--muted); font-size:.95rem; margin-top:.9rem; text-align:center; max-width: 72ch; margin-left:auto; margin-right:auto; line-height:1.6; }
.caption b { color: var(--ink); font-weight:600; }

/* ---------- Sections ---------- */
section { padding: 3.5rem 0; }
.soft { background: var(--bg-soft); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.sec-eyebrow { text-align:center; color: var(--muted); font-weight:600; letter-spacing:.12em; text-transform:uppercase; font-size:.76rem; margin-bottom:.7rem; }
.sec-title { text-align:center; font-weight:700; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing:-.4px; color:var(--ink); margin:0 0 .6rem; }
.sec-sub { text-align:center; color:var(--muted); max-width: 62ch; margin: 0 auto 2.4rem; font-size:1.05rem; }
.prose { font-size:1.08rem; line-height:1.8; color: var(--body); }
.prose p { margin: 0 0 1.1rem; }
.prose b { color: var(--ink); font-weight:600; }

/* ---------- Stat band ---------- */
.stat-strip { display:flex; justify-content:center; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.stat { flex:1; text-align:center; padding:1.8rem 1rem; border-left:1px solid var(--rule); }
.stat:first-child { border-left:none; }
.stat .num { font-size:2.1rem; font-weight:700; line-height:1; color: var(--ink); letter-spacing:-.5px; }
.stat .lbl { color:var(--muted); margin-top:.45rem; font-size:.92rem; }
@media (max-width:700px){ .stat-strip{ flex-wrap:wrap; } .stat{ flex:1 1 50%; border-left:none; border-top:1px solid var(--rule);} .stat:first-child,.stat:nth-child(2){border-top:none;} }

/* ---------- Comparison bars ---------- */
.cmp { max-width: 680px; margin: 0 auto; }
.cmp-row { margin: 1.3rem 0; }
.cmp-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.45rem; font-weight:500; color:var(--ink); }
.cmp-head .pct { font-size:1.3rem; font-weight:700; }
.cmp-track { height: 18px; background:#eef0f3; border-radius:4px; overflow:hidden; }
.cmp-fill { height:100%; border-radius:4px; }
.cmp-fill.win { background: var(--accent); }
.cmp-fill.lose { background: #c7ccd6; }
.cmp .tag { font-size:.85rem; color:var(--muted); font-weight:400; }

/* ---------- Pipeline stepper ---------- */
.stepper { display:flex; gap:0; flex-wrap:wrap; justify-content:center; margin-bottom:2rem; border-bottom:1px solid var(--rule); }
.step-tab {
  display:flex; align-items:center; gap:.5rem; cursor:pointer;
  padding:.7rem 1.1rem; font-weight:500; color:var(--muted); font-size:.97rem;
  border-bottom:2px solid transparent; margin-bottom:-1px; transition: color .15s, border-color .15s;
}
.step-tab .n { font-variant-numeric: tabular-nums; color:var(--muted); font-weight:600; }
.step-tab:hover { color: var(--ink); }
.step-tab.active { color: var(--ink); border-bottom-color: var(--accent); }
.step-tab.active .n { color: var(--accent); }
.step-panel { display:none; }
.step-panel.active { display:grid; grid-template-columns: 1.4fr 1fr; gap:2rem; align-items:center; }
.step-panel h3 { font-size:1.3rem; font-weight:700; color:var(--ink); margin:0 0 .7rem; letter-spacing:-.2px; }
.step-panel p { color:var(--body); font-size:1.05rem; line-height:1.7; }
@media (max-width:780px){ .step-panel.active{ grid-template-columns:1fr; } }

/* ---------- Object gallery ---------- */
.gallery { display:grid; grid-template-columns: 1.5fr 1fr; gap:1.6rem; align-items:start; }
.gallery-main .frame { aspect-ratio: 16/10; }
.gallery-main video { height:100%; object-fit:cover; }
.gallery-name { text-align:center; margin-top:.8rem; font-weight:500; color:var(--ink); }
.thumbs { display:grid; grid-template-columns: repeat(3, 1fr); gap:.6rem; }
.thumb { position:relative; border-radius:6px; overflow:hidden; cursor:pointer; border:1px solid var(--rule); aspect-ratio:1; background:#000; }
.thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.thumb.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.thumb .cap { position:absolute; bottom:0; left:0; right:0; padding:.25rem .4rem; font-size:.72rem; color:#fff; background:linear-gradient(transparent, rgba(0,0,0,.65)); text-align:center; }
@media (max-width:780px){ .gallery{ grid-template-columns:1fr; } }

/* ---------- Results grid ---------- */
.fig-grid { display:grid; grid-template-columns: 1fr 1fr; gap:1.8rem 2rem; }
.fig-grid .frame { background:#fff; }
@media (max-width:780px){ .fig-grid{ grid-template-columns:1fr; } }

/* ---------- BibTeX ---------- */
.bib { position:relative; }
pre.bibtex { background:#f6f7f9; color:#1a1a1a; border:1px solid var(--rule); border-radius:var(--radius); padding:1.3rem 1.4rem; overflow-x:auto; font-size:.9rem; line-height:1.6; font-family: ui-monospace, 'SF Mono', Menlo, monospace; }
.copy-btn { position:absolute; top:.7rem; right:.7rem; background:#fff; color:var(--muted); border:1px solid var(--rule); border-radius:6px; padding:.3rem .65rem; font-size:.82rem; cursor:pointer; }
.copy-btn:hover { color: var(--ink); border-color:#d0d3da; }

/* ---------- Footer ---------- */
footer { padding: 2.5rem 0; text-align:center; color:var(--muted); font-size:.93rem; border-top:1px solid var(--rule); }

/* ---------- Interactive showcase ---------- */
.showcase { }
.sc-pick { text-align:center; color:var(--muted); font-size:1.02rem; margin:0 0 1.1rem; }
.sc-objs { display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; margin-bottom:1.2rem; }
.sc-obj {
  display:flex; align-items:center; gap:.5rem; cursor:pointer; font-family:inherit;
  background:#fff; border:1px solid var(--rule); border-radius:999px; padding:.35rem .85rem .35rem .35rem;
  font-size:.92rem; font-weight:500; color:var(--muted); transition: all .15s;
}
.sc-obj img { width:30px; height:30px; border-radius:50%; object-fit:cover; }
.sc-obj:hover { color:var(--ink); border-color:#cfd3dd; }
.sc-obj.active { color:var(--ink); border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.sc-stage { aspect-ratio:16/9; }
.sc-stage video { width:100%; height:100%; object-fit:cover; background:#000; }
.sc-steps { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-top:.9rem; }
.sc-step {
  display:flex; align-items:center; gap:.7rem; cursor:pointer; font-family:inherit; text-align:left;
  background:#fff; border:1px solid var(--rule); border-radius:10px; padding:.8rem 1rem; transition: all .15s;
}
.sc-step .n {
  flex:none; width:24px; height:24px; border-radius:50%; background:#e7e8ee; color:var(--muted);
  display:grid; place-items:center; font-size:.82rem; font-weight:700; transition: all .15s;
}
.sc-step .t { font-size:.96rem; font-weight:600; color:var(--muted); line-height:1.25; transition: color .15s; }
.sc-step .t small { display:block; font-weight:400; font-size:.8rem; color:var(--muted); opacity:.8; }
.sc-step:hover { border-color:#cfd3dd; }
.sc-step:hover .t { color:var(--ink); }
.sc-step.active { border-color:var(--accent); background:#fff; }
.sc-step.active .n { background:var(--accent); color:#fff; }
.sc-step.active .t { color:var(--ink); }
@media (max-width:620px){ .sc-steps{ grid-template-columns:1fr; } }

/* ---------- Asymmetry explainer ---------- */
.asym { max-width:780px; margin:0 auto; }
.asym-row { display:grid; grid-template-columns:130px 175px 1fr; gap:1.1rem; align-items:baseline; padding:1.2rem .2rem; border-top:1px solid var(--rule); }
.asym-row:last-of-type { border-bottom:1px solid var(--rule); }
.asym-tag { font-weight:700; color:var(--ink); font-size:1.1rem; }
.asym-verdict { font-weight:600; font-size:.96rem; }
.asym-row.pass .asym-verdict { color:var(--accent); }
.asym-row.fail .asym-verdict { color:#9aa0ad; }
.asym-desc { color:var(--muted); font-size:.99rem; line-height:1.6; }
.asym-punch { margin-top:1.7rem; font-size:1.12rem; line-height:1.7; color:var(--ink); text-align:center; max-width:62ch; margin-left:auto; margin-right:auto; }
.asym-punch b { color:var(--accent); font-weight:600; }
@media (max-width:640px){ .asym-row{ grid-template-columns:1fr; gap:.3rem; } }

/* reveal disabled — content shown statically */
.reveal { opacity:1; transform:none; }