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

:root{
  --bg:#05060a; --ink:#101216; --paper:#eef2f8;
  --ice:#7fa8e0; --dim:#8b93a8; --red:#c2586a;
  --line:rgba(255,255,255,.2);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-padding-top:60px;}
html,body{background:var(--bg);color:var(--paper);}
body{font-family:'Noto Sans KR',sans-serif;line-height:1.75;padding-bottom:4rem;}
a{color:inherit;text-decoration:none;}

/* nav */
.nav{
  position:sticky;top:0;z-index:50;display:flex;gap:0;
  background:rgba(5,6,10,.92);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav a{
  flex:1;text-align:center;padding:1rem .5rem;
  font-family:'Archivo Black',sans-serif;font-size:.7rem;letter-spacing:.15em;
  color:var(--dim);border-bottom:2px solid transparent;
}
.nav a.active{color:var(--paper);border-bottom-color:var(--ice);}

/* generic */
.wrap{max-width:860px;margin:0 auto;padding:0 6vw;}
.tag{font-family:'Archivo Black',sans-serif;font-size:.68rem;letter-spacing:.2em;color:var(--ice);margin:2.5rem 0 1rem;}
h1,h2,h3{font-family:'Black Han Sans',sans-serif;font-weight:400;line-height:1.35;}
h1{font-size:clamp(1.8rem,6vw,2.8rem);}
h2{font-size:clamp(1.3rem,4vw,1.9rem);margin-bottom:.9rem;}
h3{font-size:1.05rem;color:var(--ice);margin-bottom:.4rem;}
p{color:var(--paper);margin-bottom:.9rem;}
p.dim{color:var(--dim);font-size:.92rem;}

.eng{font-family:'Archivo Black',sans-serif;font-size:clamp(2.2rem,10vw,4.4rem);line-height:.95;}
.eng span{color:var(--ice);}

/* image slot with graceful fallback for missing /img/N.png */
.art{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;background:#0b0d13;border:1px solid var(--line);}
.art img{width:100%;height:100%;object-fit:cover;display:block;}
.art .ph{
  display:none;position:absolute;inset:0;align-items:center;justify-content:center;
  flex-direction:column;gap:.5rem;color:var(--dim);font-size:.72rem;text-align:center;padding:1rem;
  background:repeating-linear-gradient(135deg,#0b0d13,#0b0d13 12px,#0e111a 12px,#0e111a 24px);
}
.art.noimg .ph{display:flex;}
.art.wide{aspect-ratio:16/10;}

/* dialogue blocks */
.line-block{margin:1.6rem 0;}
.who{font-family:'Archivo Black',sans-serif;font-size:.68rem;letter-spacing:.1em;color:var(--dim);margin-bottom:.35rem;}
.line{font-family:'Black Han Sans',sans-serif;font-size:1.05rem;color:var(--paper);}
.narr{color:var(--dim);font-style:normal;border-left:2px solid var(--ice);padding-left:1rem;}

/* route picker cards */
.routes{display:grid;grid-template-columns:1fr;gap:1.2rem;margin-top:1.5rem;}
@media(min-width:700px){.routes{grid-template-columns:repeat(3,1fr);}}
.route-card{border:1px solid var(--line);display:block;}
.route-card .art{aspect-ratio:3/4;}
.route-card .cap{padding:1rem;}
.route-card .cap .num{font-family:'Archivo Black',sans-serif;font-size:.65rem;letter-spacing:.15em;color:var(--ice);}
.route-card .cap h3{margin-top:.4rem;}
.route-card .cap p{font-size:.85rem;color:var(--dim);margin-bottom:0;}

/* roster grid */
.roster{display:grid;grid-template-columns:1fr;gap:1.4rem;margin-top:1.2rem;}
@media(min-width:700px){.roster{grid-template-columns:repeat(2,1fr);}}
.roster .person{border:1px solid var(--line);padding-bottom:1rem;}
.roster .person .info{padding:1rem 1.1rem 0;}

/* terms list */
.terms dt{font-family:'Black Han Sans',sans-serif;color:var(--ice);margin-top:1.3rem;}
.terms dd{color:var(--dim);margin-top:.3rem;font-size:.92rem;}

.btn{
  display:inline-block;margin-top:1.5rem;font-family:'Archivo Black',sans-serif;
  font-size:.75rem;letter-spacing:.12em;color:var(--bg);background:var(--ice);
  padding:.85rem 1.6rem;
}
.back{display:inline-block;margin-top:2rem;color:var(--dim);font-size:.82rem;}

.hero-section{
  padding:7vh 0 4vh;
  background:radial-gradient(circle at 25% 10%, rgba(127,168,224,.18), transparent 55%);
}
.note{font-size:.78rem;color:var(--dim);border-top:1px solid var(--line);margin-top:3rem;padding-top:1.2rem;}

/* ===== 웹툰 컷 패널 (프롤로그 / NIGHT 루트) ===== */
.panel{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;border-bottom:2px solid var(--line);background:#0b0d13;}
.panel.cover{aspect-ratio:3/4;}
.panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.panel .ph{display:none;position:absolute;inset:0;align-items:center;justify-content:center;flex-direction:column;gap:.5rem;color:var(--dim);font-size:.75rem;text-align:center;padding:1rem;background:repeating-linear-gradient(135deg,#0b0d13,#0b0d13 12px,#0e111a 12px,#0e111a 24px);}
.panel.noimg .ph{display:flex;}
.panel .shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top, rgba(5,6,10,.92) 0%, rgba(5,6,10,.15) 42%, transparent 62%);}
.panel .num{position:absolute;top:.9rem;left:.9rem;z-index:3;font-family:'Archivo Black',sans-serif;font-size:.68rem;letter-spacing:.15em;color:var(--ink);background:var(--ice);padding:.28rem .6rem;}
.panel .cap-box{position:absolute;left:.9rem;z-index:3;max-width:78%;background:var(--paper);color:var(--ink);font-size:.82rem;font-weight:600;line-height:1.5;padding:.65rem .9rem;border:2px solid var(--ink);}
.panel .bubble{position:absolute;z-index:3;max-width:72%;background:var(--paper);color:var(--ink);font-family:'Black Han Sans',sans-serif;font-size:clamp(.95rem,2.6vw,1.15rem);line-height:1.4;padding:.9rem 1.1rem;border:2px solid var(--ink);}
.panel .bubble::after{content:"";position:absolute;width:16px;height:16px;background:var(--paper);border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);}
.panel .bubble.tail-bl{bottom:-9px;left:2rem;}
.panel .bubble.tail-bl::after{bottom:8px;left:-8px;transform:rotate(135deg);}
.panel .bubble.tail-br{bottom:-9px;right:2rem;}
.panel .bubble.tail-br::after{bottom:8px;right:-8px;transform:rotate(45deg);}
.panel .title-ov{position:absolute;left:6vw;bottom:2.2rem;z-index:3;}
.panel .title-ov .eng{font-size:clamp(2.2rem,11vw,4.6rem);}
.top-r{top:1.1rem;right:1.1rem;}
.bottom-l{bottom:1.1rem;left:1.1rem;}
.bottom-r{bottom:1.1rem;right:1.1rem;}
.mid-l{top:50%;left:1.1rem;transform:translateY(-50%);}
.routes-wrap{padding:3rem 0;}

/* ===== 세계관 위키 스타일 ===== */
.wiki-hero{position:relative;width:100%;aspect-ratio:21/9;overflow:hidden;border-bottom:1px solid var(--line);}
.wiki-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.wiki-hero .ph{position:absolute;inset:0;}
.wiki-hero .ov{position:absolute;inset:0;z-index:2;background:linear-gradient(to top, rgba(5,6,10,.92), transparent 65%);display:flex;align-items:flex-end;padding:2rem 6vw;}
.infobox{border:1px solid var(--line);background:#0b0d13;padding:1.2rem 1.3rem;margin:2rem 0;}
.infobox .row{display:flex;justify-content:space-between;gap:1rem;font-size:.85rem;padding:.55rem 0;border-bottom:1px solid var(--line);}
.infobox .row:last-child{border-bottom:none;}
.infobox .row span:first-child{color:var(--dim);}
.entry-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1.2rem;}
@media(min-width:700px){.entry-grid{grid-template-columns:repeat(2,1fr);}}
.entry{border:1px solid var(--line);padding:1.1rem 1.2rem;}
.entry .idx{font-family:'Archivo Black',sans-serif;font-size:.65rem;color:var(--ice);letter-spacing:.15em;}

/* ===== 과거 회상 컷 (실루엣/저채도) ===== */
.panel.flashback .shade{background:linear-gradient(to top, rgba(5,6,10,.95) 0%, rgba(5,6,10,.35) 50%, rgba(5,6,10,.1) 100%);}
.panel.flashback .ph{filter:grayscale(1) contrast(1.1);}
.panel .narr-line{position:absolute;left:6vw;right:6vw;bottom:1.4rem;z-index:3;color:var(--dim);font-size:.85rem;text-align:center;letter-spacing:.04em;}

/* ===== REDACTED / 정보 비공개 글리치 ===== */
.redact-box{
  position:absolute;z-index:3;left:6vw;right:6vw;bottom:1.6rem;
  border:1px solid rgba(194,88,106,.5);background:rgba(5,6,10,.75);
  padding:1rem 1.1rem;font-family:'Archivo Black',sans-serif;font-size:.7rem;
  letter-spacing:.08em;color:#c2586a;
}
.redact-box .r-row{display:flex;justify-content:space-between;padding:.25rem 0;}
.redact-box .glitch{animation:glitchText 1.4s infinite steps(2,end);}
@keyframes glitchText{
  0%,100%{opacity:1;transform:translateX(0);}
  20%{opacity:.6;transform:translateX(-2px);}
  40%{opacity:1;transform:translateX(2px);}
  60%{opacity:.5;}
  80%{opacity:1;transform:translateX(-1px);}
}
.panel.redacted::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:overlay;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0px,transparent 1px,transparent 3px);
  animation:scan 2.5s linear infinite;
}
@keyframes scan{0%{background-position-y:0;}100%{background-position-y:120px;}}

/* ===== CCTV / 보안 아카이브 ===== */
.gate{min-height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:6vh 6vw;text-align:center;}
.gate .tag{margin-bottom:1.2rem;}
.gate input{
  margin-top:1.6rem;background:#0b0d13;border:1px solid var(--line);color:var(--paper);
  font-family:'Archivo Black',sans-serif;letter-spacing:.2em;font-size:.95rem;
  padding:.9rem 1rem;text-align:center;width:min(280px,80vw);
}
.gate button{
  margin-top:1rem;display:block;margin-left:auto;margin-right:auto;
  font-family:'Archivo Black',sans-serif;font-size:.75rem;letter-spacing:.12em;
  color:var(--bg);background:var(--ice);padding:.8rem 1.8rem;border:none;cursor:pointer;
}
.gate .err{color:#c2586a;font-size:.78rem;margin-top:.9rem;min-height:1.2em;}

.cctv-wrap{display:none;}
.cctv-wrap.show{display:block;}
.cctv{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background:#000;border-bottom:1px solid var(--line);filter:grayscale(.3) contrast(1.15) brightness(.85);}
.cctv .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#5a6070;font-size:.75rem;background:repeating-linear-gradient(135deg,#050608,#050608 12px,#0a0c10 12px,#0a0c10 24px);}
.cctv::after{
  content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0px,transparent 1px,transparent 2px);
  animation:scan 1.8s linear infinite;
}
.cctv .hud{position:absolute;inset:0;z-index:4;padding:.8rem;font-family:'Archivo Black',sans-serif;font-size:.65rem;letter-spacing:.08em;color:#d8dde6;}
.cctv .rec{position:absolute;top:.8rem;left:.8rem;display:flex;align-items:center;gap:.4rem;}
.cctv .rec .dot{width:7px;height:7px;border-radius:50%;background:#e23a4e;animation:blink 1s infinite;}
@keyframes blink{50%{opacity:.2;}}
.cctv .ts{position:absolute;bottom:.8rem;right:.8rem;}
.cctv .cam{position:absolute;top:.8rem;right:.8rem;}

/* ===== PC: 웹툰 컷을 중앙 세로 컬럼으로 고정 ===== */
@media(min-width:768px){
  .panel,.cctv{max-width:720px;margin-left:auto;margin-right:auto;border-left:1px solid var(--line);border-right:1px solid var(--line);}
  .panel .title-ov{left:1.5rem;}
  .panel .narr-line{left:1.5rem;right:1.5rem;}
  .redact-box{left:1.5rem;right:1.5rem;}
}