@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800&family=Roboto+Mono:wght@500;600&display=swap');

:root { --ink:#181714; --paper:#f1eee6; --cream:#e7e0d2; --red:#c84935; --line:rgba(24,23,20,.18); --muted:#6f6b62; --mono:'Roboto Mono',monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'Noto Sans KR',sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.18; z-index:20; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E"); }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.site-header { height:88px; padding:0 clamp(24px,5vw,80px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:13px; }
.brand-mark { display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--ink); font-family:serif; font-size:23px; }
.brand strong,.brand small { display:block; }
.brand strong { font-size:16px; letter-spacing:-.04em; }
.brand small { margin-top:2px; font:500 9px/1 var(--mono); letter-spacing:.14em; color:var(--muted); }
.site-header nav { display:flex; gap:30px; font-size:13px; font-weight:700; }
.site-header nav a { padding:8px 0; border-bottom:1px solid transparent; }
.site-header nav a:hover,.site-header nav a.active { border-color:var(--ink); }
.catalog-hero { min-height:530px; padding:90px clamp(24px,10vw,160px) 70px; position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.catalog-hero::after { content:"98"; position:absolute; right:6vw; top:16px; color:transparent; -webkit-text-stroke:1px rgba(24,23,20,.1); font:600 clamp(240px,34vw,520px)/1 var(--mono); z-index:-1; }
.eyebrow,.section-number { font:600 11px/1 var(--mono); letter-spacing:.17em; color:var(--red); }
.catalog-hero h1 { margin:28px 0 24px; max-width:850px; font-size:clamp(48px,7.2vw,104px); line-height:.98; letter-spacing:-.075em; }
.catalog-hero h1 em { color:var(--red); font-style:normal; }
.catalog-hero > p { width:min(570px,100%); margin:0; color:var(--muted); font-size:16px; line-height:1.9; word-break:keep-all; }
.hero-stats { display:flex; flex-wrap:wrap; gap:0; margin-top:52px; border-top:1px solid var(--ink); width:min(700px,100%); }
.hero-stats span { padding:17px 30px 0 0; margin-right:30px; font-size:12px; color:var(--muted); }
.hero-stats strong { margin-right:7px; color:var(--ink); font:600 17px var(--mono); }
.catalog-section,.content-section { padding:76px clamp(24px,7vw,112px) 100px; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; padding-bottom:25px; border-bottom:1px solid var(--ink); }
.section-heading > div { display:flex; align-items:baseline; gap:25px; }
.section-heading h2,.lower-info h2 { margin:0; font-size:clamp(28px,3vw,44px); letter-spacing:-.055em; }
.section-heading p { margin:0; font:500 11px var(--mono); letter-spacing:.08em; color:var(--muted); }
.catalog-tools { display:flex; justify-content:space-between; gap:20px; padding:26px 0 34px; }
.catalog-actions { display:flex; align-items:center; gap:14px; }
.sort-control { display:flex; align-items:center; gap:9px; font-size:11px; color:var(--muted); }
.sort-control select { min-width:126px; padding:10px 28px 10px 11px; color:var(--ink); border:1px solid var(--line); border-radius:0; outline:0; background:transparent; cursor:pointer; }
.sort-control select:focus { border-color:var(--ink); }
.search-box { display:flex; align-items:center; width:min(380px,100%); border-bottom:1px solid var(--ink); }
.search-box input { width:100%; padding:11px 3px; border:0; outline:0; background:transparent; font-size:14px; }
.search-box span { font-size:24px; }
.filter-group { display:flex; gap:6px; }
.filter-button { min-width:72px; padding:10px 15px; border:1px solid var(--line); background:transparent; cursor:pointer; font-size:12px; }
.filter-button:hover,.filter-button.active { color:var(--paper); background:var(--ink); border-color:var(--ink); }
.game-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px 22px; }
.game-card { display:block; opacity:0; transform:translateY(12px); animation:card-in .45s ease forwards; animation-delay:var(--delay); }
@keyframes card-in { to { opacity:1; transform:none; } }
.card-art { height:285px; padding:18px; position:relative; overflow:hidden; color:#f8f2e5; background:#36343c; transition:transform .35s ease; }
.card-art > img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#120d0b; image-rendering:pixelated; }
.card-art.has-cover::before { z-index:1; background:linear-gradient(to bottom,rgba(0,0,0,.42),transparent 25%,transparent 72%,rgba(0,0,0,.48)); }
.card-art.has-cover::after,.card-art.has-cover > b { display:none; }
.game-card:hover .card-art { transform:translateY(-5px); }
.card-art::before { content:""; position:absolute; inset:0; background:linear-gradient(135deg,transparent 42%,rgba(255,255,255,.11) 42.3%,transparent 43%),repeating-linear-gradient(0deg,transparent 0 18px,rgba(255,255,255,.06) 19px); }
.card-art::after { content:""; position:absolute; width:210px; height:210px; border:1px solid rgba(255,255,255,.35); border-radius:50%; right:-38px; bottom:-55px; box-shadow:0 0 0 28px rgba(255,255,255,.035),0 0 0 56px rgba(255,255,255,.025); }
.card-art b { position:absolute; left:25px; bottom:18px; font:700 92px/1 serif; opacity:.87; }
.card-platform,.card-year { position:absolute; top:17px; z-index:1; font:600 10px var(--mono); letter-spacing:.14em; }
.card-platform { left:18px; }.card-year { right:18px; }
.palette-violet { background:linear-gradient(145deg,#382d4e,#786582); }.palette-rust { background:linear-gradient(145deg,#512a20,#b95b39); }.palette-navy { background:linear-gradient(145deg,#13283a,#37616b); }.palette-blue { background:linear-gradient(145deg,#246984,#7db0b0); }.palette-green { background:linear-gradient(145deg,#233a31,#657b58); }.palette-amber { background:linear-gradient(145deg,#6e431d,#c08d3d); }
.card-body { padding:18px 2px 0; }
.card-kicker,.card-footer { display:flex; justify-content:space-between; font:500 10px var(--mono); letter-spacing:.07em; color:var(--muted); }
.card-body h3 { margin:12px 0 2px; font-size:22px; letter-spacing:-.045em; }
.card-body > p { margin:0 0 22px; font:500 11px var(--mono); color:var(--muted); }
.card-footer { padding-top:13px; border-top:1px solid var(--line); }.card-footer b { color:var(--red); }
.empty-state { padding:90px 20px; text-align:center; border:1px dashed var(--line); }.empty-state strong,.empty-state span { display:block; }.empty-state span { margin-top:8px; color:var(--muted); }
.about-strip { display:grid; grid-template-columns:50px 1.6fr 1fr; gap:30px; padding:70px clamp(24px,7vw,112px); color:var(--paper); background:var(--ink); }
.about-strip h2 { margin:0 0 15px; font-size:30px; }.about-strip p { max-width:640px; margin:0; color:#aaa69d; line-height:1.8; }
.about-points { display:flex; flex-direction:column; justify-content:center; gap:13px; font:500 12px var(--mono); }.about-points span::before { content:"+"; margin-right:13px; color:var(--red); }
.site-footer { min-height:110px; padding:35px clamp(24px,5vw,80px); display:flex; align-items:center; justify-content:space-between; gap:30px; font-size:11px; color:var(--muted); border-top:1px solid var(--line); }

/* detail */
.detail-hero { display:grid; grid-template-columns:minmax(340px,.82fr) 1.18fr; min-height:680px; border-bottom:1px solid var(--line); }
.detail-art { position:relative; overflow:hidden; min-height:600px; }
.detail-cover { display:none; position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#120d0b; image-rendering:pixelated; }
.detail-art.has-cover .detail-cover { display:block; }
.detail-art.has-cover .art-moon,.detail-art.has-cover .art-city,.detail-art.has-cover .art-grid,.detail-art.has-cover > b { display:none; }
.detail-art.has-cover::after { z-index:1; background:linear-gradient(to bottom,rgba(0,0,0,.12),transparent 25%,transparent 75%,rgba(0,0,0,.18)); mask-image:none; }
.detail-art::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 49.5%,rgba(255,255,255,.12) 50%,transparent 50.5%),linear-gradient(0deg,transparent 49.5%,rgba(255,255,255,.1) 50%,transparent 50.5%); background-size:34px 34px; mask-image:linear-gradient(to top,#000,transparent 70%); }
.detail-art > b { position:absolute; z-index:2; left:8%; bottom:3%; color:rgba(255,255,255,.86); font:700 clamp(130px,19vw,280px)/1 serif; }
.art-moon { position:absolute; width:210px; height:210px; top:12%; right:11%; border-radius:50%; background:#e6dac0; box-shadow:0 0 70px rgba(243,223,179,.3); }
.art-city { position:absolute; left:0; right:0; bottom:0; height:42%; opacity:.55; background:linear-gradient(90deg,transparent 3%,#171717 3% 11%,transparent 11% 14%,#171717 14% 23%,transparent 23% 27%,#171717 27% 38%,transparent 38% 42%,#171717 42% 55%,transparent 55% 60%,#171717 60% 67%,transparent 67% 73%,#171717 73% 91%,transparent 91%); clip-path:polygon(0 35%,8% 35%,8% 15%,16% 15%,16% 30%,29% 30%,29% 0,39% 0,39% 24%,53% 24%,53% 8%,64% 8%,64% 28%,74% 28%,74% 18%,85% 18%,85% 38%,100% 38%,100% 100%,0 100%); }
.detail-intro { padding:90px clamp(34px,7vw,110px); display:flex; flex-direction:column; justify-content:center; }
.back-link { align-self:flex-start; font:500 10px var(--mono); letter-spacing:.13em; color:var(--muted); }
.badge-row { display:flex; gap:7px; margin-top:54px; }.platform-badge,.status-badge { padding:6px 10px; border:1px solid var(--ink); font:600 10px var(--mono); }.status-badge { color:var(--red); border-color:var(--red); }
.detail-intro h1 { margin:18px 0 2px; font-size:clamp(48px,6vw,86px); line-height:1.05; letter-spacing:-.075em; }
.detail-subtitle { margin:0; font:500 12px var(--mono); letter-spacing:.12em; color:var(--muted); }
.detail-titles { display:flex; flex-wrap:wrap; gap:7px 18px; margin-top:17px; color:var(--muted); font:500 10px/1.5 var(--mono); }
.detail-titles span { display:flex; gap:8px; }.detail-titles b { color:var(--red); }
.detail-meta { display:grid; grid-template-columns:repeat(auto-fit,minmax(105px,1fr)); gap:20px; margin:8px 0 36px; padding:20px 0; border-block:1px solid var(--line); }.detail-meta dl { margin:0; }.detail-meta dt { font-size:10px; color:var(--muted); }.detail-meta dd { margin:6px 0 0; font:600 12px var(--mono); }
.primary-link { align-self:flex-start; min-width:210px; padding:15px 0; border-bottom:1px solid var(--ink); font-size:13px; font-weight:700; }.primary-link span { float:right; color:var(--red); }
.story-grid { padding-top:50px; }.lead-copy { max-width:1000px; margin:0; font-size:clamp(20px,2.4vw,34px); font-weight:600; line-height:1.65; letter-spacing:-.045em; word-break:keep-all; }
.intro-credits { display:flex; align-items:baseline; gap:22px; margin-top:34px; padding-top:20px; border-top:1px solid var(--line); }
.intro-credits[hidden] { display:none; }
.intro-credits span { flex:0 0 auto; font:600 10px var(--mono); color:var(--red); letter-spacing:.14em; }
.intro-credits p { margin:0; font-size:15px; font-weight:700; line-height:1.7; }
.original-post-link { position:relative; display:grid; grid-template-columns:minmax(190px,.42fr) 1fr auto; gap:24px; align-items:center; margin-top:38px; padding:25px 28px; color:var(--paper); background:var(--ink); border-left:5px solid var(--red); transition:transform .2s ease,background .2s ease; }
.original-post-link:hover { transform:translateY(-2px); background:#292722; }
.original-post-link[hidden] { display:none; }
.original-post-link span { font:600 10px var(--mono); color:#d96b58; letter-spacing:.14em; }
.original-post-link strong { font-size:18px; }
.original-post-link small { color:#aaa69d; font-size:12px; line-height:1.65; word-break:keep-all; }
.original-post-link b { color:#e15b45; font-size:24px; }
.verified-originals { margin-top:38px; padding:24px 28px; border:1px solid var(--line); background:rgba(255,255,255,.24); }
.verified-originals > strong { font-size:16px; }.verified-originals > p { margin:8px 0 16px; color:var(--muted); font-size:13px; line-height:1.7; }
.verified-originals ul { margin:0; padding:0; list-style:none; }.verified-originals li { display:flex; gap:10px; align-items:flex-start; padding:11px 0; border-top:1px solid var(--line); }
.verified-originals li span { color:#39734b; font-weight:800; }.verified-originals code { font:600 12px/1.65 var(--mono); overflow-wrap:anywhere; }
.verified-originals small { display:block; margin-top:13px; color:var(--muted); font-size:11px; line-height:1.6; }
.screenshot-section { padding-top:20px; }.screenshot-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 18px; margin-top:30px; }.screen { min-width:0; margin:0; }.screen > div { aspect-ratio:4/3; padding:24px; display:flex; flex-direction:column; justify-content:flex-end; color:#e8ddb8; font-family:var(--mono); image-rendering:pixelated; box-shadow:inset 0 0 60px rgba(0,0,0,.55); }.screen-one > div { background:linear-gradient(rgba(9,22,28,.5),rgba(9,22,28,.9)),repeating-linear-gradient(90deg,#48646a 0 8px,#374e55 8px 16px); }.screen-two > div { background:linear-gradient(145deg,#421c1a,#121b21 65%); }.screen-three > div { background:linear-gradient(145deg,#283823,#101d19 65%); }.screen span { font-size:9px; letter-spacing:.15em; opacity:.7; }.screen b { margin:12px 0; font-size:clamp(13px,1.3vw,18px); }.screen small { font-size:9px; }.screen figcaption { padding-top:9px; font-size:11px; color:var(--muted); }
.screen > img { display:block; width:100%; height:auto; object-fit:contain; background:#111; image-rendering:pixelated; }
.screenshot-grid.single { display:block; max-width:540px; }
.patch-section { scroll-margin-top:10px; padding:76px clamp(24px,7vw,112px) 90px; color:#ece8df; background:#181714; }.patch-heading { display:flex; align-items:center; gap:24px; }.patch-heading > div { flex:1; }.patch-heading p { margin:0 0 7px; font:500 10px var(--mono); letter-spacing:.14em; color:#8f8b83; }.patch-heading h2 { margin:0; font-size:clamp(30px,4vw,52px); letter-spacing:-.06em; }.section-number.light { color:#e15b45; }.privacy-label { font:500 10px var(--mono); color:#8fbb91; }
.patch-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:50px 0 0; padding:0; list-style:none; border-block:1px solid #45423d; }.patch-steps li { display:grid; grid-template-columns:38px 1fr; padding:20px; border-right:1px solid #45423d; color:#77736c; }.patch-steps li:last-child { border:0; }.patch-steps li > span { grid-row:1/3; font:600 11px var(--mono); }.patch-steps strong { font-size:13px; }.patch-steps small { margin-top:4px; font-size:10px; }.patch-steps .active { color:#f2eee5; background:#24221f; }.patch-steps .active > span { color:#e15b45; }
.file-guide { display:grid; grid-template-columns:42px 1fr auto; gap:18px; align-items:center; margin-top:24px; padding:22px 24px; border:1px solid #565149; background:#24211d; }
.file-guide > span { width:36px; height:36px; display:grid; place-items:center; border:1px solid #d69a4a; border-radius:50%; color:#e6ad5f; font:700 15px var(--mono); }
.file-guide strong { display:block; color:#f2eee5; font-size:14px; }.file-guide p { margin:6px 0 0; color:#98928a; font-size:11px; line-height:1.65; }
.file-guide a { padding:12px 15px; border:1px solid #777067; color:#eee9df; font-size:11px; font-weight:800; text-decoration:none; white-space:nowrap; transition:.2s; }.file-guide a:hover { border-color:#e15b45; color:#ff806b; background:#2d211e; }.file-guide a b { margin-left:7px; color:#e15b45; }
.patch-console { display:grid; grid-template-columns:.72fr 1.28fr; margin-top:36px; border:1px solid #45423d; }.requirements { padding:34px; border-right:1px solid #45423d; }.requirements h3 { margin:0 0 25px; font-size:16px; }.requirements dl { display:flex; justify-content:space-between; margin:0; padding:12px 0; border-bottom:1px solid #34322e; font-size:11px; }.requirements dt { color:#868178; }.requirements dd { margin:0; font-family:var(--mono); }.requirements p { margin:25px 0 0; color:#868178; font-size:11px; line-height:1.7; }
.folder-picker { padding:34px; }.folder-picker label { min-height:250px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px dashed #615d55; cursor:pointer; text-align:center; transition:.2s; }.folder-picker label:hover,.folder-picker label.dragging { border-color:#e15b45; background:#211f1c; }.folder-picker label.has-files { border-style:solid; border-color:#789b7a; }.folder-icon { position:relative; width:56px; height:38px; margin-bottom:24px; border:1px solid #b9b2a7; }.folder-icon::before { content:""; position:absolute; width:24px; height:8px; left:-1px; top:-9px; border:1px solid #b9b2a7; border-bottom:0; }.folder-picker label strong { font-size:17px; }.folder-picker label small { margin:8px 0 19px; color:#77736c; }.select-button { padding:8px 16px; color:#ddd8cf; border:1px solid #615d55; font-size:11px; }.dummy-result { margin-top:16px; padding:15px 18px; color:#b9b4aa; border-left:2px solid #d69a4a; background:#211f1c; }.dummy-result span { font:600 9px var(--mono); color:#d69a4a; letter-spacing:.12em; }.dummy-result strong { display:block; margin:5px 0; color:#ece8df; }.dummy-result p { margin:0; font-size:11px; }.patch-button { width:100%; margin-top:16px; padding:16px; color:#171614; background:#e15b45; border:0; font-weight:800; cursor:pointer; }.patch-button:disabled { color:#76716a; background:#35322e; cursor:not-allowed; }
.file-results { max-height:230px; margin-top:12px; overflow:auto; border:1px solid #34322e; }
.file-result { display:grid; grid-template-columns:22px 1fr auto; gap:8px; align-items:center; padding:9px 12px; border-bottom:1px solid #34322e; font:500 10px var(--mono); }
.file-result:last-child { border:0; }.file-result b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.file-result small { color:#88837a; }
.file-result.ready > span,.file-result.patched > span { color:#86ac87; }.file-result.error > span { color:#e15b45; }
.patch-progress { position:relative; height:31px; margin-top:12px; overflow:hidden; background:#2c2925; }
.patch-progress span { position:absolute; inset:0 auto 0 0; width:0; background:#4c694e; transition:width .2s; }.patch-progress b { position:relative; z-index:1; display:block; padding:7px 10px; font:500 10px var(--mono); }
.commercial-warning { margin-top:18px; padding:23px 24px; border:1px solid #b95040; border-left:5px solid #ff674f; background:#321f1b; }
.commercial-warning strong { display:block; color:#ff806b; font-size:18px; line-height:1.4; letter-spacing:.02em; }
.commercial-warning p { margin:10px 0 9px; color:#f3e8e2; font-size:14px; line-height:1.75; word-break:keep-all; }
.commercial-warning small { display:block; color:#c9b4aa; font-size:12px; line-height:1.65; }
.lower-info { max-width:850px; }.lower-info article > .section-number { display:block; margin-bottom:17px; }.lower-info h2 { margin-bottom:32px; font-size:27px; }.instruction-list { margin:0; padding:0; list-style:none; }.instruction-list li { display:grid; grid-template-columns:44px 1fr; gap:12px; padding:15px 0; border-top:1px solid var(--line); }.instruction-list span { font:500 10px var(--mono); color:var(--red); }.instruction-list p { margin:0; font-size:13px; line-height:1.7; }

@media (max-width:900px) {
  .game-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.detail-hero { grid-template-columns:1fr; }.detail-art { min-height:440px; }.detail-intro { padding-block:65px; }.detail-meta { grid-template-columns:repeat(2,1fr); }.patch-console,.story-grid { grid-template-columns:1fr; }.requirements { border-right:0; border-bottom:1px solid #45423d; }.lower-info { grid-template-columns:1fr 1fr; }.lower-info article:first-child { grid-column:1/-1; }
}
@media (max-width:620px) {
  .site-header { height:auto; min-height:80px; }.site-header nav { gap:16px; }.site-header nav a:nth-child(2) { display:none; }.brand small { display:none; }.catalog-hero { padding-top:65px; min-height:auto; }.catalog-tools { flex-direction:column; }.catalog-actions { width:100%; align-items:stretch; flex-direction:column; }.sort-control { justify-content:space-between; }.sort-control select { flex:1; }.filter-group { display:grid; grid-template-columns:repeat(3,1fr); }.game-grid { grid-template-columns:1fr; }.card-art { height:330px; }.about-strip { grid-template-columns:1fr; }.about-strip > .section-number { display:none; }.site-footer { align-items:flex-start; flex-direction:column; }.detail-art { min-height:360px; }.detail-intro { padding:48px 24px; }.badge-row { margin-top:35px; }.detail-meta { grid-template-columns:1fr; }.catalog-section,.content-section,.patch-section { padding-left:20px; padding-right:20px; }.section-heading { align-items:flex-start; gap:18px; }.section-heading > div { gap:12px; }.section-heading > p { display:none; }.original-post-link { grid-template-columns:1fr auto; gap:9px 18px; padding:22px; }.original-post-link span,.original-post-link small { grid-column:1/-1; }.original-post-link b { grid-column:2; grid-row:2; }.screenshot-grid,.lower-info { grid-template-columns:1fr; }.lower-info article:first-child { grid-column:auto; }.patch-heading { flex-wrap:wrap; }.privacy-label { width:100%; }.patch-steps li { grid-template-columns:1fr; padding:14px 8px; }.patch-steps li > span { grid-row:auto; }.patch-steps small { display:none; }.file-guide { grid-template-columns:36px 1fr; padding:18px; }.file-guide > span { width:32px; height:32px; }.file-guide a { grid-column:1/-1; text-align:center; }.folder-picker,.requirements { padding:22px; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; animation:none!important; transition:none!important; } .game-card { opacity:1; transform:none; } }