@font-face {
    font-family: 'KccAnchangho';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2402_1@1.0/KCC-Ahnchangho.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}
@font-face {
    font-family: 'GounBatang';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/GowunBatang-Regular.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GounBatang';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/GowunBatang-Bold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

:root{
  --bg0:#070a12;
  --bg1:#0a0f1f;
  --ink: rgba(255,255,255,0.86);
  --muted: rgba(255,255,255,0.56);
  --hair: rgba(255,255,255,0.14);

  --maxw: 1200px;
  --radius: 18px;

  --shadow: 0 26px 80px rgba(0,0,0,0.62);
  --shadowSoft: 0 14px 46px rgba(0,0,0,0.55);

  --title: "GounBatang", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --script: "KccAnchangho", "Apple Chancery", "Snell Roundhand", "Brush Script MT", cursive;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color: var(--ink);
  font-family: var(--title);
  background: radial-gradient(1200px 700px at 50% 35%, rgba(255,255,255,0.06), transparent 70%),
              radial-gradient(1000px 520px at 18% 85%, rgba(120,160,255,0.06), transparent 65%),
              radial-gradient(1000px 520px at 82% 88%, rgba(190,120,255,0.05), transparent 65%),
              linear-gradient(180deg, var(--bg1), var(--bg0));
  overflow-x:hidden;
}

/* ---- starry sky layers ---- */
.sky{ position: fixed; inset:0; pointer-events:none; z-index:0; 
  isolation:isolate;
}



/* Ensure predictable stacking of sky layers */
.stars--far{ z-index: 1; }
.stars--mid{ z-index: 2; }
.stars--near{ z-index: 3; }
.nebula{ z-index: 4; }
.constellations{ z-index: 5; }
.vignette{ z-index: 7; } 

/* ---------------- Sparkle stars (dense + visible) ---------------- */
.sky::after{
  content:"";
  position:absolute;
  inset:-20%;
  pointer-events:none;
  z-index: 6;              /* above constellations, under vignette */
  opacity: .85;

  /* a repeating “field” of small white stars */
  background-image:
    radial-gradient(1px 1px at 18px 22px, rgba(255,255,255,.95) 60%, transparent 62%),
    radial-gradient(1px 1px at 74px 96px, rgba(255,255,255,.70) 60%, transparent 62%),
    radial-gradient(1.2px 1.2px at 122px 44px, rgba(255,255,255,.85) 60%, transparent 62%),
    radial-gradient(1px 1px at 156px 132px, rgba(255,255,255,.60) 60%, transparent 62%),
    radial-gradient(1.4px 1.4px at 40px 152px, rgba(255,255,255,.90) 60%, transparent 62%),
    radial-gradient(1px 1px at 98px 168px, rgba(255,255,255,.55) 60%, transparent 62%);

  background-size: 180px 180px; /* repeat grid = lots of dots */
  filter: blur(.1px);
  mix-blend-mode: screen;

  animation:
    sparkleTwinkle 2.8s ease-in-out infinite alternate,
    sparkleDrift 180s linear infinite;
}

@keyframes sparkleTwinkle{
  from { opacity: .25; }
  to   { opacity: .95; }
}

@keyframes sparkleDrift{
  to { transform: translate3d(70px, -50px, 0); }
}

/* keep vignette on top */

.stars{
  position:absolute; inset:-30%;
  background-repeat: repeat;
  transform: translateZ(0);
  opacity: .9;
}

/* Far: tiny & many */
.stars--far{
  opacity: .65;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 30% 80%, rgba(255,255,255,0.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 65% 35%, rgba(255,255,255,0.40) 50%, transparent 51%),
    radial-gradient(1px 1px at 85% 70%, rgba(255,255,255,0.35) 50%, transparent 51%);
  background-size: 260px 260px;
  filter: blur(.15px);
  animation: driftFar 80s linear infinite;
}

/* Mid: slightly larger */
.stars--mid{
  opacity: .50;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 14%, rgba(255,255,255,0.55) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 48% 58%, rgba(255,255,255,0.40) 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 76% 26%, rgba(255,255,255,0.42) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 90% 78%, rgba(255,255,255,0.35) 50%, transparent 51%);
  background-size: 420px 420px;
  filter: blur(.25px);
  animation: driftMid 120s linear infinite;
}

/* Near: few brighter stars + twinkle */
.stars--near{
  opacity: .62;
  background-image:
    radial-gradient(2.4px 2.4px at 18% 34%, rgba(255,255,255,0.70) 50%, transparent 52%),
    radial-gradient(2px 2px at 62% 22%, rgba(255,255,255,0.55) 50%, transparent 52%),
    radial-gradient(2.8px 2.8px at 82% 62%, rgba(255,255,255,0.62) 50%, transparent 52%),
    radial-gradient(1.8px 1.8px at 42% 74%, rgba(255,255,255,0.48) 50%, transparent 52%);
  background-size: 720px 720px;
  animation: twinkle 6s ease-in-out infinite alternate, driftNear 160s linear infinite;
}


@keyframes driftFar{ to{ transform: translate3d(60px, 40px, 0); } }
@keyframes driftMid{ to{ transform: translate3d(-70px, 50px, 0); } }
@keyframes driftNear{ to{ transform: translate3d(90px, -60px, 0); } }
@keyframes twinkle{ from{ opacity:.45; } to{ opacity:.70; } }

/* Nebula haze */
.nebula{
  position:absolute; inset:-10%;
  background:
    radial-gradient(900px 520px at 40% 45%, rgba(190,210,255,0.10), transparent 60%),
    radial-gradient(900px 520px at 70% 65%, rgba(220,170,255,0.08), transparent 60%),
    radial-gradient(800px 500px at 25% 75%, rgba(255,220,170,0.06), transparent 60%);
  filter: blur(10px);
  opacity: .65;
  animation: nebula 40s ease-in-out infinite alternate;
}
@keyframes nebula{ to{ transform: translate3d(18px, -12px, 0); } }

/* Constellation-ish lines */
.constellations{
  position:absolute; inset:0;
  opacity:.18;
  background:
    linear-gradient(120deg, transparent 0 48%, rgba(255,255,255,0.18) 49% 49.3%, transparent 49.6% 100%),
    linear-gradient(20deg, transparent 0 57%, rgba(160,200,255,0.16) 58% 58.2%, transparent 58.6% 100%);
  filter: blur(.4px);
}

/* Vignette */
.vignette{
  position:absolute; inset:0;
  background: radial-gradient(1100px 700px at 50% 40%, transparent 45%, rgba(0,0,0,0.55) 100%);
  opacity: .75;
}

/* ---- poster block ---- */
.poster{
  position:relative;
  z-index:1;
  padding: 38px 18px 40px;
}

.posterInner{
  max-width: var(--maxw);
  margin: 0 auto;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 26px;
  background: rgba(255,255,255,0.03);
  box-shadow: var(--shadowSoft);
  overflow:hidden;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.mast{
  padding: 26px 22px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.kicker{
  font-size: 12px;
  letter-spacing:.26em;
  text-transform: uppercase;
  opacity:.70;
}
.titleScript{
  margin-top: 10px;
  font-family: var(--script);
  font-size: clamp(46px, 6.5vw, 92px);
  letter-spacing:.02em;
  text-shadow: 0 0 26px rgba(200,220,255,0.16);
}
.subtitle{
  margin-top: 6px;
  font-size: 12px;
  letter-spacing:.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.64);
}

/* Hotspot “poster map” area */
.hotspots{
  position: relative;
  height: min(76vh, 720px);
  padding: 18px 10px 22px;
}

/* Planet tint per hotspot (now includes fill for planet orb) */
.p-sun{ --glow: rgba(255,210,120,0.35); --fill:#f4c77e; }
.p-mercury{ --glow: rgba(200,210,230,0.22); --fill:#bfc7d3; }
.p-venus{ --glow: rgba(255,170,210,0.22); --fill:#e3b0b6; }
.p-earth{ --glow: rgba(140,200,255,0.26); --fill:#7fb3da; }
.p-moon{ --glow: rgba(255,255,255,0.14); --fill:#d8dbe1; }
.p-mars{ --glow: rgba(255,120,110,0.22); --fill:#d07a74; }
.p-jupiter{ --glow: rgba(255,210,170,0.20); --fill:#cfa58b; }
.p-saturn{ --glow: rgba(245,225,170,0.20); --fill:#d7c08a; }
.p-uranus{ --glow: rgba(140,255,240,0.14); --fill:#86c7c5; }
.p-neptune{ --glow: rgba(110,150,255,0.22); --fill:#5b79c9; }
.p-pluto{ --glow: rgba(220,220,255,0.12); --fill:#a8a9b7; }

/* ---------------- Smaller, tighter planet labels ---------------- */

.hotspot{
  position:absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  transform: translate(-50%, -50%);

  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap: 2px;

  padding-left: 48px;   /* was 62 */
  min-width: 100px;     /* was 190 */

  border: none;
  background: transparent;
  box-shadow: none;

  cursor:pointer;
  color: rgba(255,255,255,0.86);
  text-align:left;

  transition: transform 200ms ease, filter 200ms ease;
}

/* planet orb smaller */
.hotspot::before{
  content:"";
  position:absolute;
  left: 0;
  top: 4px;
  width: 34px;   /* was 46 */
  height: 34px;

  border-radius: 999px;

  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.22), transparent 45%),
    radial-gradient(circle at 60% 80%, rgba(0,0,0,0.16), transparent 58%),
    var(--fill, rgba(255,255,255,0.45));

  box-shadow:
    0 0 14px var(--glow),
    0 6px 14px rgba(0,0,0,0.5);

  border: 1px solid rgba(255,255,255,0.18);
}

/* Saturn ring scaled down */
.hotspot.p-saturn::after{
  left: -4px;
  top: 20px;
  width: 46px;
  height: 12px;
}

/* tighter type */
.hKo{
  font-size: 13px;   /* was 15 */
  letter-spacing: .12em;
}
.hEn{
  font-size: 10px;   /* was 11 */
  letter-spacing: .22em;
  font-family: var(--script);
}

/* glyph smaller */
.hGlyph{
  left: 9px;
  top: 10px;
  font-size: 14px;
}


/* Hint */
.hint{
  padding: 0 22px 20px;
  color: rgba(255,255,255,0.56);
  font-size: 13px;
}

kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  border-bottom-color: rgba(255,255,255,0.10);
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(0,0,0,0.22);
}

/* ---- floating panel ---- */
.panel{
  position: fixed;
  inset: 0;
  display:none;
  align-items:center;
  justify-content:center;
  padding: 18px;
  z-index: 10;
}

.panel.is-open{ display:flex; }

.panelGlass{
  width: min(980px, 100%);
  max-height: min(80vh, 720px);
  overflow:auto;

  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(10,14,24,0.78);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
}

.panelClose{
  position:absolute;
  right: 10px;
  top: 10px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.25);
  color: rgba(255,255,255,0.78);
  font-size: 24px;
  cursor:pointer;
}

.panelHead{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 18px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.panelBadge{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 0 22px rgba(200,220,255,0.10);
}

.panelTitles{ display:flex; flex-direction:column; line-height:1.05; }
.panelKo{ font-size: 18px; letter-spacing:.14em; text-transform: uppercase; }
.panelEn{ font-size: 12px; letter-spacing:.28em; opacity:.62; text-transform: uppercase; }
.panelGlyph{ margin-left:auto; font-size: 22px; opacity:.72; }

.panelList{
  padding: 14px 14px 18px;
  display:grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 760px){
  .panelList{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Work links: remove border + border radius (no “tile” feel) */
.workCard{
  display:block;
  text-decoration:none;
  color: inherit;

  border: none;
  border-radius: 0;
  background: transparent;

  padding: 10px 2px 12px;
  transition: transform 220ms ease, opacity 220ms ease;
}
.workCard:hover{
  transform: translateY(-1px);
  opacity: 0.92;
}

.workTitle{
  font-weight: 760;
  letter-spacing:.02em;
  margin-bottom: 6px;

  text-decoration: underline;
  text-decoration-color: rgba(210,230,255,0.25);
  text-underline-offset: 4px;
}
.workCard:hover .workTitle{
  text-decoration-color: rgba(210,230,255,0.55);
}

.workMeta{ font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.workTags{ display:flex; flex-wrap:wrap; gap: 6px; margin-bottom: 10px; }
.tag{
  font-size: 12px;
  font-weight: 700;
  letter-spacing:.06em;
  padding: 2px 8px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.70);
}
.workExcerpt{ font-size: 12px; line-height: 1.45; color: rgba(255,255,255,0.72); }

.extlink {
  color: #c1f5fe;
  font-weight: 700;
}

.extlink:hover {
  background-color: #c1f5fe;
  color: #0d0d1a;
}
/* Footer */
.foot{
  position: relative;
  z-index: 2;
  padding: 16px 18px 26px;
}
.footInner{
  max-width: var(--maxw);
  margin: 0 auto;
  display:flex;
  flex-direction:column;
  gap: 4px;
}
.fine{ font-size: 12px; opacity: .72; }
.fine.muted{ opacity: .52; }

@media (prefers-reduced-motion: reduce){
  .stars--far, .stars--mid, .stars--near, .nebula{ animation:none; }
}

/* ---------------- Mobile: poster -> list layout ---------------- */
@media (max-width: 700px){
  .hotspots{
    height: auto;
    padding: 14px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  /* Turn absolutely positioned hotspots into a clean list */
  .hotspot{
    position: relative;
    left: auto;
    top: auto;
    transform: none;

    width: 100%;
    min-width: 0;

    /* give a tiny separation without looking like “tiles” */
    padding-left: 62px;
    padding-top: 6px;
    padding-bottom: 10px;
  }

  /* Keep planet orb aligned nicely */
  .hotspot::before{
    left: 0;
    top: 6px;
  }

  .hotspot.p-saturn::after{
    top: 27px;
  }

  /* Glyph stays inside orb */
  .hGlyph{
    left: 14px;
    top: 14px;
  }

  /* Optional: add a faint divider line between items */
  .hotspot + .hotspot{
    border-top: 1px solid rgba(255,255,255,0.10);
    padding-top: 16px;
  }

  /* Prevent hover jumpiness on touch devices */
  .hotspot:hover{
    transform: none;
  }
}

/* ---------------- Inactive / empty planets ---------------- */

.hotspot.is-disabled{
  cursor: default;
  opacity: .45;
  filter: grayscale(0.6);
}

/* kill hover movement */
.hotspot.is-disabled:hover{
  transform: translate(-50%, -50%);
  filter: grayscale(0.6);
}

/* gray planet */
.hotspot.is-disabled::before{
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), transparent 45%),
    radial-gradient(circle at 60% 80%, rgba(0,0,0,0.18), transparent 58%),
    #8a8f9c;

  box-shadow:
    0 0 10px rgba(255,255,255,0.08),
    0 6px 12px rgba(0,0,0,0.4);
}

/* dim label */
.hotspot.is-disabled .hKo,
.hotspot.is-disabled .hEn{
  opacity: .55;
}


/* ---------------- Planetarium focus mode ---------------- */

/* soft blackout curtain */
.panel.is-open::before{
  content:"";
  position: fixed;
  inset:0;
  background: rgba(5,8,18,0.65);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index:-1;  /* sits behind the panel but above page */
}

/* dim the poster */
.panel.is-open ~ .poster{
  filter: brightness(.55) saturate(.9);
  transition: filter 300ms ease;
}

/* dim star layers */
.panel.is-open ~ .sky{
  filter: brightness(.6);
  transition: filter 300ms ease;
}