/* ujinf.net — dark glassmorphism, ported from the previous ujinf74.github.io design.
   No build step: plain CSS served by Cloudflare Pages. */

/* ---------------------------------------------------------------- tokens */
:root{
  --maxw: 1024px;
  --pad: 30px;
  --pad-m: 18px;

  --bg0:#03030b;
  --bg1:#070717;
  --bg2:#11102a;

  --text:rgba(232,238,255,.96);
  --muted:rgba(178,189,225,.74);
  --line:rgba(111,130,255,.30);
  --line-strong:rgba(79,125,255,.46);

  --glass1:rgba(6,8,18,.86);
  --glass2:rgba(12,13,30,.74);
  --glass3:rgba(79,101,255,.050);

  --shadow1:0 18px 46px rgba(0,0,0,.42), 0 0 32px rgba(78,111,255,.09);
  --shadow2:0 10px 26px rgba(0,0,0,.32), 0 0 20px rgba(182,88,255,.09);

  --r:8px;
  --pill:6px;

  --font-mono:"GulimChe", "굴림체", "Lucida Console", "MS Gothic", "Consolas", monospace;

  --accent:#4f7dff;
  --accent-2:#6f82ff;
  --accent-3:#d55cff;
  --accent-soft:rgba(79,125,255,.14);
  --accent-line:rgba(79,125,255,.50);

  --star-op1:.26;
  --star-op2:.16;
}

/* ------------------------------------------------------------------ base */
*{ box-sizing:border-box; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
}
html{ scroll-behavior:smooth }

body{
  margin:0;
  color:var(--text);
  font-family:var(--font-mono);
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px),
    radial-gradient(1200px 700px at 12% 8%, rgba(50,104,255,.18), transparent 62%),
    radial-gradient(1000px 620px at 88% 16%, rgba(155,108,255,.18), transparent 64%),
    radial-gradient(860px 580px at 48% 86%, rgba(213,92,255,.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 35%, var(--bg2));
  background-size:4px 4px, 4px 4px, auto, auto, auto, auto;
  background-attachment:fixed;
  -webkit-font-smoothing:none;
  font-smooth:never;
  text-rendering:optimizeSpeed;
  font-synthesis:none;
  font-size:16px;
  font-weight:400;
  line-height:1.62;
  min-height:100vh;
}

/* --------------------------------------------------------- star backdrop */
body::before,
body::after{
  content:"";
  position:fixed;
  inset:-40%;
  pointer-events:none;
  z-index:0;
  background-repeat:repeat;
  opacity:var(--star-op1);
  will-change:transform, opacity;
}

body::before{
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(111,130,255,.62) 50%, transparent 55%),
    radial-gradient(1px 1px at 30% 70%, rgba(213,92,255,.48) 50%, transparent 55%),
    radial-gradient(1.5px 1.5px at 65% 25%, rgba(255,255,255,.52) 50%, transparent 55%),
    radial-gradient(1.5px 1.5px at 80% 80%, rgba(126,155,255,.42) 50%, transparent 55%),
    radial-gradient(2px 2px at 55% 55%, rgba(213,92,255,.34) 50%, transparent 55%),
    radial-gradient(2px 2px at 15% 85%, rgba(255,255,255,.38) 50%, transparent 55%),
    radial-gradient(2px 2px at 90% 35%, rgba(111,130,255,.40) 50%, transparent 55%);
  background-size: 260px 260px;
  animation: stars-drift 110s linear infinite, stars-twinkle 7s ease-in-out infinite;
}

body::after{
  background-image:
    radial-gradient(3px 3px at 20% 30%, rgba(111,130,255,.72) 50%, transparent 60%),
    radial-gradient(3px 3px at 75% 40%, rgba(155,108,255,.62) 50%, transparent 60%),
    radial-gradient(3px 3px at 55% 75%, rgba(213,92,255,.55) 50%, transparent 60%);
  background-size: 520px 520px;
  opacity:var(--star-op2);
  animation: stars-drift2 160s linear infinite, stars-twinkle 9s ease-in-out infinite;
}

@keyframes stars-drift{
  from{ transform:translate3d(0,0,0) }
  to  { transform:translate3d(-6%, 8%, 0) }
}
@keyframes stars-drift2{
  from{ transform:translate3d(0,0,0) }
  to  { transform:translate3d(8%, -6%, 0) }
}
@keyframes stars-twinkle{
  0%,100%{ opacity:.50 }
  50%    { opacity:.68 }
}

@media (prefers-reduced-motion: reduce){
  body::before, body::after{ animation:none }
}

/* ---------------------------------------------------------------- layout */
.page-wrap{
  position:relative;
  z-index:1;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--pad);
}

.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.6rem 1rem;
  margin:18px auto 0;
  padding:.6rem .9rem;
  border-radius:var(--r);
  border:1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(111,130,255,.07), rgba(155,108,255,.06)),
    linear-gradient(180deg, rgba(9,12,27,.92), rgba(6,8,18,.84));
  box-shadow:var(--shadow2);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}

.site-title{
  font-family:var(--font-mono);
  font-size:26px;
  line-height:1.2;
  font-weight:400;
  letter-spacing:0;
  color:var(--text);
  text-decoration:none;
}

.site-nav{
  display:flex;
  flex-wrap:wrap;
  gap:.1rem;
}

.site-nav a{
  border-radius:var(--pill);
  margin:0 .28rem;
  padding:.48rem .78rem;
  text-decoration:none;
  color:var(--text);
  opacity:.86;
  font-family:var(--font-mono);
  font-size:15px;
  font-weight:400;
}

.site-nav a:hover,
.site-nav a:focus{
  background:var(--accent-soft);
  color:var(--text);
  opacity:1;
  outline:1px solid var(--line-strong);
  outline-offset:0;
}

.site-nav a[aria-current="page"]{
  background:var(--accent-soft);
  opacity:1;
  outline:1px solid var(--accent-line);
}

.site-footer{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.6rem;
  max-width:var(--maxw);
  margin:3.2rem auto 1.6rem;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.10);
  color:var(--muted);
  font-size:14px;
}

.site-footer a{
  color:var(--muted);
  text-decoration:none;
}
.site-footer a:hover{ color:var(--accent) }

/* --------------------------------------------------------- content type */
.page-content{
  margin:1.2rem auto 0;
}

.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4{
  color:var(--text);
  font-family:var(--font-mono);
  font-weight:400;
  letter-spacing:0;
}

.page-content h1{
  font-size:38px;
  line-height:1.22;
  margin:.45rem 0 1rem;
  color:var(--accent);
}

.page-content h2{
  font-size:24px;
  line-height:1.35;
  margin-top:2.6rem;
  padding-top:.7rem;
  border-top:1px solid rgba(255,255,255,.10);
}

.page-content h3{
  font-size:19px;
  line-height:1.45;
  margin-bottom:.55rem;
}

.page-content p,
.page-content li{
  font-size:16px;
}

.page-content a{
  color:inherit;
  text-decoration:underline;
  text-decoration-color:rgba(111,130,255,.62);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

.page-content a:hover{ text-decoration-color:rgba(213,92,255,.90) }

.page-content strong,
.page-content b{
  color:rgba(250,252,255,.98);
  font-weight:400;
  opacity:1;
}

/* ----------------------------------------------------------- components */
.project-card{
  border:1px solid var(--line);
  border-radius:var(--r);
  background:
    linear-gradient(90deg, rgba(111,130,255,.045), rgba(155,108,255,.045)),
    linear-gradient(180deg, var(--glass1), var(--glass2));
  box-shadow:var(--shadow1);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  padding:1.05rem 1.05rem .95rem;
  margin:0.95rem 0 1.15rem;
}

.project-card > :first-child{
  margin-top: 0.2rem;
}

.eyebrow{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:400;
  letter-spacing:0;
  color:var(--accent);
  opacity:.92;
}

.kicker{
  color:var(--muted);
}

.mini-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:.95rem;
}

.mini-card{
  padding:1rem;
  border:1px solid rgba(116,154,255,.18);
  border-radius:var(--r);
  background:
    linear-gradient(180deg, rgba(111,130,255,.035), rgba(155,108,255,.018)),
    var(--glass3);
}

.mini-card p{
  margin:.42rem 0 .85rem;
}

.mini-kicker{
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:400;
  letter-spacing:0;
  color:var(--accent);
  opacity:.92;
}

.flow-diagram{
  display:flex;
  flex-wrap:wrap;
  gap:.72rem;
  align-items:stretch;
}

.flow-step{
  flex:1 1 180px;
  min-width:180px;
  padding:.95rem;
  border:1px solid rgba(116,154,255,.18);
  border-radius:var(--r);
  background:
    linear-gradient(180deg, rgba(111,130,255,.035), rgba(155,108,255,.018)),
    var(--glass3);
}

.flow-step b,
.flow-step span{
  display:block;
}

.flow-step span{
  margin-top:.3rem;
  color:var(--muted);
}

.flow-arrow{
  align-self:center;
  font-size:16px;
  color:var(--accent);
}

.result-strip{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  margin-top:.85rem;
}

.result-strip span{
  padding:.4rem .7rem;
  border-radius:var(--pill);
  border:1px solid rgba(116,154,255,.18);
  background:rgba(111,130,255,.045);
  font-size:15px;
}

.result-table{
  width:100%;
  border-collapse:collapse;
  margin-top:.45rem;
  overflow:hidden;
  border-radius:var(--r);
  border:1px solid rgba(116,154,255,.18);
}

.result-table th,
.result-table td{
  padding:.72rem .68rem;
  border-bottom:1px solid rgba(116,154,255,.18);
  text-align:left;
}

.result-table th{
  color:var(--accent);
  font-weight:400;
  background:rgba(111,130,255,.055);
}

.result-table tr:last-child td{
  border-bottom:0;
}

.proof-callout{
  display:flex;
  flex-direction:column;
  gap:.22rem;
  margin-top:.9rem;
  padding:.82rem .9rem;
  border-left:3px solid var(--accent);
  border-radius:var(--r);
  background:linear-gradient(90deg, rgba(111,130,255,.10), rgba(155,108,255,.07));
}

.proof-callout b{
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:400;
  letter-spacing:0;
  color:var(--accent);
  opacity:.92;
}

.proof-callout span{
  color:var(--muted);
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:.42rem;
  padding:.56rem .86rem;
  border-radius:var(--pill);
  border:1px solid rgba(116,154,255,.28);
  background:
    linear-gradient(90deg, rgba(111,130,255,.10), rgba(155,108,255,.08)),
    rgba(6,8,18,.72);
  text-decoration:none;
  font-family:var(--font-mono);
  font-size:15px;
  font-weight:400;
  color:var(--text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025), 0 0 16px rgba(111,130,255,.06);
  transition:box-shadow 140ms ease, background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.btn:hover{
  border-color:var(--accent-line);
  background:linear-gradient(90deg, rgba(111,130,255,.20), rgba(155,108,255,.16), rgba(213,92,255,.10));
  box-shadow:var(--shadow2);
  color:#ffffff;
}

/* media inside cards (video / screenshot) */
.media{
  width:100%;
  border-radius:var(--r);
  margin-top:.6rem;
  border:1px solid rgba(255,255,255,.14);
  display:block;
}

.btn-row{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  margin-top:.8rem;
}

/* -------------------------------------------------------------- solver */
.solver-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(280px, .85fr);
  gap:1rem;
  margin-top:.6rem;
}

.solver-form{
  display:grid;
  gap:.7rem;
  margin:0;
}

.solver-form fieldset{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:.6rem;
  min-width:0;
  margin:0;
  padding:.8rem;
  border:1px solid rgba(116,154,255,.18);
  border-radius:var(--r);
}

.solver-form legend{
  padding:0 .35rem;
  color:var(--accent);
  font-size:13px;
  font-weight:400;
}

.solver-form label{
  display:grid;
  gap:.3rem;
}

.solver-form label > span{
  color:var(--muted);
  font-size:13px;
}

.solver-form input,
.solver-form select{
  width:100%;
  min-height:38px;
  padding:0 .55rem;
  border:1px solid rgba(116,154,255,.18);
  border-radius:var(--pill);
  background:rgba(6,8,18,.6);
  color:var(--text);
  font:inherit;
  font-size:14px;
}

.solver-form input:focus,
.solver-form select:focus{
  outline:1px solid var(--accent-line);
  outline-offset:0;
  border-color:var(--accent-line);
}

.solver-note{
  margin:0;
  color:var(--muted);
  font-size:13px;
}

.solver-output{
  display:grid;
  gap:.7rem;
  align-content:start;
}

.solver-output article{
  padding:.95rem 1rem;
  border:1px solid rgba(116,154,255,.18);
  border-radius:var(--r);
  background:
    linear-gradient(180deg, rgba(111,130,255,.05), rgba(155,108,255,.02)),
    var(--glass3);
}

.solver-output span{
  display:block;
  margin-bottom:.5rem;
  color:var(--accent);
  font-size:13px;
}

.solver-output strong{
  display:block;
  margin-bottom:.45rem;
  font-size:clamp(26px, 4.5vw, 40px);
  line-height:1;
  font-weight:400;
}

.solver-output p{
  margin:0;
  color:var(--muted);
  font-size:13px;
}

.solver-output .solver-status{
  border-left:3px solid var(--accent);
}

/* --------------------------------------------------------- focus / code */
a:focus,
button:focus{
  outline:1px solid rgba(79,125,255,.58);
  outline-offset:2px;
}

:focus-visible{
  outline:1px solid rgba(79,125,255,.58);
  outline-offset:3px;
  border-radius:10px;
}

code,
pre,
.highlight{
  font-family:var(--font-mono);
  -webkit-font-smoothing:none;
  font-smooth:never;
  text-rendering:optimizeSpeed;
}

/* ------------------------------------------------------------ responsive */
@media (max-width:720px){
  .page-wrap{ padding:0 var(--pad-m) }

  .project-card{
    padding:.92rem .9rem .82rem;
  }

  .mini-grid{
    grid-template-columns:1fr;
  }

  .flow-diagram{
    flex-direction:column;
  }

  .flow-arrow{
    align-self:flex-start;
    transform:rotate(90deg);
    margin:.1rem 0;
  }

  .page-content h1{ font-size:31px }

  .solver-grid{
    grid-template-columns:1fr;
  }

  .solver-form fieldset{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

/* ===================================================================
   v2 — light theme, toggles, search/filter, trajectory, hero, reveal
   =================================================================== */

/* shared new tokens (dark defaults; overridden in light) */
:root{
  --border-soft:rgba(116,154,255,.18);
}

/* ------------------------------------------------------------- light */
[data-theme="light"]{
  --bg0:#f7f8fc; --bg1:#eef1fb; --bg2:#e6eaf7;
  --text:rgba(18,22,40,.94);
  --muted:rgba(52,62,100,.74);
  --line:rgba(79,101,255,.26);
  --line-strong:rgba(79,101,255,.42);
  --glass1:rgba(255,255,255,.82);
  --glass2:rgba(246,248,255,.70);
  --glass3:rgba(79,101,255,.04);
  --shadow1:0 14px 36px rgba(40,60,120,.12), 0 0 24px rgba(78,111,255,.05);
  --shadow2:0 8px 20px rgba(40,60,120,.10);
  --accent:#3a5cff; --accent-2:#5a6cff; --accent-3:#b34cff;
  --accent-soft:rgba(58,92,255,.12);
  --accent-line:rgba(58,92,255,.45);
  --border-soft:rgba(58,92,255,.20);
  --star-op1:0; --star-op2:0;
  color-scheme: light;
}

[data-theme="light"] body{
  background:
    linear-gradient(rgba(20,30,80,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,30,80,.03) 1px, transparent 1px),
    radial-gradient(1200px 700px at 12% 8%, rgba(80,120,255,.10), transparent 62%),
    radial-gradient(1000px 620px at 88% 16%, rgba(150,110,255,.09), transparent 64%),
    radial-gradient(860px 580px at 48% 86%, rgba(210,100,255,.06), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 35%, var(--bg2));
  background-size:4px 4px, 4px 4px, auto, auto, auto, auto;
  background-attachment:fixed;
}

/* components with dark-hardcoded backgrounds need a light re-spec */
[data-theme="light"] .site-header{
  background:
    linear-gradient(90deg, rgba(111,130,255,.05), rgba(155,108,255,.04)),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,248,255,.86));
}
[data-theme="light"] .btn,
[data-theme="light"] .tool-btn{
  background:
    linear-gradient(90deg, rgba(111,130,255,.12), rgba(155,108,255,.10)),
    rgba(255,255,255,.80);
}
[data-theme="light"] .solver-form input,
[data-theme="light"] .solver-form select{
  background:rgba(255,255,255,.86);
}
[data-theme="light"] #traj-canvas{
  background:rgba(255,255,255,.55);
}
[data-theme="light"] .page-content strong,
[data-theme="light"] .page-content b{
  color:rgba(10,14,30,.96);
}

/* ------------------------------------------------ header tool buttons */
.header-tools{
  display:flex;
  align-items:center;
  gap:.4rem;
}

.tool-btn{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  padding:.42rem .62rem;
  border-radius:var(--pill);
  border:1px solid var(--border-soft);
  background:var(--accent-soft);
  color:var(--text);
  font-family:var(--font-mono);
  font-size:13px;
  line-height:1;
  cursor:pointer;
  transition:border-color 140ms ease, background 140ms ease, color 140ms ease;
}
.tool-btn:hover{
  border-color:var(--accent-line);
  color:var(--text);
}

/* ----------------------------------------------------- search/filter */
.project-search{
  display:grid;
  gap:.7rem;
  margin:.95rem 0 1.15rem;
}

.search-bar{
  width:100%;
  min-height:42px;
  padding:0 .8rem;
  border:1px solid var(--border-soft);
  border-radius:var(--pill);
  background:rgba(6,8,18,.5);
  color:var(--text);
  font:inherit;
  font-size:15px;
}
[data-theme="light"] .search-bar{ background:rgba(255,255,255,.86); }
.search-bar:focus{ outline:1px solid var(--accent-line); border-color:var(--accent-line); }

.tag-chips{
  display:flex;
  flex-wrap:wrap;
  gap:.42rem;
}

.tag-chip{
  padding:.34rem .66rem;
  border-radius:var(--pill);
  border:1px solid var(--border-soft);
  background:rgba(111,130,255,.045);
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:13px;
  cursor:pointer;
  transition:border-color 140ms ease, color 140ms ease, background 140ms ease;
}
.tag-chip:hover{ color:var(--text); border-color:var(--accent-line); }
.tag-chip[aria-pressed="true"]{
  background:var(--accent-soft);
  color:var(--text);
  border-color:var(--accent-line);
}

.search-empty{
  margin:.2rem 0 0;
  color:var(--muted);
  font-size:14px;
}

[data-search-item].is-hidden{ display:none; }

.project-board .project-post,
.project-card[data-search-item]{
  transition:transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.project-card[data-search-item]:hover{
  transform:translateY(-3px);
  border-color:var(--accent-line);
}

/* ------------------------------------------------ trajectory canvas */
.traj-wrap{ margin-top:.9rem; }
#traj-canvas{
  width:100%;
  height:auto;
  display:block;
  border:1px solid var(--border-soft);
  border-radius:var(--r);
  background:rgba(0,0,0,.18);
}
.traj-legend{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:.55rem;
  font-size:13px;
  color:var(--muted);
}
.traj-legend span{ display:inline-flex; align-items:center; gap:.4rem; }
.traj-legend i{
  width:14px; height:3px; border-radius:2px; display:inline-block;
}

/* --------------------------------------------------------- hero canvas */
.hero-wrap{ position:relative; overflow:hidden; }
#hero-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}
.hero-wrap > :not(#hero-canvas){ position:relative; z-index:1; }

.type-cursor{
  display:inline-block;
  width:.6ch;
  animation:type-blink 1s steps(1) infinite;
  color:var(--accent);
}
@keyframes type-blink{ 0%,50%{opacity:1} 50.01%,100%{opacity:0} }

/* ------------------------------------------------------ scroll reveal */
.js .reveal{ opacity:0; transform:translateY(14px); }
.reveal.is-visible{
  opacity:1;
  transform:none;
  transition:opacity .5s ease, transform .5s ease;
}

/* ----------------------------------------------------- i18n / theming */
.i18n-pending main{ visibility:hidden; }

body,
.site-header,
.project-card,
.mini-card,
.flow-step,
.btn,
.tool-btn,
.solver-form input,
.solver-form select{
  transition:color .25s ease, border-color .25s ease, background-color .25s ease;
}

@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1; transform:none; }
  .reveal.is-visible{ transition:none; }
  .type-cursor{ animation:none; }
  *{ transition:none !important; }
}

@media (max-width:720px){
  .header-tools{ order:3; }
}