/* 그 사건, 그 후 — dark documentary theme */
:root{
  --bg:#0e0f12; --bg2:#15171c; --card:#1a1d23; --line:#2a2e37;
  --ink:#eceff4; --muted:#9aa3b2; --accent:#e5484d; --accent2:#d4a24e;
  --radius:14px; --max:1024px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
  line-height:1.75; font-size:16px; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--max); margin:0 auto; padding:0 20px}
a{color:#7fb3ff; text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--accent2); outline-offset:2px; border-radius:6px}
h1,h2,h3{text-wrap:balance}
p,li,dd{text-wrap:pretty}
hr{border:0; border-top:1px solid var(--line); margin:40px 0 20px}
::selection{background:var(--accent); color:#fff}
h1{font-size:2rem; line-height:1.35; letter-spacing:-.01em; margin:.4em 0 .6em}
h2{font-size:1.35rem; margin:2.2em 0 .7em; padding-bottom:.4em; border-bottom:1px solid var(--line)}
h3{font-size:1.1rem; margin:.2em 0 .4em}
.kicker{color:var(--accent2); font-weight:700; letter-spacing:.06em; margin:0}
.lede{color:var(--muted); font-size:1.05rem}
.muted{color:var(--muted); font-size:.92rem}
em{color:var(--accent2); font-style:normal}

/* header */
.site-header{background:rgba(14,15,18,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50}
.header-in{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 20px}
.brand{color:var(--ink); display:flex; align-items:center; gap:10px}
.brand:hover{text-decoration:none}
.brand-mark{font-size:1.4rem}
.brand-t{font-size:1.15rem; font-weight:800; letter-spacing:-.01em}
.brand-t b{color:var(--accent)}
.nav{display:flex; flex-wrap:wrap; gap:4px}
.nav a{color:var(--muted); padding:8px 12px; border-radius:8px; font-size:.95rem}
.nav a:hover{color:var(--ink); background:var(--bg2); text-decoration:none}
.nav a.active{color:var(--ink); background:var(--bg2)}

/* hero */
.hero{padding:56px 0 12px}
.hero h1{font-size:2.5rem}
.hero-act{display:flex; gap:10px; flex-wrap:wrap; margin:22px 0}
.stats{display:flex; gap:28px; margin:26px 0 8px}
.stats b{display:block; font-size:1.7rem; color:var(--accent2)}
.stats span{color:var(--muted); font-size:.9rem}

/* buttons */
.btn{display:inline-block; background:var(--accent); color:#fff; font-weight:700; padding:11px 22px; border-radius:10px; border:1px solid transparent}
.btn:hover{background:#c93b40; color:#fff; text-decoration:none}
.btn.ghost{background:transparent; border-color:var(--line); color:var(--ink)}
.btn.ghost:hover{background:var(--bg2)}
.btn.sm{padding:7px 14px; font-size:.88rem}

/* cards & grid */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:16px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px}
.card h3 a{color:var(--ink)}
.card-top{display:flex; align-items:center; gap:8px; margin-bottom:8px}
.ep{font-size:.8rem; color:var(--accent2); font-weight:700}
.badge{font-size:.75rem; font-weight:700; padding:3px 10px; border-radius:20px}
.badge.pub{background:#1d3a24; color:#7dd87d; border:1px solid #2f5c38}
.badge.draft{background:#3a2f1d; color:#e8c07d; border:1px solid #5c4a2f}
.badge.halt{background:var(--bg2); color:var(--muted); border:1px solid var(--line)}
.badge{white-space:nowrap; display:inline-block; line-height:1.5}
.meta{color:var(--muted); font-size:.88rem}
.card-act{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}

/* tables */
.table-wrap{overflow-x:auto}
.tbl{width:100%; border-collapse:collapse; font-size:.93rem}
.tbl th,.tbl td{padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
.tbl th{color:var(--muted); font-weight:600; white-space:nowrap}
.tbl tr.halted td{color:var(--muted)}
.tbl tbody tr:hover td{background:var(--bg2)}
.tbl td:first-child{color:var(--accent2); font-weight:700; white-space:nowrap}
.card .facts{background:transparent; padding:12px 0; border:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); border-radius:0; grid-template-columns:1fr 1fr}
.card .kicker{font-size:.82rem}

/* case page */
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; background:var(--bg2); border:1px solid var(--line); border-radius:var(--radius); padding:16px 20px; margin:18px 0}
.facts dt{color:var(--muted); font-size:.82rem}
.facts dd{margin:2px 0 0; font-weight:600}
ul.src{padding-left:20px}
ul.src li{margin:.35em 0; font-size:.93rem; word-break:break-all}
.notice{background:#1c1a14; border:1px solid #4a3f28; border-radius:10px; padding:14px 18px; font-size:.93rem}
.ticks{list-style:none; padding:0}
.ticks li{padding:6px 0 6px 28px; position:relative}
.ticks li::before{content:"✓"; color:#7dd87d; position:absolute; left:4px}
.princ{padding-left:1.4em}
.princ li{margin:.9em 0; padding-left:.3em}
.princ li::marker{color:var(--accent2); font-weight:800}
.princ p{margin:.2em 0 0; color:var(--muted); font-size:.93rem}
.dates{list-style:none; padding:0}
.dates li{padding:10px 0; border-bottom:1px solid var(--line); display:flex; gap:14px; align-items:baseline}
.dates .d{color:var(--accent2); font-weight:800; white-space:nowrap; min-width:86px}
.dates a{color:var(--ink)}
.dates.big li{flex-wrap:wrap; column-gap:14px; row-gap:2px; padding:14px 0}
.dates.big .d{min-width:110px; font-variant-numeric:tabular-nums}
.dates.big .muted{margin-left:auto}
.two{display:grid; grid-template-columns:1fr 1fr; gap:32px}
.case{max-width:760px}

/* footer */
.site-footer{border-top:1px solid var(--line); margin-top:64px; padding:28px 0 40px; color:var(--muted); font-size:.9rem}
.foot-links a{color:var(--muted); margin-right:6px}

/* responsive */
@media (max-width:720px){
  h1{font-size:1.6rem}
  .hero{padding:36px 0 8px}
  .hero h1{font-size:1.9rem}
  .header-in{flex-direction:column; align-items:flex-start; gap:6px; padding:12px 20px 8px}
  .nav{flex-wrap:nowrap; overflow-x:auto; width:calc(100% + 40px); margin:0 -20px; padding:0 14px; scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap; padding:6px 10px}
  .dates.big .muted{margin-left:0; flex-basis:100%}
  .card .facts{grid-template-columns:1fr}
  .two{grid-template-columns:1fr}
  .stats{gap:18px}
}

/* ============ 홈 · 추모 ============ */
body.home{
  --gold:#d8b878; --gold-dim:#8f7a52; --ivory:#efe8da; --ash:#a59d8f; --night:#0a0908; --veil:#13110e; --hair:rgba(216,184,120,.16);
  background:var(--night); color:var(--ivory);
  background-image:radial-gradient(ellipse 70% 55% at 50% 0%, rgba(216,170,96,.10), transparent 70%);
  background-repeat:no-repeat;
}
.home .site-header{background:rgba(10,9,8,.82); border-bottom-color:var(--hair)}
.home .brand-t b{color:var(--gold)}
.home .nav a{color:var(--ash)}
.home .nav a.active,.home .nav a:hover{color:var(--ivory); background:rgba(216,184,120,.07)}
.home a{color:var(--gold)}
.home a:hover{color:var(--ivory); text-decoration:none}
.home .site-footer{border-top-color:var(--hair); color:var(--ash)}
.home .foot-links a{color:var(--ash)}
.serif{font-family:"Nanum Myeongjo","Noto Serif KR","Apple SD Gothic Neo",serif}

.m-hero{text-align:center; padding:72px 0 40px; display:flex; flex-direction:column; align-items:center}
.candle{position:relative; width:120px; height:190px; margin-bottom:28px}
.candle .halo{position:absolute; left:50%; top:30px; width:300px; height:300px; transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle, rgba(255,196,110,.30) 0%, rgba(255,170,80,.10) 30%, transparent 65%); animation:halo 4s ease-in-out infinite}
.candle .flame{position:absolute; left:50%; top:2px; width:18px; height:44px; margin-left:-9px; border-radius:50% 50% 45% 45% / 65% 65% 35% 35%;
  background:radial-gradient(ellipse at 50% 78%, #fff8e6 0%, #ffe2a3 28%, #f6b04f 58%, rgba(230,120,40,.0) 78%);
  box-shadow:0 0 18px 6px rgba(255,190,100,.35), 0 0 60px 20px rgba(255,160,70,.12);
  transform-origin:50% 90%; animation:flicker 3.2s ease-in-out infinite}
.candle .flame::after{content:""; position:absolute; left:50%; bottom:5px; width:6px; height:12px; margin-left:-3px; border-radius:50%; background:rgba(120,150,255,.35); filter:blur(1px)}
.candle .wick{position:absolute; left:50%; top:42px; width:2px; height:9px; margin-left:-1px; background:#2b2118; border-radius:1px}
.candle .body{position:absolute; left:50%; top:50px; width:46px; height:136px; margin-left:-23px; border-radius:3px 3px 4px 4px;
  background:linear-gradient(90deg,#cfc5b2 0%,#efe7d6 35%,#f6f0e3 50%,#e3d9c6 70%,#b7ad9a 100%);
  box-shadow:inset 0 10px 14px -8px rgba(255,200,120,.55)}
.candle .body::before{content:""; position:absolute; left:6px; right:6px; top:0; height:6px; border-radius:50%; background:rgba(255,236,200,.7)}
.candle .base{position:absolute; left:50%; bottom:0; width:96px; height:8px; margin-left:-48px; border-radius:50%; background:radial-gradient(ellipse, rgba(216,184,120,.28), transparent 70%)}
@keyframes flicker{0%,100%{transform:scale(1,1) rotate(-1deg)}22%{transform:scale(.96,1.05) rotate(1.5deg)}45%{transform:scale(1.03,.95) rotate(-.5deg)}70%{transform:scale(.98,1.03) rotate(1deg)}}
@keyframes halo{0%,100%{opacity:.9}50%{opacity:.7}}
@media (prefers-reduced-motion:reduce){.candle .flame,.candle .halo{animation:none}}

.m-kicker{color:var(--gold); font-size:.82rem; letter-spacing:.42em; margin:0 0 18px; padding-left:.42em}
.m-hero h1{font-size:2.6rem; font-weight:700; line-height:1.5; letter-spacing:-.01em; margin:0; color:var(--ivory)}
.m-hero h1 em{color:var(--gold); font-style:normal}
.m-rule{display:flex; align-items:center; gap:14px; margin:28px auto; color:var(--gold-dim); font-size:.7rem}
.m-rule::before,.m-rule::after{content:""; width:64px; height:1px; background:linear-gradient(90deg,transparent,var(--gold-dim))}
.m-rule::after{transform:scaleX(-1)}
.m-lede{color:var(--ash); font-size:1.02rem; max-width:34em; margin:0 auto}
.m-act{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:34px}
.m-btn{display:inline-flex; align-items:center; gap:8px; padding:12px 26px; border:1px solid var(--gold-dim); border-radius:999px; color:var(--ivory)!important; font-size:.95rem; letter-spacing:.02em; transition:background .3s,border-color .3s}
.m-btn:hover{background:rgba(216,184,120,.10); border-color:var(--gold)}
.m-btn.solid{background:var(--gold); border-color:var(--gold); color:#1a140b!important; font-weight:700}
.m-btn.solid:hover{background:#e6c88c}
.m-btn.sm{padding:8px 18px; font-size:.86rem}

.m-stats{display:flex; justify-content:center; width:100%; margin:56px auto 0; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); max-width:620px}
.m-stats div{flex:1; padding:20px 8px; text-align:center}
.m-stats div+div{border-left:1px solid var(--hair)}
.m-stats b{display:block; font-size:1.9rem; font-weight:400; color:var(--ivory); line-height:1.2}
.m-stats span{color:var(--ash); font-size:.82rem; letter-spacing:.08em; white-space:nowrap}

.m-epitaph{text-align:center; margin:96px auto 24px; max-width:40em}
.m-epitaph p{font-size:1.35rem; line-height:1.9; color:var(--ivory); margin:0}
.m-epitaph small{display:block; margin-top:14px; color:var(--ash); font-size:.85rem; letter-spacing:.1em}

.m-sec{margin-top:96px}
.m-head{text-align:center; margin-bottom:32px}
.m-head h2{border:0; margin:0; padding:0; font-size:1.55rem; font-weight:700; color:var(--ivory)}
.m-head p{margin:10px 0 0; color:var(--ash); font-size:.9rem}
.m-head .m-kicker{margin-bottom:10px}

.m-vigil{list-style:none; padding:0; margin:0 auto; max-width:560px}
.m-vigil li{display:grid; grid-template-columns:72px 18px 1fr; align-items:center; gap:14px; padding:18px 4px; border-bottom:1px solid var(--hair)}
.m-vigil li:first-child{border-top:1px solid var(--hair)}
.m-vigil .d{color:var(--gold); font-size:1.05rem; font-variant-numeric:tabular-nums; text-align:right}
.m-vigil .dot{width:7px; height:11px; justify-self:center; border-radius:50% 50% 45% 45% / 65% 65% 35% 35%; background:radial-gradient(ellipse at 50% 75%, #fff3d6, #f2b45a 60%, transparent 80%); box-shadow:0 0 10px 3px rgba(255,180,90,.35)}
.m-vigil a{color:var(--ivory); font-size:1.08rem}
.m-vigil a:hover{color:var(--gold)}
.m-center{text-align:center; margin-top:28px}

.m-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px}
.m-card{display:flex; flex-direction:column; gap:10px; padding:28px 26px 24px; background:linear-gradient(180deg,rgba(216,184,120,.05),rgba(216,184,120,0) 60%); border:1px solid var(--hair); border-radius:4px; transition:border-color .3s}
.m-card:hover{border-color:rgba(216,184,120,.38)}
.m-card .ep{color:var(--gold); font-size:.78rem; letter-spacing:.2em}
.m-card h3{margin:0; font-size:1.25rem; font-weight:700; line-height:1.5}
.m-card h3 a{color:var(--ivory)}
.m-card .meta{color:var(--ash); font-size:.86rem; margin:0}
.m-card .card-act{margin-top:auto; padding-top:12px; display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.m-card .note{color:var(--gold-dim); font-size:.82rem}
.m-card.feature{grid-column:1/-1; text-align:center; align-items:center; padding:44px 28px}
.m-card.feature h3{font-size:1.6rem}

.m-vows{list-style:none; padding:0; margin:0 auto; max-width:620px; display:grid; grid-template-columns:1fr 1fr; gap:0}
.m-vows li{padding:20px 18px; text-align:center; color:var(--ivory); font-size:1rem; border-bottom:1px solid var(--hair)}
.m-vows li:nth-child(odd){border-right:1px solid var(--hair)}
.m-vows li::before{content:"◆"; display:block; color:var(--gold-dim); font-size:.5rem; margin-bottom:8px}

@media (max-width:720px){
  .m-hero{padding:48px 0 24px}
  .m-hero h1{font-size:1.75rem}
  .m-epitaph p{font-size:1.12rem}
  .m-vows{grid-template-columns:1fr}
  .m-vows li:nth-child(odd){border-right:0}
  .m-sec,.m-epitaph{margin-top:72px}
}