/* ============================================================
   GOWONU RECORD — 고원우 기록
   Diegetic archive stylesheet
   Palette (LOCKED): concrete gray / matte blood red / funeral white (소복)
   No green. Red is dried-blood matte, never neon.
   ============================================================ */

:root {
  --concrete-0: #111113;
  --concrete-1: #1a1a1d;
  --concrete-2: #232326;
  --concrete-3: #2e2e32;
  --concrete-line: #3d3d42;
  --ink: #d8d5ce;          /* aged document ink */
  --ink-dim: #a3a19a;
  --sobok: #efece4;        /* funeral white */
  --blood: #7e2020;        /* matte dried blood */
  --blood-bright: #9c2a2a; /* stamp red, still matte */
  --paper: #d9d5ca;
  --paper-dark: #24241f;
  --mono: "IBM Plex Mono", "Courier New", monospace;
  --serif: "Noto Serif KR", "Times New Roman", serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--concrete-0);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.7;
  min-height: 100vh;
  position: relative;
}

/* --- film grain + scanline overlays ------------------------------- */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9001;
  background: repeating-linear-gradient(
    to bottom, transparent 0 2px, rgba(0,0,0,0.055) 2px 4px);
  opacity: .5;
}

::selection { background: var(--blood); color: var(--sobok); }

a { color: var(--ink); text-decoration-color: var(--blood); text-underline-offset: 3px; }
a:hover { color: var(--sobok); }

img { max-width: 100%; display: block; }

/* --- status ticker ------------------------------------------------ */
.ticker {
  background: var(--concrete-1);
  border-bottom: 1px solid var(--concrete-line);
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-dim);
  white-space: nowrap; overflow: hidden;
  padding: 5px 0;
}
.ticker span {
  display: inline-block;
  animation: tick 70s linear infinite;
  padding-left: 100%;
}
@keyframes tick { to { transform: translateX(-100%); } }

/* --- masthead ------------------------------------------------------ */
header.masthead {
  border-bottom: 3px double var(--concrete-line);
  background:
    linear-gradient(rgba(17,17,19,0.86), rgba(17,17,19,0.96)),
    var(--concrete-1);
  padding: 26px 20px 18px;
}
.mast-inner { max-width: 1380px; margin: 0 auto; }

.mast-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size: 11px; color: var(--ink-dim);
  flex-wrap: wrap; gap: 6px;
}
.case-no {
  color: var(--blood-bright);
  letter-spacing: 1px;
}
.mast-title {
  font-size: clamp(26px, 5vw, 44px);
  color: var(--sobok);
  font-weight: 700;
  letter-spacing: 2px;
  margin-top: 10px;
  line-height: 1.25;
}
.mast-title .hanja { color: var(--blood-bright); font-weight: 400; }
.mast-sub {
  font-family: var(--mono);
  font-size: 12px; color: var(--ink-dim);
  margin-top: 6px; letter-spacing: .5px;
}

/* --- language toggle ------------------------------------------------ */
.lang-toggle {
  font-family: var(--mono); font-size: 11px;
  background: none; border: 1px solid var(--concrete-line);
  color: var(--ink); padding: 4px 10px; cursor: pointer;
  letter-spacing: 1px;
}
.lang-toggle:hover { border-color: var(--blood-bright); color: var(--sobok); }

/* --- nav ------------------------------------------------------------ */
nav.recordnav {
  background: var(--concrete-2);
  border-bottom: 1px solid var(--concrete-line);
  position: sticky; top: 0; z-index: 100;
}
.nav-inner {
  max-width: 1380px; margin: 0 auto;
  display: flex; flex-wrap: wrap;
}
nav.recordnav a {
  font-family: var(--mono); font-size: 13px;
  text-decoration: none; color: var(--ink-dim);
  padding: 10px 14px;
  border-right: 1px solid var(--concrete-line);
  letter-spacing: .5px;
}
nav.recordnav a:first-child { border-left: 1px solid var(--concrete-line); }
nav.recordnav a:hover { background: var(--concrete-3); color: var(--sobok); }
nav.recordnav a.active { background: var(--blood); color: var(--sobok); box-shadow: inset 0 -3px 0 var(--blood-bright); }
nav.recordnav a.active .no { color: var(--sobok); }
nav.recordnav a .no { color: var(--blood-bright); margin-right: 6px; }

/* --- layout --------------------------------------------------------- */
main { max-width: 1380px; margin: 0 auto; padding: 34px 28px 70px; }

.section-head {
  border-left: 4px solid var(--blood);
  padding-left: 14px; margin: 44px 0 20px;
}
.section-head h2 {
  color: var(--sobok); font-size: 22px; letter-spacing: 1px;
}
.section-head .kicker {
  font-family: var(--mono); font-size: 11px; color: var(--blood-bright);
  letter-spacing: 2px; text-transform: uppercase;
}
.section-head .note {
  font-family: var(--mono); font-size: 11px; color: var(--ink-dim);
}

.doc-note {
  font-family: var(--mono); font-size: 12px;
  color: var(--ink-dim);
  border: 1px dashed var(--concrete-line);
  padding: 12px 14px; margin: 18px 0;
  background: var(--concrete-1);
}
.doc-note strong { color: var(--blood-bright); font-weight: 400; }

/* --- stamps --------------------------------------------------------- */
.stamp {
  display: inline-block;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  color: var(--blood-bright);
  border: 2px solid var(--blood-bright);
  padding: 2px 8px; letter-spacing: 2px;
  transform: rotate(-3deg);
  opacity: .85;
  text-transform: uppercase;
}
.stamp.gray { color: var(--ink-dim); border-color: var(--ink-dim); }

/* --- record cards (entities) ---------------------------------------- */
.record {
  background: var(--concrete-1);
  border: 1px solid var(--concrete-line);
  margin: 26px 0;
  position: relative;
}
.record-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid var(--concrete-line);
  background: var(--concrete-2);
}
.record-head .rid {
  font-family: var(--mono); font-size: 11px; color: var(--blood-bright);
  letter-spacing: 1px;
}
.record-head h3 {
  color: var(--sobok); font-size: 18px; letter-spacing: .5px;
}
.record-head h3 .kr { color: var(--ink-dim); font-weight: 400; font-size: 15px; }
.record-body { display: flex; gap: 0; flex-wrap: wrap; }
.record-photo {
  flex: 0 0 400px; padding: 20px;
  border-right: 1px solid var(--concrete-line);
}
.record-photo .polaroid {
  background: var(--paper);
  padding: 14px 14px 52px;
  position: relative;
  box-shadow: 0 4px 14px rgba(0,0,0,.6);
  transform: rotate(-1.2deg);
}
.record-photo .polaroid img { filter: saturate(.75) contrast(1.05); width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.record-photo .cap {
  font-family: var(--mono); font-size: 10px; color: #333;
  margin-top: 6px; text-align: center;
}
.no-photo {
  height: 200px; display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--concrete-line);
  font-family: var(--mono); font-size: 11px; color: var(--ink-dim);
  text-align: center; padding: 10px; line-height: 1.9;
}
.record-fields { flex: 1 1 380px; padding: 16px 20px; }
.field { margin-bottom: 12px; }
.field .k {
  font-family: var(--mono); font-size: 10px; letter-spacing: 2px;
  color: var(--blood-bright); text-transform: uppercase;
  display: block; margin-bottom: 2px;
}
.field .v { font-size: 16px; color: var(--ink); }
.field .v em { color: var(--sobok); font-style: normal; }
.keeping {
  border-left: 3px solid var(--blood);
  background: rgba(126,32,32,0.07);
  padding: 10px 14px; margin-top: 14px;
  font-size: 14px; color: var(--ink);
}
.keeping .k {
  font-family: var(--mono); font-size: 10px; letter-spacing: 2px;
  color: var(--blood-bright); display: block; margin-bottom: 4px;
}
.tagrow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.tag {
  font-family: var(--mono); font-size: 10px;
  border: 1px solid var(--concrete-line); color: var(--ink-dim);
  padding: 1px 8px; letter-spacing: 1px;
}
.tag.red { border-color: var(--blood); color: var(--blood-bright); }

/* --- category headers ------------------------------------------------ */
.cat-head {
  margin: 48px 0 8px;
  border-bottom: 1px solid var(--concrete-line);
  padding-bottom: 8px;
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.cat-head h2 { color: var(--sobok); font-size: 24px; letter-spacing: 1px; }
.cat-head .cat-kr { color: var(--blood-bright); font-size: 20px; }
.cat-head .cat-count { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); }
.cat-desc { font-size: 16px; color: var(--ink-dim); margin-bottom: 10px; max-width: 70ch; }

/* --- chronology ------------------------------------------------------- */
.chrono { border-left: 2px solid var(--concrete-line); margin-left: 8px; padding-left: 26px; }
.chrono-item { position: relative; margin-bottom: 30px; }
.chrono-item::before {
  content: ""; position: absolute; left: -32px; top: 7px;
  width: 9px; height: 9px; background: var(--concrete-3);
  border: 2px solid var(--ink-dim); border-radius: 50%;
}
.chrono-item.calamity::before { background: var(--blood-bright); border-color: var(--blood-bright); }
.chrono-item .date {
  font-family: var(--mono); font-size: 12px; color: var(--blood-bright);
  letter-spacing: 1px;
}
.chrono-item h3 { color: var(--sobok); font-size: 17px; margin: 2px 0 4px; }
.chrono-item p { font-size: 16px; color: var(--ink); max-width: 72ch; }
.chrono-item .redact {
  background: var(--concrete-3); color: var(--concrete-3);
  padding: 0 4px; user-select: none;
}

/* --- evidence ledger --------------------------------------------------- */
.evidence-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 14px 0 30px; }
.evidence-table th {
  font-family: var(--mono); font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--blood-bright);
  border-bottom: 2px solid var(--concrete-line);
  padding: 8px 10px; text-align: left;
}
.evidence-table td {
  border-bottom: 1px solid var(--concrete-line);
  padding: 10px; color: var(--ink); vertical-align: top;
}
.evidence-table td.mono { font-family: var(--mono); font-size: 12px; color: var(--ink-dim); }

.tape-player {
  background: #000; border: 1px solid var(--concrete-line);
  margin: 20px 0; position: relative;
}
.tape-player video { width: 100%; display: block; }
.tape-label {
  font-family: var(--mono); font-size: 11px; color: var(--ink-dim);
  padding: 8px 12px; border-top: 1px solid var(--concrete-line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px;
}
.tape-label .rec { color: var(--blood-bright); animation: blink 1.4s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.photo-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 22px; margin: 20px 0;
}
.photo-grid figure {
  background: var(--paper); padding: 9px 9px 30px;
  box-shadow: 0 4px 12px rgba(0,0,0,.55);
}
.photo-grid figure:nth-child(odd) { transform: rotate(-1.4deg); }
.photo-grid figure:nth-child(even) { transform: rotate(1deg); }
.photo-grid img { filter: saturate(.72) contrast(1.06); aspect-ratio: 1/1; object-fit: cover; width: 100%; }
.photo-grid figcaption {
  font-family: var(--mono); font-size: 9.5px; color: #3a3a35;
  margin-top: 7px; line-height: 1.5;
}

/* --- simulation (game) --------------------------------------------------- */
.sim-frame {
  border: 1px solid var(--concrete-line); background: #000;
  aspect-ratio: 16/10; width: 100%;
}
.sim-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.sim-warning {
  font-family: var(--mono); font-size: 11px; color: var(--blood-bright);
  border: 1px solid var(--blood); padding: 10px 14px; margin: 14px 0;
  background: rgba(126,32,32,0.06); letter-spacing: .5px;
}

/* --- registry (waitlist) -------------------------------------------------- */
.registry-form {
  background: var(--concrete-1); border: 1px solid var(--concrete-line);
  padding: 26px; max-width: 560px; margin: 20px 0;
}
.registry-form label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--blood-bright);
  display: block; margin: 14px 0 4px;
}
.registry-form input, .registry-form textarea {
  width: 100%; background: var(--concrete-0);
  border: 1px solid var(--concrete-line); color: var(--sobok);
  font-family: var(--mono); font-size: 14px; padding: 10px;
}
.registry-form input:focus, .registry-form textarea:focus {
  outline: none; border-color: var(--blood-bright);
}
.registry-form button {
  margin-top: 20px; background: var(--blood);
  border: 1px solid var(--blood-bright); color: var(--sobok);
  font-family: var(--mono); font-size: 12px; letter-spacing: 2px;
  padding: 12px 26px; cursor: pointer; text-transform: uppercase;
}
.registry-form button:hover { background: var(--blood-bright); }
.registry-note { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); margin-top: 12px; line-height: 1.8; }

/* --- index: classification menu -------------------------------------------- */
.class-menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 14px; margin: 24px 0; }
.class-menu a {
  display: block; text-decoration: none;
  background: var(--concrete-1); border: 1px solid var(--concrete-line);
  padding: 18px;
}
.class-menu a:hover { border-color: var(--blood-bright); background: var(--concrete-2); }
.class-menu .no { font-family: var(--mono); font-size: 11px; color: var(--blood-bright); letter-spacing: 2px; }
.class-menu h3 { color: var(--sobok); font-size: 17px; margin: 4px 0 2px; }
.class-menu .sub { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); }

.hero-photo {
  background: var(--paper); padding: 12px 12px 40px;
  box-shadow: 0 6px 20px rgba(0,0,0,.65);
  transform: rotate(-.6deg);
  max-width: 640px; margin: 30px auto;
}
.hero-photo img { filter: saturate(.7) contrast(1.08); }
.hero-photo figcaption {
  font-family: var(--mono); font-size: 10.5px; color: #3a3a35;
  margin-top: 8px; text-align: center; line-height: 1.6;
}

.counter {
  font-family: var(--mono); text-align: center; margin: 34px 0 8px;
  font-size: 11px; color: var(--ink-dim); letter-spacing: 1px;
}
.counter .digits span {
  display: inline-block; background: var(--concrete-2);
  border: 1px solid var(--concrete-line); color: var(--sobok);
  padding: 3px 7px; margin: 0 1px; font-size: 15px;
}

/* --- footer ------------------------------------------------------------------ */
footer {
  border-top: 3px double var(--concrete-line);
  background: var(--concrete-1);
  padding: 26px 20px 40px;
  font-family: var(--mono); font-size: 11px; color: var(--ink-dim);
  line-height: 2;
}
.foot-inner { max-width: 1380px; margin: 0 auto; }
footer .disclaimer {
  border-top: 1px solid var(--concrete-line);
  margin-top: 14px; padding-top: 14px;
  color: #6d6b65;
}
footer a { color: var(--ink-dim); }

/* --- flicker gimmick ------------------------------------------------------------ */
.flicker { animation: flick 7s infinite; }
@keyframes flick {
  0%, 96%, 100% { opacity: 1; }
  97% { opacity: .55; }
  98% { opacity: .9; }
  99% { opacity: .4; }
}

@media (max-width: 640px) {
  .record-photo { flex: 1 1 100%; border-right: none; border-bottom: 1px solid var(--concrete-line); }
  .record-photo .polaroid { max-width: 260px; margin: 0 auto; }
}

/* examine affordance */
.flipcard::after{
  content:"CLICK TO EXAMINE";
  position:absolute;top:22px;right:22px;
  font-family:var(--mono);font-size:10px;letter-spacing:1px;
  background:rgba(17,17,19,.85);color:var(--sobok);
  border:1px solid var(--blood-bright);padding:4px 9px;
  opacity:.9;pointer-events:none;transition:opacity .2s, transform .2s;
}
.flipcard:hover::after{opacity:1;transform:scale(1.05);background:var(--blood)}
/* terminal contained scroll */
.term-wrap{height:min(74vh,860px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--blood) var(--concrete-1);display:flex;flex-direction:column}
.term-wrap::-webkit-scrollbar{width:8px}
.term-wrap::-webkit-scrollbar-thumb{background:var(--blood)}
.term-wrap::-webkit-scrollbar-track{background:var(--concrete-1)}
#term-ui{position:sticky;bottom:0;background:linear-gradient(transparent,#0a0a0b 18%);padding-top:14px;margin-top:auto}
/* simulation breakout */
.breakout{width:min(96vw,1680px);margin-left:50%;transform:translateX(-50%)}
.sim-tools{display:flex;gap:10px;margin:10px 0;flex-wrap:wrap}
.sim-tools a,.sim-tools button{font-family:var(--mono);font-size:12px;letter-spacing:1px;background:var(--concrete-2);border:1px solid var(--concrete-line);color:var(--sobok);padding:9px 16px;cursor:pointer;text-decoration:none}
.sim-tools a:hover,.sim-tools button:hover{border-color:var(--blood-bright)}
/* software thumbnails */
.soft-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin:22px 0}
.soft-card{background:var(--concrete-1);border:1px solid var(--concrete-line);text-decoration:none;display:block}
.soft-card:hover{border-color:var(--blood-bright)}
.soft-card img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:saturate(.85)}
.soft-card .sc-meta{padding:14px 16px}
.soft-card .sc-meta .no{font-family:var(--mono);font-size:11px;color:var(--blood-bright);letter-spacing:2px}
.soft-card .sc-meta h3{color:var(--sobok);font-size:18px;margin:4px 0}
.soft-card .sc-meta p{font-size:14px;color:var(--ink-dim);margin:0}
/* horizontal chronology filmstrip */
.strip-wrap{position:relative;margin:26px 0}
.strip{display:flex;gap:0;overflow-x:auto;padding:30px 8px 22px;scrollbar-width:thin;scrollbar-color:var(--blood) var(--concrete-1);scroll-snap-type:x proximity;position:relative}
.strip::before{content:"";position:absolute;left:0;right:0;top:96px;height:2px;background:var(--concrete-line)}
.strip::-webkit-scrollbar{height:8px}
.strip::-webkit-scrollbar-thumb{background:var(--blood)}
.era{flex:0 0 340px;scroll-snap-align:start;padding:0 16px;position:relative}
.era::before{content:"";position:absolute;left:16px;top:60px;width:11px;height:11px;border-radius:50%;background:var(--concrete-3);border:2px solid var(--ink-dim);z-index:2}
.era.hot::before{background:var(--blood-bright);border-color:var(--blood-bright)}
.era .edate{font-family:var(--mono);font-size:13px;color:var(--blood-bright);letter-spacing:1px;display:block;margin-bottom:26px}
.era h3{color:var(--sobok);font-size:17px;margin:10px 0 8px;min-height:44px}
.era .ecard{background:var(--paper);padding:8px 8px 26px;box-shadow:0 5px 16px rgba(0,0,0,.55);cursor:pointer;transition:transform .15s;position:relative}
.era .ecard:hover{transform:rotate(-1deg) scale(1.03)}
.era .ecard img{width:100%;aspect-ratio:3/2;object-fit:cover;filter:saturate(.78) contrast(1.05)}
.era .ecap{font-family:var(--mono);font-size:9.5px;color:#3a3a35;margin-top:6px;line-height:1.5}
.era p.etext{font-size:14px;color:var(--ink);margin-top:12px;line-height:1.65}
.strip-hint{font-family:var(--mono);font-size:11px;color:var(--ink-dim);text-align:center;margin-top:4px}
/* generic inspector (sitewide) */
.inspect-overlay[hidden]{display:none}
.inspect-overlay{position:fixed;inset:0;background:rgba(5,5,6,.93);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px}
.inspect-stage{perspective:1400px;width:min(80vw,640px)}
.inspect-card{position:relative;width:100%;aspect-ratio:3/3.3;transform-style:preserve-3d;transition:transform .12s linear;cursor:grab}
.iface{position:absolute;inset:0;backface-visibility:hidden;background:
  radial-gradient(120% 100% at 30% 0%,rgba(255,255,255,.16),transparent 42%),
  linear-gradient(160deg,#efece2 0%,#e2ddcf 55%,#d5d0c0 100%);
  padding:4.5% 4.5% 15%;box-shadow:0 24px 70px rgba(0,0,0,.85),0 3px 8px rgba(0,0,0,.5);border-radius:2px}
.iface::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");pointer-events:none;border-radius:2px}
.iface img{width:100%;height:84%;object-fit:cover;filter:saturate(.8) contrast(1.05);box-shadow:inset 0 0 12px rgba(0,0,0,.35)}
.iback{transform:rotateY(180deg)}
.iback-paper{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:repeating-linear-gradient(0deg,transparent 0 25px,rgba(90,70,50,.16) 25px 26px)}
.iback-paper p{font-family:var(--serif);font-size:clamp(16px,2.8vw,23px);color:#4a2020;text-align:center;padding:0 8%;line-height:1.8;transform:rotate(-2deg)}
.iback-stamp{font-family:var(--mono);font-size:11px;color:#9c2a2a;border:2px solid #9c2a2a;padding:2px 10px;letter-spacing:3px;transform:rotate(3deg);opacity:.7}
.iback-mark{font-size:34px;color:rgba(126,32,32,.35);transform:rotate(-6deg)}
.inspect-ui{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:center}
.inspect-ui button{background:var(--concrete-2);border:1px solid var(--concrete-line);color:var(--sobok);font-family:var(--mono);font-size:12px;padding:10px 20px;cursor:pointer;letter-spacing:1px}
.inspect-ui button:hover{border-color:var(--blood-bright)}
.inspect-hint{font-family:var(--mono);font-size:11px;color:var(--ink-dim)}