@font-face {
  font-family: "HBIOS Preview";
  src: url("../packages/01-korean/HBIOS-SYS-v1.046/HBIOS-SYS.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "HBIOS Prop Preview";
  src: url("../packages/01-korean/HBIOS-SYS-v1.046/HBIOS-SYS-prop.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Neo Preview";
  src: url("../packages/01-korean/NeoDunggeunmo-v1.601/neodgm.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Neo Code Preview";
  src: url("../packages/01-korean/NeoDunggeunmo-v1.601/neodgm_code.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Neo Pro Preview";
  src: url("../packages/01-korean/NeoDunggeunmo-Pro-v1.020/NeoDunggeunmoPro-Regular.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "GNU Unifont Preview";
  src: url("../packages/20-modern-unicode/GNU-Unifont-17.0.05/unifont-17.0.05.otf") format("opentype");
  font-display: swap;
}

:root {
  --bg: #07100f;
  --bg-soft: #0a1513;
  --panel: #0d1a17;
  --panel-2: #11211d;
  --line: #29453d;
  --line-soft: #1c322c;
  --ink: #edf1df;
  --muted: #94a49b;
  --green: #91f2af;
  --green-deep: #112e1c;
  --amber: #ffcb72;
  --cyan: #78dfe1;
  --violet: #c7a6ff;
  --danger: #ff8b75;
  --shadow: 8px 8px 0 #020706;
  --shell: min(1240px, calc(100% - 40px));
  --preview-size: 32px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI", "Malgun Gothic", system-ui, sans-serif;
  line-height: 1.55;
  min-width: 320px;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 84% 8%, rgba(72, 147, 111, .12), transparent 30%),
    linear-gradient(135deg, rgba(145, 242, 175, .025) 25%, transparent 25%) 0 0 / 24px 24px;
}

.screen-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .11;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 3px, rgba(255,255,255,.05) 4px);
  mix-blend-mode: soft-light;
}

a { color: inherit; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--green);
  color: #041007;
  transform: translateY(-150%);
}
.skip-link:focus { transform: none; }

.shell { width: var(--shell); margin-inline: auto; }

.topbar {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font: 700 12px/1 ui-monospace, Consolas, monospace;
  letter-spacing: .15em;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: #06100b;
  background: var(--green);
  box-shadow: 4px 4px 0 #244c31;
  letter-spacing: 0;
}

.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a {
  color: var(--muted);
  font: 600 12px/1 ui-monospace, Consolas, monospace;
  text-decoration: none;
  letter-spacing: .04em;
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--green); }

.hero { border-bottom: 1px solid var(--line); overflow: hidden; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr);
  gap: 8vw;
  align-items: center;
  min-height: 760px;
  padding-block: 64px 92px;
}
.hero-grid > *, .section-heading > *, .preview-console > *, .raw-grid > *, .guide-grid > * { min-width: 0; }

.eyebrow, .section-index {
  margin: 0 0 24px;
  color: var(--green);
  font: 700 12px/1.2 ui-monospace, Consolas, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  background: var(--green);
  box-shadow: 0 0 16px var(--green);
}

h1, h2, h3, p { overflow-wrap: anywhere; }
h1 {
  margin: 0;
  font: 900 clamp(72px, 10.2vw, 148px)/.72 ui-monospace, Consolas, monospace;
  letter-spacing: -.105em;
  text-transform: uppercase;
}
h1 span { color: var(--green); }
.hero-lead {
  max-width: 660px;
  margin: 46px 0 30px;
  color: #c7d0c7;
  font-size: clamp(17px, 2vw, 22px);
}
.hero-actions, .card-actions, .raw-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 10px 17px;
  border: 1px solid #567267;
  border-radius: 0;
  background: #0c1815;
  color: var(--ink);
  font: 700 12px/1 ui-monospace, Consolas, monospace;
  letter-spacing: .035em;
  text-decoration: none;
  cursor: pointer;
}
.button:hover, .button:focus-visible { border-color: var(--green); color: var(--green); transform: translate(-1px, -1px); }
.button-primary { background: var(--green); color: #041108; border-color: var(--green); box-shadow: 4px 4px 0 #274d32; }
.button-primary:hover, .button-primary:focus-visible { color: #041108; background: #b3ffc8; }
.button-small { min-height: 36px; padding: 8px 12px; font-size: 11px; }
.text-link { margin-left: auto; color: var(--muted); font: 700 11px/1 ui-monospace, monospace; text-decoration: none; }
.text-link:hover { color: var(--green); }

.terminal-panel { width: 100%; min-width: 0; border: 1px solid #406758; background: #030706; box-shadow: var(--shadow); transform: rotate(.6deg); }
.terminal-bar { display: flex; gap: 7px; align-items: center; height: 38px; padding: 0 12px; border-bottom: 1px solid #2a483e; background: #101d1a; }
.terminal-bar span { width: 8px; height: 8px; border: 1px solid #5f766d; }
.terminal-bar span:first-child { background: var(--danger); border-color: var(--danger); }
.terminal-bar span:nth-child(2) { background: var(--amber); border-color: var(--amber); }
.terminal-bar span:nth-child(3) { background: var(--green); border-color: var(--green); }
.terminal-bar b { max-width: 70%; margin-left: auto; overflow: hidden; color: #899a91; font: 600 10px ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
.terminal-body { min-width: 0; min-height: 400px; padding: 28px; overflow: hidden; font: 15px/1.75 "HBIOS Preview", ui-monospace, Consolas, monospace; color: #bad6c4; }
.terminal-body p { margin: 0 0 12px; }
.prompt, .terminal-ok { color: var(--green); }
.terminal-stats { margin: 28px 0; border-block: 1px solid #193328; }
.terminal-stats div { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; border-bottom: 1px dashed #1d382e; }
.terminal-stats div:last-child { border: 0; }
.terminal-stats dt { color: #6f8d7b; font-size: 12px; }
.terminal-stats dd { margin: 0; color: var(--amber); font-size: 24px; }
.cursor { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.section { padding-block: 112px; border-bottom: 1px solid var(--line-soft); }
.section-heading { display: grid; grid-template-columns: 1fr minmax(280px, 440px); gap: 60px; align-items: end; margin-bottom: 54px; }
.section-heading.compact { margin-bottom: 36px; }
.section-heading h2, .raw-grid h2, .guide-grid h2 {
  margin: 0;
  font: 800 clamp(38px, 5.3vw, 72px)/.98 ui-monospace, Consolas, monospace;
  letter-spacing: -.065em;
}
.section-heading > p { margin: 0 0 4px; color: var(--muted); font-size: 16px; }

.preview-console {
  position: sticky;
  top: 10px;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 18px;
  padding: 18px;
  margin-bottom: 28px;
  background: rgba(7, 16, 15, .94);
  border: 1px solid var(--line);
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
  backdrop-filter: blur(8px);
}
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field label, .preset-group > span { color: #a6b4ac; font: 700 10px/1 ui-monospace, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
textarea, input, select {
  width: 100%;
  border: 1px solid #3b5b50;
  border-radius: 0;
  outline: 0;
  background: #050b09;
  color: var(--ink);
}
textarea { min-height: 88px; resize: vertical; padding: 12px 14px; font: 16px/1.5 ui-monospace, Consolas, monospace; }
input, select { min-height: 43px; padding: 9px 12px; font: 14px ui-monospace, Consolas, monospace; }
textarea:focus, input:focus, select:focus { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
input[type="range"] { min-height: 44px; padding: 0; accent-color: var(--green); }
.size-field output { float: right; color: var(--green); }
.preset-group { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.preset-group > span { margin-right: 6px; }
.preset-group button {
  padding: 7px 10px;
  border: 1px solid #314c43;
  background: #0d1916;
  color: #b6c1bb;
  font: 700 10px ui-monospace, Consolas, monospace;
  cursor: pointer;
}
.preset-group button:hover, .preset-group button:focus-visible { color: var(--green); border-color: var(--green); }

.featured-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.font-card { position: relative; display: flex; flex-direction: column; min-height: 430px; padding: 24px; border: 1px solid var(--line); background: var(--panel); box-shadow: 5px 5px 0 rgba(0,0,0,.25); }
.font-card::after { content: ""; position: absolute; width: 9px; height: 9px; right: 9px; bottom: 9px; border-right: 1px solid #567064; border-bottom: 1px solid #567064; }
.font-card.featured { border-color: #5b9a6c; background: #0e2018; }
.font-card.wide { grid-column: 1 / -1; min-height: 370px; }
.card-topline { display: flex; justify-content: space-between; gap: 12px; color: #73887d; font: 700 10px ui-monospace, monospace; letter-spacing: .08em; }
.badge { display: inline-flex; align-items: center; padding: 5px 7px; border: 1px solid #50655d; color: #bdc9c2; }
.badge-green { color: var(--green); border-color: #397749; }
.badge-amber { color: var(--amber); border-color: #745b2f; }
.badge-cyan { color: var(--cyan); border-color: #326769; }
.badge-violet { color: var(--violet); border-color: #5a4774; }
.font-card h3 { margin: 28px 0 8px; font: 800 clamp(24px, 3vw, 38px)/1 ui-monospace, Consolas, monospace; letter-spacing: -.04em; }
.card-desc { min-height: 50px; margin: 0 0 20px; color: var(--muted); font-size: 14px; }
.live-sample {
  flex: 1;
  min-height: 136px;
  padding: 18px;
  border-block: 1px dashed #335047;
  color: #efffe8;
  font-size: var(--preview-size);
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: hidden;
}
[data-font-card="HBIOS"] .live-sample { font-family: "HBIOS Preview", monospace; }
[data-font-card="HBIOSProp"] .live-sample { font-family: "HBIOS Prop Preview", sans-serif; }
[data-font-card="NeoDunggeunmo"] .live-sample { font-family: "Neo Preview", monospace; }
[data-font-card="NeoDunggeunmoCode"] .live-sample { font-family: "Neo Code Preview", monospace; font-variant-ligatures: contextual; }
[data-font-card="NeoDunggeunmoPro"] .live-sample { font-family: "Neo Pro Preview", sans-serif; }
[data-font-card="GNUUnifont"] .live-sample { font-family: "GNU Unifont Preview", monospace; }
.card-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 14px 0; color: #83968d; font: 700 10px ui-monospace, monospace; text-transform: uppercase; }

.section-map { background: #0a1613; }
.map-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.map-grid article { display: flex; min-height: 190px; flex-direction: column; padding: 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.map-grid b { color: var(--green); font: 700 13px ui-monospace, monospace; }
.map-grid strong { margin-top: auto; font: 800 22px ui-monospace, monospace; }
.map-grid span { color: var(--muted); font-size: 13px; }
.map-grid em { margin-top: 14px; color: var(--amber); font: normal 700 11px ui-monospace, monospace; }
.map-grid .warning b, .map-grid .warning em { color: var(--danger); }

.explorer-toolbar { display: grid; grid-template-columns: 1.25fr .6fr .8fr 1.35fr; gap: 12px; padding: 16px; border: 1px solid var(--line); background: var(--panel); }
.result-line { display: flex; justify-content: space-between; padding: 20px 2px 12px; color: var(--muted); font: 12px ui-monospace, monospace; }
.result-line strong { color: var(--green); font-size: 18px; }
.legend { display: flex; align-items: center; gap: 7px; }
.dot-437, .dot-plus { display: inline-block; width: 8px; height: 8px; margin-left: 8px; }
.dot-437 { background: var(--green); }
.dot-plus { background: var(--amber); }
.font-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.old-font-card { min-width: 0; padding: 16px; border: 1px solid var(--line-soft); background: #0a1513; }
.old-font-card:hover { border-color: #4c7667; background: #0d1b18; }
.old-font-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.old-font-head h3 { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 13px ui-monospace, Consolas, monospace; }
.charset-tag { flex: 0 0 auto; padding: 3px 5px; color: #06110a; background: var(--green); font: 800 9px ui-monospace, monospace; }
.charset-tag.plus { background: var(--amber); }
.old-font-preview { min-height: 92px; margin: 14px 0; padding: 13px 0; border-block: 1px dashed #253f36; font-size: 22px; line-height: 1.2; word-break: break-word; overflow: hidden; }
.old-font-foot { display: flex; justify-content: space-between; gap: 10px; color: #71877b; font: 10px ui-monospace, monospace; }
.old-font-foot a { color: #9bb8a7; text-decoration: none; }
.old-font-foot a:hover { color: var(--green); }
.load-row { display: flex; justify-content: center; padding-top: 28px; }
.notice { padding: 14px; border: 1px solid var(--amber); color: var(--amber); }
.empty-state { grid-column: 1 / -1; padding: 70px 20px; border: 1px dashed var(--line); color: var(--muted); text-align: center; font: 14px ui-monospace, monospace; }

.raw-section { background: #132019; }
.raw-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(430px, 1.1fr); gap: 8vw; align-items: center; }
.raw-lead { margin: 28px 0; color: #b3c0b6; }
.legal-note { margin-top: 22px; padding-left: 12px; border-left: 2px solid var(--danger); color: #c79b93; font-size: 12px; }
.height-chart { display: flex; flex-direction: column; gap: 8px; padding: 24px; border: 1px solid #415b4c; background: #07100d; box-shadow: var(--shadow); }
.chart-row { display: grid; grid-template-columns: 46px 1fr 50px; gap: 12px; align-items: center; font: 11px ui-monospace, monospace; }
.chart-label { color: #a8b9ad; }
.chart-track { height: 14px; background: #14251e; overflow: hidden; }
.chart-bar { height: 100%; background: var(--green); min-width: 2px; }
.chart-count { color: var(--amber); text-align: right; }

.download-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.download-card { display: flex; min-height: 340px; flex-direction: column; padding: 22px; border: 1px solid var(--line); background: var(--panel); }
.download-card.primary-download { border-color: #5b8c67; background: #0d2117; }
.file-type { color: var(--green); font: 700 10px ui-monospace, monospace; letter-spacing: .1em; }
.download-card h3 { margin: 42px 0 12px; font: 800 22px/1.1 ui-monospace, monospace; }
.download-card p { color: var(--muted); font-size: 13px; }
.download-card > div { display: flex; justify-content: space-between; gap: 8px; margin-top: auto; padding: 18px 0; border-top: 1px dashed var(--line); font: 10px ui-monospace, monospace; }
.download-card > div span { color: var(--muted); }

.guide-section { background: #060c0a; }
.guide-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; }
.format-list { margin: 0; border-top: 1px solid var(--line); }
.format-list div { display: grid; grid-template-columns: 150px 1fr; padding: 17px 0; border-bottom: 1px solid var(--line-soft); }
.format-list dt { color: var(--green); font: 800 12px ui-monospace, monospace; }
.format-list dd { margin: 0; color: var(--muted); font-size: 13px; }

.source-links { display: grid; grid-template-columns: repeat(4, 1fr); border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.source-links a { display: flex; min-height: 94px; flex-direction: column; justify-content: space-between; padding: 15px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-decoration: none; font: 700 13px ui-monospace, monospace; }
.source-links a:hover { background: var(--panel-2); color: var(--green); }
.source-links span { color: var(--muted); font-size: 9px; text-transform: uppercase; }

footer { padding-block: 46px; background: #030706; }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr auto; gap: 30px; color: #788a80; font: 11px/1.7 ui-monospace, monospace; }
.footer-grid p { margin: 0; }
.footer-grid b, .footer-grid a { color: var(--green); }

@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; gap: 60px; min-height: auto; }
  .terminal-panel { max-width: 680px; }
  .map-grid, .download-grid { grid-template-columns: repeat(2, 1fr); }
  .explorer-toolbar { grid-template-columns: 1fr 1fr; }
  .font-grid { grid-template-columns: repeat(2, 1fr); }
  .raw-grid { grid-template-columns: 1fr; }
  .source-links { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  :root { --shell: calc(100% - 24px); --shadow: 5px 5px 0 #020706; }
  main, header, section, footer, .shell { max-width: 100%; }
  .shell { width: calc(100% - 24px); }
  .hero-copy, .terminal-panel, .section-heading, .preview-console,
  .featured-grid, .font-grid, .map-grid, .download-grid, .source-links,
  .explorer-toolbar, .raw-grid, .guide-grid { width: 100%; max-width: 100%; min-width: 0; }
  textarea, input, select { min-width: 0; max-width: 100%; }
  .screen-noise { display: none; }
  .topbar { min-height: 62px; }
  .nav-links a:not(:last-child) { display: none; }
  .hero-grid { padding-block: 44px 70px; }
  h1 { font-size: clamp(60px, 22vw, 86px); }
  .hero-lead { margin-top: 34px; }
  .terminal-panel { transform: none; overflow: hidden; }
  .terminal-body { min-height: 340px; padding: 18px; font-size: 13px; }
  .terminal-body p { word-break: break-all; }
  .terminal-stats div { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; }
  .section { padding-block: 76px; }
  .section-heading { grid-template-columns: 1fr; gap: 18px; margin-bottom: 36px; }
  .preview-console { position: relative; top: auto; grid-template-columns: 1fr; }
  .preset-group { grid-column: auto; }
  .featured-grid, .font-grid, .map-grid, .download-grid, .source-links { grid-template-columns: 1fr; }
  .font-card.wide { grid-column: auto; }
  .font-card { min-height: 400px; padding: 18px; }
  .live-sample { padding: 14px; }
  .explorer-toolbar { grid-template-columns: 1fr; }
  .result-line { align-items: flex-start; flex-direction: column; gap: 8px; }
  .raw-grid { grid-template-columns: minmax(0, 1fr); }
  .height-chart { padding: 14px; }
  .guide-grid { grid-template-columns: 1fr; }
  .format-list div { grid-template-columns: 110px 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}