/* 그 사건, 그 후 — dark documentary theme */
:root{
  color-scheme:dark;
  --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,button:focus-visible,input:focus-visible,select: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 */
/* 배경 #c93b40: 흰 글씨 대비 5.02:1 (기존 #e5484d 3.91:1에서 접근성 개선, 2026-10-31) */
.btn{display:inline-block; background:#c93b40; color:#fff; font-weight:700; padding:11px 22px; border-radius:10px; border:1px solid transparent}
.btn:hover{background:#b02e33; 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}

/* remember (헌화) button — localStorage 기반, 서버 없음.
   클릭할 때마다 불꽃이 5단계까지 은은하게 커지고,
   브라우저 누적 클릭 수와 마일스톤 메시지를 표시한다. */
.remember-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:var(--ink);
  border:1px solid var(--accent2); border-radius:10px;
  font-weight:700; font-size:1rem; padding:11px 24px;
  cursor:pointer; transition:background .3s, box-shadow .6s, color .3s;
  margin:.4em 0 .3em;
}
.remember-btn:hover{background:rgba(212,162,78,.12)}
.remember-btn:focus-visible{outline:2px solid var(--accent2); outline-offset:2px}
.remember-btn .flame{
  display:inline-block; transform-origin:50% 85%;
  filter:grayscale(60%) brightness(.75);
  transition:filter .8s, transform .6s ease;
}
.remember-btn.remembered{
  background:rgba(212,162,78,.14); color:var(--accent2);
  box-shadow:0 0 18px rgba(212,162,78,.35), inset 0 0 12px rgba(212,162,78,.12);
  cursor:pointer;
}
.remember-btn.remembered .flame{filter:none}
.remember-count{font-size:.85rem; margin:0 0 1.2em; color:var(--muted)}
@keyframes candle-glow{
  0%{box-shadow:0 0 4px rgba(212,162,78,.15)}
  40%{box-shadow:0 0 26px rgba(212,162,78,.55), inset 0 0 14px rgba(212,162,78,.18)}
  100%{box-shadow:0 0 18px rgba(212,162,78,.35), inset 0 0 12px rgba(212,162,78,.12)}
}
.remember-btn.remembered.lit{animation:candle-glow 1.6s ease-out}

/* 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}

/* stats — CSS only bar charts (no JS) */
.stat-table{width:100%; border-collapse:collapse; margin:14px 0 6px}
.stat-table th.stat-label{width:10em; min-width:7em; text-align:left; font-weight:600;
  padding:8px 10px 8px 0; border-bottom:1px solid var(--line); vertical-align:middle}
.stat-table td{padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:middle}
.stat-table td.stat-bar{min-width:80px; width:55%}
.stat-table .bar{display:inline-block; height:14px; min-width:3px; border-radius:7px;
  background:linear-gradient(90deg,var(--accent2),var(--accent))}
.stat-table td.stat-n{font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums;
  width:4.5em; text-align:right}
.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:#a68f5f; --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}

/* 추모 테이크오버 — 다음 추모 소재 교체 시 이 블록을 교체 (2026-10-13 정인이 6주기) */
.m-memorial{text-align:center; padding:64px 20px 56px; margin:0 auto 8px; max-width:46em;
  border-top:1px solid var(--gold-dim); border-bottom:1px solid var(--gold-dim);
  background:radial-gradient(ellipse at 50% 0%, rgba(216,184,120,.07), transparent 60%)}
.m-memorial .candle{width:90px; height:142px; margin:0 auto 24px}
.m-memorial .candle .halo{width:220px; height:220px}
.m-memorial h2{border:0; margin:0; padding:0; font-size:2rem; font-weight:700; color:var(--ivory); line-height:1.5}
.m-memorial .m-lede{margin-top:18px}
.m-memorial small{display:block; margin-top:22px; color:var(--gold); font-size:.9rem; letter-spacing:.28em; padding-left:.28em}

/* 오늘의 기록 (평시 모듈) — 추모 기간이 아닐 때 홈페이지 첫 화면. m-memorial과 같은 시각적 무게, 추모가 아닌 '기록' 성격 */
.m-daily{text-align:center; padding:64px 20px 56px; margin:0 auto 8px; max-width:46em;
  border-top:1px solid var(--gold-dim); border-bottom:1px solid var(--gold-dim);
  background:radial-gradient(ellipse at 50% 0%, rgba(216,184,120,.06), transparent 60%)}
.m-daily .ledger{position:relative; width:78px; height:100px; margin:0 auto 26px;
  border:1px solid var(--gold-dim); border-radius:5px; background:var(--bg2);
  box-shadow:0 0 36px rgba(216,184,120,.10)}
.m-daily .ledger::before{content:""; position:absolute; left:15px; right:15px; top:26px; height:52px;
  background:repeating-linear-gradient(to bottom, rgba(216,184,120,.55) 0 2px, transparent 2px 12px)}
.m-daily .ledger::after{content:""; position:absolute; left:15px; right:15px; top:11px; height:6px;
  border-radius:3px; background:var(--gold)}
.m-daily h2{border:0; margin:0; padding:0; font-size:2rem; font-weight:700; color:var(--ivory); line-height:1.5}
.m-daily h2 a{color:var(--ivory)}
.m-daily .m-lede{margin-top:18px}
.m-daily small{display:block; margin-top:22px; color:var(--gold); font-size:.9rem; letter-spacing:.28em; padding-left:.28em}

.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-updates{list-style:none; padding:0; margin:0 auto; max-width:640px}
.m-updates li{display:grid; grid-template-columns:64px 18px 1fr; align-items:start; gap:14px; padding:16px 4px; border-bottom:1px solid var(--hair)}
.m-updates li:first-child{border-top:1px solid var(--hair)}
.m-updates .d{color:var(--gold); font-size:.95rem; font-variant-numeric:tabular-nums; text-align:right; padding-top:2px}
.m-updates .dot{width:7px; height:11px; justify-self:center; margin-top:7px; 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-updates .t{line-height:1.6}
.m-updates .t>a{color:var(--ivory); font-size:1.02rem; font-weight:600}
.m-updates .t>a:hover{color:var(--gold)}
.m-updates .t .u{display:block; color:var(--ash); font-size:.88rem; margin-top:2px}
.m-updates .u-link{color:var(--gold-dim); text-decoration:none; margin-left:4px}
.m-updates .u-link: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}
}

/* ============ 법 개정 연표 (/laws/timeline/) — 순수 HTML/CSS, JS 없음 ============ */
.timeline{position:relative; margin:40px 0 10px; padding:6px 0 30px}
.timeline::before{content:""; position:absolute; top:0; bottom:0; left:50%; width:2px; margin-left:-1px;
  background:linear-gradient(180deg, transparent, var(--line) 8%, var(--line) 92%, transparent)}
.tl-item{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:32px; margin:0 0 56px}
.tl-dot{position:absolute; left:50%; top:4px; width:16px; height:16px; margin-left:-8px; border-radius:50%;
  background:var(--bg); border:3px solid var(--accent2); box-shadow:0 0 12px rgba(212,162,78,.4); z-index:2}
.tl-date{position:absolute; left:50%; top:32px; transform:translateX(-50%); color:var(--accent2); font-weight:800;
  font-size:.82rem; white-space:nowrap; background:var(--bg2); padding:3px 12px;
  border:1px solid var(--line); border-radius:20px; z-index:2; font-variant-numeric:tabular-nums}
.tl-col{display:flex; flex-direction:column; gap:16px}
.tl-col.law{grid-column:1}
.tl-col.case{grid-column:2}
.tl-item.flip .tl-col.law{grid-column:2}
.tl-item.flip .tl-col.case{grid-column:1; grid-row:1}
.tl-law{border-top:3px solid var(--accent2); transition:transform .25s, border-color .25s, box-shadow .25s}
.tl-law .kicker{color:var(--accent2)}
.tl-case{border-top:3px solid #7fb3ff; transition:transform .25s, border-color .25s, box-shadow .25s}
.tl-case .kicker{color:#7fb3ff}
.tl-law:hover,.tl-case:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.35)}
@media (max-width:720px){
  .timeline::before{left:12px}
  .tl-item{display:block; margin:0 0 40px; padding-left:40px}
  .tl-dot{left:12px; top:8px}
  .tl-date{left:auto; right:0; top:0; transform:none}
  .tl-col{margin-bottom:16px}
  .tl-col.law,.tl-col.case,.tl-item.flip .tl-col.law,.tl-item.flip .tl-col.case{grid-column:auto}
}

/* ---------- 신뢰도 개선: 히어로 이미지 · 트러스트바 · 정정 박스 (2026-10-19) ---------- */
.hero-img{
  width:100%; max-width:860px; height:auto; aspect-ratio:16/9; object-fit:cover;
  border-radius:var(--radius); border:1px solid var(--line);
  box-shadow:0 12px 40px rgba(0,0,0,.5); margin-bottom:28px;
}
.case-hero{margin:0 0 20px}
.case-hero img{
  width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  border-radius:var(--radius); border:1px solid var(--line);
  box-shadow:0 8px 28px rgba(0,0,0,.45);
}
.data-asof{color:var(--muted); font-size:.85rem; margin:.6em 0 0; text-align:center}
.trustbar{
  display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center;
  background:#14161b; border:1px solid var(--line); border-left:3px solid var(--accent2);
  border-radius:10px; padding:12px 18px; margin:18px 0 8px; font-size:.93rem;
}
.trustbar-item{color:var(--ink)}
.trustbar-item b{color:var(--accent2)}
.trustbar-item.link{color:#7fb3ff; font-weight:600}
.correct-box{
  background:#1c1a14; border:1px solid #4a3f28; border-left:3px solid var(--accent2);
  border-radius:10px; padding:16px 20px; margin:24px 0;
}
.correct-box .correct-title{font-weight:700; font-size:1.02rem; margin:0 0 6px; color:var(--ivory, #f4f1ea)}
.correct-box p{margin:.35em 0; font-size:.93rem; color:var(--ink)}
.correct-box .correct-mail{margin-top:10px}
.correct-box .correct-mail a{font-weight:700}
@media (max-width:640px){
  .hero-img{margin-bottom:20px}
  .trustbar{font-size:.87rem; padding:10px 14px}
}

/* ---------- 접근성·기일 연동·검색 개선 (2026-10-29, 사이트 작업 원칙) ---------- */
/* 스킵 링크: 키보드 포커스 시에만 나타남 */
.skip-link{
  position:absolute; left:16px; top:-64px; z-index:100;
  background:var(--accent2); color:#171106; font-weight:700;
  padding:10px 18px; border-radius:0 0 10px 10px; transition:top .2s;
}
.skip-link:focus{top:0; color:#171106; text-decoration:none}

/* 기일 행 전체 클릭 (홈 '다가오는 기일' · 기일 캘린더) — 링크 영역을 행 전체로 확장 */
.m-vigil li{position:relative}
.m-vigil .vigil-link::after{content:""; position:absolute; inset:0}
.m-vigil li:focus-within{outline:2px solid var(--gold); outline-offset:2px; border-radius:4px}
.m-vigil .go{color:var(--gold); font-size:.92em}
#anniv-list li{position:relative}
#anniv-list a.cal-link::after{content:""; position:absolute; inset:0}
#anniv-list li:focus-within{outline:2px solid var(--accent2); outline-offset:2px; border-radius:4px}
#anniv-list li.today{background:rgba(212,162,78,.09); border-radius:6px; padding-left:10px; padding-right:10px}
#anniv-list .go{color:var(--accent2); font-size:.92em}

/* 사건 페이지 기록 갱신 이력 타임라인 */
.upd-timeline{list-style:none; padding:0; margin:0}
.upd-timeline li{display:grid; grid-template-columns:138px 18px 1fr; gap:12px; align-items:start; padding:12px 2px; border-bottom:1px solid var(--line)}
.upd-timeline li:first-child{border-top:1px solid var(--line)}
.upd-timeline .d{color:var(--accent2); font-weight:700; font-size:.9rem; font-variant-numeric:tabular-nums; padding-top:2px}
.upd-timeline .dot{width:7px; height:11px; justify-self:center; margin-top:7px; 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 8px 2px rgba(255,180,90,.3)}
.upd-timeline .t{line-height:1.65}
.upd-timeline .u-link{white-space:nowrap}
@media (max-width:640px){
  .upd-timeline li{grid-template-columns:104px 14px 1fr; gap:8px}
  .upd-timeline .d{font-size:.8rem}
}

/* 에피소드 목록 검색 */
.ep-search{margin:22px 0 4px}
.ep-search label{display:block; font-weight:700; margin-bottom:8px}
.ep-search input{
  width:100%; max-width:520px; padding:12px 16px; font-size:1rem;
  color:var(--ink); background:var(--bg2); border:1px solid var(--line); border-radius:10px;
}
.ep-search input::placeholder{color:var(--muted)}
.ep-search input:focus-visible{outline:2px solid var(--accent2); outline-offset:2px}
.ep-count{margin:8px 0 0; min-height:1.4em}

/* ---------- 에피소드 다중 필터 · 기일 알림 · 영상 썸네일 · 지원 CTA (2026-10-31 보완 지시) ---------- */
.ep-filters{display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; margin:16px 0 4px}
.ep-filter label{display:block; font-weight:700; font-size:.9rem; margin-bottom:6px}
.ep-filter select{
  padding:11px 12px; font-size:.95rem; max-width:100%;
  color:var(--ink); background:var(--bg2); border:1px solid var(--line); border-radius:10px;
}
@media (max-width:720px){
  .ep-filter{flex:1 1 140px}
  .ep-filter select{width:100%}
}
.cal-actions{
  background:var(--bg2); border:1px solid var(--line); border-left:3px solid var(--accent2);
  border-radius:10px; padding:16px 20px; margin:20px 0 10px;
}
.cal-actions p{margin:.35em 0}
.cal-actions-title{font-weight:700; font-size:1.02rem}
.cal-btns{display:flex; gap:10px; flex-wrap:wrap; margin:10px 0}
.video-card{margin:18px 0}
.video-card a{display:block; max-width:480px}
.video-card a:hover{text-decoration:none}
.video-thumb{
  width:100%; height:auto; display:block;
  border-radius:var(--radius); border:1px solid var(--line);
  box-shadow:0 8px 28px rgba(0,0,0,.45);
}
.video-cta{
  display:inline-block; margin-top:10px; background:#c93b40; color:#fff;
  font-weight:700; padding:11px 22px; border-radius:10px;
}
.video-card a:hover .video-cta{background:#b02e33}
.support-urgent{
  background:#211417; border:1px solid #5c2f33; border-left:3px solid var(--accent);
  border-radius:10px; padding:16px 20px; margin:20px 0;
}
.support-urgent-title{font-weight:700; font-size:1.05rem; margin:0 0 6px}
.support-urgent-btns{display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 4px}
.support-strip{
  background:#1c1a14; border:1px solid #4a3f28; border-left:3px solid var(--accent2);
  border-radius:10px; padding:16px 20px; margin:24px 0;
}
.support-strip-title{font-weight:700; font-size:1.02rem; margin:0 0 6px}
.support-strip p{margin:.35em 0; font-size:.93rem}

/* 지원 길잡이 (/support/guide/) */
.sg-urgent{
  position:sticky; top:10px; z-index:5;
  background:#211417; border:1px solid #5c2f33; border-left:3px solid var(--accent);
  border-radius:10px; padding:14px 18px; margin:16px 0 22px;
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
}
.sg-urgent b{font-size:1.05rem}
.sg-q{margin:22px 0}
.sg-q h2{border:0; margin:0 0 4px; padding:0; font-size:1.12rem}
.sg-opts{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.sg-opt{
  background:var(--card); color:var(--ink); border:1px solid var(--line);
  border-radius:999px; padding:8px 16px; font-size:.95rem; cursor:pointer;
}
.sg-opt:hover{border-color:var(--accent2)}
.sg-opt[aria-pressed="true"]{background:var(--accent2); color:#14100a; border-color:var(--accent2); font-weight:700}
.sg-src{color:var(--muted); font-size:.8rem; margin-top:10px}
.sg-actions{margin:18px 0}
@media print{
  .sg-opts,.sg-actions,.site-header,.site-footer,.skip-link{display:none !important}
  .sg-urgent{position:static}
}

/* ---------- 동작·포커스·고대비 접근성 (2026-10-31 기술 리뷰 보완) ---------- */
/* 포커스 링 완성: 모든 상호작용 요소에 일관된 표시 */
:focus-visible{outline:2px solid var(--accent2); outline-offset:2px}
/* 동작 줄이기 설정 시 애니메이션·전환·부드러운 스크롤 전면 축소 */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}
/* 고대비 선호 시: 보조 텍스트·경계선을 밝게, 링크에 밑줄로 구분 보강 */
@media (prefers-contrast: more){
  :root{--muted:#c6cdd9; --line:#4b5262; --accent2:#eec27a}
  body.home{--ash:#cfc8ba; --gold-dim:#c9a86a; --hair:rgba(216,184,120,.38)}
  a:not(.btn):not(.m-btn){text-decoration:underline}
  .tbl th{color:var(--ink)}
  .badge{border-width:2px}
}
/* Windows 고대비(강제 색상) 모드: 카드·버튼 경계가 사라지지 않게 */
@media (forced-colors: active){
  .card,.m-card,.btn,.m-btn,.badge,.trustbar,.correct-box,.support-strip,.support-urgent,.cal-actions{
    border:1px solid CanvasText;
  }
}


/* 사건 페이지 태그 칩 (2026-11-09) */
.case-tags{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.tag-chip{display:inline-block;padding:4px 11px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.85rem;text-decoration:none;background:var(--card)}
a.tag-chip:hover{color:var(--accent2);border-color:var(--accent2)}