/* ============================================================
   TriPS project page styles (FLAIR-inspired layout)
   ============================================================ */
:root{
  --dc:#e23b3b; --cfg:#2f9e44; --sto:#1c7ed6;
  --ink:#1f2733; --soft:#5a6675; --line:#e7ebf0; --soft-bg:#f7f9fc;
}
html{ scroll-behavior:smooth; }
body{ font-family:'Noto Sans KR','Google Sans',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; color:var(--ink); }
.section{ padding:3.2rem 1.5rem; }
.title,.subtitle{ font-family:'Google Sans','Noto Sans KR',sans-serif; }
.section-tag{ text-transform:uppercase; letter-spacing:.15em; font-size:.78rem; font-weight:700; color:var(--cfg); margin-bottom:.4rem; }
.lead{ font-size:1.06rem; line-height:1.85; color:#2c3542; }
.bg-soft{ background:var(--soft-bg); }
hr.soft{ border:0; border-top:1px solid var(--line); margin:2.4rem auto; max-width:980px; }

/* ---------------- HERO ---------------- */
.hero2{ position:relative; overflow:hidden; min-height:560px; display:flex; align-items:center;
  justify-content:center; padding:3.2rem 1rem; background:#0d1017; }
.hero2-strip{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(4,1fr); }
.htile{ position:relative; overflow:hidden; }
.htile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.htile .ht-b{ animation:swap 5.2s infinite; }
.htile:nth-child(2) .ht-b{ animation-delay:1.3s; }
.htile:nth-child(3) .ht-b{ animation-delay:2.6s; }
.htile:nth-child(4) .ht-b{ animation-delay:3.9s; }
@keyframes swap{ 0%,40%{opacity:1} 50%,90%{opacity:0} 100%{opacity:1} }
.hero2-scrim{ position:absolute; inset:0; background:
   radial-gradient(120% 90% at 50% 45%, rgba(10,14,22,.30) 0%, rgba(10,14,22,.66) 60%, rgba(10,14,22,.82) 100%); }
.hero2-card{ position:relative; z-index:2; max-width:960px; width:100%; text-align:center;
  background:rgba(255,255,255,.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.55); border-radius:22px; padding:2.1rem 1.8rem 1.8rem;
  box-shadow:0 28px 70px rgba(0,0,0,.45); }
.paper-title{ font-weight:800; line-height:1.16; letter-spacing:-.01em; margin-bottom:.15rem; font-size:2rem; }
.paper-subtitle{ color:var(--soft); font-weight:800; line-height:1.16; letter-spacing:-.01em; margin-bottom:.35rem; font-size:2rem; }
@media(max-width:768px){ .paper-title,.paper-subtitle{ font-size:1.5rem; } }
.venue-badge{ display:inline-block; margin:.55rem 0 1rem; padding:.28rem .95rem; border-radius:999px;
  background:#10131a; color:#fff; font-weight:700; font-size:.84rem; letter-spacing:.03em; }
.author-list{ font-size:1.15rem; line-height:1.9; }
.author-list a{ color:var(--ink); border-bottom:2px solid transparent; }
.author-list a:hover{ border-bottom-color:var(--cfg); }
.affil-list{ color:var(--soft); margin-top:.35rem; }
.sup{ color:var(--soft); font-size:.78em; }
.eqcontrib{ color:var(--soft); font-size:.9rem; margin-top:.25rem; }
.link-buttons{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-top:1.25rem; }
.btn-pill{ display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1.2rem; border-radius:999px;
  background:#10131a; color:#fff !important; font-weight:600; transition:transform .12s ease, background .2s ease; }
.btn-pill:hover{ transform:translateY(-2px); background:#000; }

/* ---------------- figures (png/jpg with pdf fallback) ---------------- */
figure.fig{ margin:0; }
figure.fig .fig-frame{ border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff;
  box-shadow:0 8px 28px rgba(20,30,50,.06); }
figure.fig img{ display:block; width:100%; height:auto; }
figure.fig embed{ display:block; width:100%; height:62vh; border:0; }
figure.fig figcaption{ color:var(--soft); font-size:.93rem; margin-top:.7rem; line-height:1.65; text-align:left; }
figure.fig figcaption b{ color:var(--ink); }

/* ---------------- key idea ---------------- */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.6rem; }
@media(max-width:768px){ .pillars{ grid-template-columns:1fr; } }
.pillar{ border-radius:14px; padding:1.1rem 1.2rem; background:#fff; border:1px solid var(--line); }
.pillar h4{ font-weight:800; font-size:1.04rem; margin-bottom:.3rem; display:flex; align-items:center; gap:.5rem; }
.pillar p{ color:var(--soft); font-size:.95rem; line-height:1.6; }
.trend{ font-weight:800; } .dot{ width:12px; height:12px; border-radius:50%; display:inline-block; }

/* ---------------- analysis: side-by-side, equal-height, centered ---------------- */
.analysis-cols{ display:flex; flex-wrap:nowrap; align-items:center; gap:1.5rem; }
.analysis-cols .column{ flex:1 1 0; min-width:0; }
.analysis-cols .fig-frame{ height:420px; display:flex; align-items:center; justify-content:center; }
.analysis-cols .fig-frame img{ width:auto; height:100%; max-width:100%; object-fit:contain; }
@media(max-width:768px){
  .analysis-cols{ flex-direction:column; }
  .analysis-cols .fig-frame{ height:auto; }
  .analysis-cols .fig-frame img{ width:100%; height:auto; }
}

/* ---------------- qualitative viewer (FLAIR-style, paged grid) ---------------- */
.quali-viewer{ position:relative; max-width:1180px; margin:0 auto; }
.quali-head{ display:flex; align-items:center; justify-content:center; gap:.7rem; margin-bottom:.9rem; }
.samp-count{ color:var(--soft); font-weight:600; }
.q-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
@media(max-width:900px){ .q-grid{ grid-template-columns:1fr; max-width:520px; margin:0 auto; } }
.q-card{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:.6rem;
  display:flex; flex-direction:column; gap:.55rem; box-shadow:0 8px 24px rgba(20,30,50,.06); }
.q-card .ba{ box-shadow:none; }
.ba-row{ margin-bottom:1rem; }
.ba-row .row-cap{ font-size:.84rem; color:var(--soft); font-weight:600; margin-bottom:.35rem; text-align:center; }
.ba{ position:relative; width:100%; overflow:hidden; border-radius:12px; user-select:none; cursor:ew-resize;
  border:1px solid var(--line); box-shadow:0 8px 24px rgba(20,30,50,.08); background:#000; touch-action:none; }
.ba img{ pointer-events:none; }
.ba img.after{ display:block; width:100%; height:auto; }
.ba img.before{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }
.ba .handle{ position:absolute; top:0; bottom:0; left:50%; width:3px; background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.25), 0 0 8px rgba(0,0,0,.5); transform:translateX(-50%); }
.ba .knob{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:32px; height:32px;
  border-radius:50%; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.45); display:flex; align-items:center;
  justify-content:center; color:#10131a; font-size:.82rem; }
.ba .lbl{ position:absolute; top:.4rem; padding:.16rem .5rem; font-size:.72rem; font-weight:700; border-radius:7px;
  background:rgba(16,19,26,.74); color:#fff; backdrop-filter:blur(3px); z-index:3; }
.ba .lbl-l{ left:.4rem; } .ba .lbl-r{ right:.4rem; background:rgba(47,158,68,.86); }
.nav-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:46px; height:46px; border-radius:50%;
  border:none; background:#10131a; color:#fff; font-size:1.4rem; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.25);
  display:flex; align-items:center; justify-content:center; transition:transform .12s ease, background .2s ease; }
.nav-arrow:hover{ background:#000; transform:translateY(-50%) scale(1.06); }
.nav-prev{ left:-22px; } .nav-next{ right:-22px; }
@media(max-width:860px){ .nav-prev{ left:2px; } .nav-next{ right:2px; } }
.dots{ display:flex; gap:.4rem; justify-content:center; flex-wrap:wrap; margin-top:1.1rem; }
.dot-btn{ width:9px; height:9px; border-radius:50%; border:none; background:#cdd5e0; cursor:pointer; padding:0; }
.dot-btn.active{ background:#10131a; }
.hint{ text-align:center; color:var(--soft); font-size:.85rem; margin-top:.6rem; }

/* ---------------- quantitative table image ---------------- */
.table-img{ max-width:1100px; margin:0 auto; }
.table-fallback{ border:1px dashed var(--line); border-radius:12px; padding:2rem; text-align:center; color:var(--soft); background:#fff; }

/* ---------------- bibtex ---------------- */
.bibtex pre{ background:#0f1320; color:#e6edf3; border-radius:12px; padding:1.1rem 1.2rem; overflow:auto; font-size:.84rem; line-height:1.5; }
.copy-btn{ float:right; }

/* ---------------- footer ---------------- */
.footer{ background:#0f1320; color:#c5cedb; }
.footer a{ color:#9fd0ff; } .footer .content{ color:#c5cedb; }