/* ==========================================================
   haneulpark.me — shared stylesheet
   Theme: "Haneul" (sky) — day sky ↔ midnight sky
   ========================================================== */

/* ---------- tokens ---------- */
:root{
  --bg:#F5FAFE; --card:#FFFFFF; --ink:#0F2436; --mut:#4E667C;
  --acc:#0284C7; --deep:#02689C; --line:#D9E9F4;
  --hero-a:#7CC9F2; --hero-b:#C9E8FA; --hero-c:#F5FAFE; --hero-ink:#0B2A40;
  --chip-bg:rgba(255,255,255,.6); --chip-ink:#0B2A40;
  --btn-bg:#0B2A40; --btn-ink:#DFF1FC;
  --shadow:0 1px 2px rgba(15,60,95,.06),0 10px 30px rgba(15,60,95,.08);
  --shadow-hover:0 2px 4px rgba(15,60,95,.07),0 16px 40px rgba(15,60,95,.13);
}
:root[data-sky="night"]{
  --bg:#0A1420; --card:#101F31; --ink:#DFEAF5; --mut:#93A9BF;
  --acc:#66C2F0; --deep:#8ED4F8; --line:#1D3046;
  --hero-a:#0A1A33; --hero-b:#12294B; --hero-c:#0A1420; --hero-ink:#E8F2FB;
  --chip-bg:rgba(140,205,245,.14); --chip-ink:#BFE3F9;
  --btn-bg:#BFE3F9; --btn-ink:#0A1A33;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);
  --shadow-hover:0 2px 4px rgba(0,0,0,.45),0 16px 40px rgba(0,0,0,.4);
}
@media (prefers-color-scheme: dark){
  :root:not([data-sky="day"]){
    --bg:#0A1420; --card:#101F31; --ink:#DFEAF5; --mut:#93A9BF;
    --acc:#66C2F0; --deep:#8ED4F8; --line:#1D3046;
    --hero-a:#0A1A33; --hero-b:#12294B; --hero-c:#0A1420; --hero-ink:#E8F2FB;
    --chip-bg:rgba(140,205,245,.14); --chip-ink:#BFE3F9;
    --btn-bg:#BFE3F9; --btn-ink:#0A1A33;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);
    --shadow-hover:0 2px 4px rgba(0,0,0,.45),0 16px 40px rgba(0,0,0,.4);
  }
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:76px}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Bricolage Grotesque","Figtree",-apple-system,sans-serif; letter-spacing:-.015em}
a{color:var(--acc)}
::selection{background:rgba(2,132,199,.25)}
:focus-visible{outline:2px solid var(--acc); outline-offset:2px; border-radius:4px}
img{max-width:100%; height:auto}
.container{max-width:880px; margin:0 auto; padding:0 22px}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.nav-inner{
  position:relative; max-width:880px; margin:0 auto; padding:12px 22px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.brand{font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:16.5px; color:var(--ink); text-decoration:none}
.brand .short{display:none}
.nav-links{display:flex; gap:16px; flex-wrap:wrap; margin-left:auto; align-items:center}
.nav-links a{color:var(--mut); text-decoration:none; font-size:14px; font-weight:600}
.nav-links a:hover{color:var(--acc)}
.theme-btn{
  appearance:none; border:1px solid var(--line); background:var(--card); color:var(--ink);
  width:34px; height:34px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; padding:0;
}
.theme-btn:hover{border-color:var(--acc); color:var(--acc)}
.theme-btn svg{width:17px; height:17px}
.icon-sun{display:none}
:root[data-sky="night"] .icon-sun{display:block}
:root[data-sky="night"] .icon-moon{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-sky="day"]) .icon-sun{display:block}
  :root:not([data-sky="day"]) .icon-moon{display:none}
}

/* ---------- hero (photo + intro on the sky) ---------- */
.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,var(--hero-a) 0%,var(--hero-b) 62%,var(--hero-c) 100%);
  color:var(--hero-ink);
}
.sky{position:absolute; inset:0; pointer-events:none}
.cloud{position:absolute; background:rgba(255,255,255,.8); filter:blur(16px); border-radius:50%}
.cloud.c1{width:240px; height:58px; top:16%; left:5%}
.cloud.c2{width:180px; height:46px; top:52%; right:8%}
.stars{
  position:absolute; inset:0; display:none;
  background-image:
    radial-gradient(1.6px 1.6px at 8% 22%,#EAF6FF 60%,transparent 61%),
    radial-gradient(1.2px 1.2px at 21% 12%,#BFE3FF 60%,transparent 61%),
    radial-gradient(1.8px 1.8px at 33% 34%,#FFFFFF 60%,transparent 61%),
    radial-gradient(1.2px 1.2px at 46% 10%,#D5ECFF 60%,transparent 61%),
    radial-gradient(1.5px 1.5px at 58% 28%,#EAF6FF 60%,transparent 61%),
    radial-gradient(1.2px 1.2px at 69% 15%,#BFE3FF 60%,transparent 61%),
    radial-gradient(2px 2px at 79% 38%,#FFFFFF 60%,transparent 61%),
    radial-gradient(1.3px 1.3px at 90% 20%,#D5ECFF 60%,transparent 61%),
    radial-gradient(1.2px 1.2px at 14% 52%,#9CCDF2 60%,transparent 61%),
    radial-gradient(1.5px 1.5px at 40% 58%,#CFE9FF 60%,transparent 61%),
    radial-gradient(1.2px 1.2px at 63% 48%,#9CCDF2 60%,transparent 61%),
    radial-gradient(1.6px 1.6px at 86% 60%,#EAF6FF 60%,transparent 61%);
}
:root[data-sky="night"] .cloud{display:none}
:root[data-sky="night"] .stars{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-sky="day"]) .cloud{display:none}
  :root:not([data-sky="day"]) .stars{display:block}
}
@media (prefers-reduced-motion: no-preference){
  .stars{animation:twinkle 4.5s ease-in-out infinite alternate}
}
@keyframes twinkle{from{opacity:.55}to{opacity:1}}

.hero-inner{
  position:relative; z-index:2; max-width:880px; margin:0 auto;
  padding:56px 22px 60px;
  display:flex; gap:34px; align-items:flex-start;
}
.avatar{
  flex:0 0 132px; width:132px; height:132px; border-radius:50%;
  display:grid; place-items:center; overflow:hidden;
  background:linear-gradient(150deg,#3D9BD8,#7CC9F2);
  color:#fff; font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:40px;
  box-shadow:0 0 0 4px rgba(255,255,255,.45), var(--shadow);
}
:root[data-sky="night"] .avatar{background:linear-gradient(150deg,#123253,#2A5B85); color:#BFE3F9; box-shadow:0 0 0 4px rgba(140,205,245,.2), var(--shadow)}
@media (prefers-color-scheme: dark){
  :root:not([data-sky="day"]) .avatar{background:linear-gradient(150deg,#123253,#2A5B85); color:#BFE3F9; box-shadow:0 0 0 4px rgba(140,205,245,.2), var(--shadow)}
}
.avatar img{width:100%; height:100%; object-fit:cover}
.intro h1{font-size:clamp(30px,5.4vw,42px); line-height:1.1; margin:4px 0 8px; font-weight:700; text-wrap:balance}
.role{margin:0 0 14px; font-size:14.5px; font-weight:600; opacity:.85}
.bio{margin:0 0 18px; max-width:60ch; font-size:16.5px}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 22px; padding:0; list-style:none}
.chips li{
  font-size:12.5px; font-weight:600; letter-spacing:.02em;
  padding:4px 12px; border-radius:999px;
  background:var(--chip-bg); color:var(--chip-ink);
}
.actions{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.btn{
  display:inline-block; text-decoration:none; font-weight:700; font-size:14px;
  padding:10px 20px; border-radius:999px; background:var(--btn-bg); color:var(--btn-ink);
}
.btn.ghost{background:transparent; color:var(--hero-ink); box-shadow:inset 0 0 0 1.5px currentColor}
.quicklinks{display:flex; gap:14px; flex-wrap:wrap; font-size:13.5px; font-weight:600}
.quicklinks a{color:var(--hero-ink); opacity:.8; text-decoration:none; border-bottom:1px solid transparent}
.quicklinks a:hover{opacity:1; border-color:currentColor}

/* ---------- sections ---------- */
.section{padding:26px 0 30px}
.section h2{font-size:22px; margin:0 0 20px; font-weight:700}
.section h2 small{
  display:block; font-family:"Figtree",sans-serif; font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--acc); margin-bottom:5px;
}

/* news timeline */
.timeline{list-style:none; margin:0; padding:0 0 0 4px}
.timeline li{position:relative; padding:0 0 20px 26px}
.timeline li::before{
  content:""; position:absolute; left:0; top:7px; width:9px; height:9px; border-radius:50%;
  background:var(--acc); box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 22%, transparent);
}
.timeline li::after{content:""; position:absolute; left:4px; top:20px; bottom:-2px; width:1px; background:var(--line)}
.timeline li:last-child{padding-bottom:4px}
.timeline li:last-child::after{display:none}
.timeline .d{font-size:12.5px; font-weight:700; color:var(--acc); letter-spacing:.05em; text-transform:uppercase}
.timeline p{margin:2px 0 0; max-width:64ch}

/* publications */
.pub-grid{display:flex; flex-direction:column; gap:14px}
.pub-card{
  display:block; text-decoration:none; color:inherit;
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:20px 22px; box-shadow:var(--shadow);
}
@media (prefers-reduced-motion: no-preference){
  .pub-card{transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease}
  .pub-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-hover); border-color:color-mix(in srgb, var(--acc) 45%, var(--line))}
}
.pub-top{display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap}
.venue{
  font-size:12px; font-weight:700; letter-spacing:.05em; padding:3px 11px; border-radius:999px;
  background:color-mix(in srgb, var(--acc) 14%, transparent); color:var(--deep);
}
.year{color:var(--mut); font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums}
.pub-card h3{margin:0 0 6px; font-size:17px; line-height:1.4}
.authors{margin:0 0 8px; color:var(--mut); font-size:13.5px}
.authors b{color:var(--ink); font-weight:600}
.teaser{margin:0 0 10px; font-size:14px; color:var(--mut); max-width:70ch}
.more{font-size:13px; font-weight:700; color:var(--acc)}
.more::after{content:" →"; display:inline-block}
@media (prefers-reduced-motion: no-preference){
  .more::after{transition:transform .16s ease}
  .pub-card:hover .more::after{transform:translateX(3px)}
}

/* experience */
.exp{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px}
.exp li{border-bottom:1px solid var(--line); padding-bottom:18px}
.exp li:last-child{border-bottom:0; padding-bottom:0}
.exp .row{display:flex; justify-content:space-between; gap:14px; align-items:baseline; flex-wrap:wrap}
.exp .org{font-weight:700; font-size:15.5px}
.exp .org span{color:var(--mut); font-weight:500; font-size:13.5px}
.exp .when{color:var(--mut); font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap}
.exp p{margin:5px 0 0; color:var(--mut); font-size:14px; max-width:72ch}

/* honors */
.honors{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.honors li{display:flex; gap:16px; align-items:baseline}
.honors .y{
  flex:0 0 84px; font-size:12.5px; font-weight:700; color:var(--acc);
  font-variant-numeric:tabular-nums; letter-spacing:.03em;
}
.honors .t{font-size:14.5px}
.honors .t span{color:var(--mut); font-size:13px}

/* footer / contact */
.footer{
  margin-top:36px; padding:44px 0 40px; text-align:center;
  background:linear-gradient(0deg,var(--hero-b),transparent 92%);
}
:root[data-sky="night"] .footer{background:linear-gradient(0deg,#0C1E39,transparent 92%)}
@media (prefers-color-scheme: dark){
  :root:not([data-sky="day"]) .footer{background:linear-gradient(0deg,#0C1E39,transparent 92%)}
}
.footer h2{font-size:20px; margin:0 0 8px}
.footer .mail{font-size:17px; font-weight:700; color:var(--acc); text-decoration:none}
.footer .mail:hover{text-decoration:underline}
.footer .links{margin:14px 0 0; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; font-size:13.5px; font-weight:600}
.footer .links a{color:var(--mut); text-decoration:none}
.footer .links a:hover{color:var(--acc)}
.footer .fine{margin:22px 0 0; color:var(--mut); font-size:12.5px}

/* ---------- publication detail pages ---------- */
.detail{padding:38px 0 10px}
.back{
  display:inline-block; margin-bottom:24px; text-decoration:none;
  color:var(--mut); font-size:13.5px; font-weight:600;
}
.back:hover{color:var(--acc)}
.detail h1{font-size:clamp(24px,4.5vw,32px); line-height:1.22; margin:10px 0 10px; text-wrap:balance}
.detail .authors{font-size:14.5px; margin-bottom:16px}
.links-row{display:flex; gap:14px; flex-wrap:wrap; font-size:13.5px; font-weight:700; margin-bottom:28px}
.links-row a{color:var(--acc); text-decoration:none}
.links-row a:hover{text-decoration:underline}
.fig{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:24px 22px 18px; margin:0 0 8px; overflow-x:auto; box-shadow:var(--shadow);
}
.fig svg{display:block; width:100%; height:auto; min-width:560px; max-width:760px; margin:0 auto}
.fig-caption{color:var(--mut); font-size:13px; margin:10px 0 30px; text-align:center}
.tldr{
  background:color-mix(in srgb, var(--acc) 9%, var(--bg));
  border:1px solid color-mix(in srgb, var(--acc) 30%, var(--line));
  border-radius:14px; padding:16px 20px; margin:0 0 28px;
}
.tldr b{color:var(--deep); font-size:12px; letter-spacing:.12em; text-transform:uppercase; display:block; margin-bottom:4px}
.tldr p{margin:0; font-size:15.5px}
.prose{max-width:68ch}
.prose h2{font-size:18px; margin:30px 0 10px}
.prose p{margin:0 0 14px}
.prose ul{margin:0 0 14px; padding-left:22px}
.prose li{margin-bottom:6px}
.bibtex{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:18px 20px; overflow-x:auto; font-size:12.5px; line-height:1.55;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; color:var(--mut); margin:10px 0 30px;
}

/* SVG diagram vocabulary (used by detail-page figures) */
.fig svg text{font-family:"Figtree",-apple-system,sans-serif}
.fig .n{fill:var(--bg); stroke:var(--line); stroke-width:1.5}
.fig .na{fill:color-mix(in srgb, var(--acc) 12%, var(--bg)); stroke:var(--acc); stroke-width:1.5}
.fig .nw{fill:var(--bg); stroke:var(--mut); stroke-width:1.2; stroke-dasharray:5 4}
.fig .t{fill:var(--ink); font-size:13px; font-weight:600}
.fig .ts{fill:var(--mut); font-size:11.5px}
.fig .ta{fill:var(--deep); font-size:11.5px; font-weight:700}
.fig .e{stroke:var(--mut); fill:none; stroke-width:1.5}
.fig .ea{stroke:var(--acc); fill:none; stroke-width:1.8}
.fig .dash{stroke-dasharray:5 4}
.fig .ah{fill:var(--mut)}
.fig .aha{fill:var(--acc)}
.fig .dim{opacity:.35}

/* ---------- responsive ---------- */
@media (max-width: 720px){
  .hero-inner{flex-direction:column; align-items:center; text-align:center; padding:44px 22px 48px}
  .intro{display:flex; flex-direction:column; align-items:center}
  .bio{text-align:left}
  .chips,.actions,.quicklinks{justify-content:center}
  .exp .row{flex-direction:column; gap:2px}
  .honors .y{flex-basis:64px}
}
@media (max-width: 480px){
  .brand .full{display:none}
  .brand .short{display:inline}
  .nav-inner{padding-right:62px}
  .theme-btn{position:absolute; top:9px; right:16px}
  .nav-links{gap:12px}
  .nav-links a{font-size:13px}
  .container{padding:0 18px}
}