/* hiddensideof.com — 공통 스타일 (044 시제품 v8에서 옮김 · 25 문서 「색」: 다크 #05080D · 빨강 #FF5A50 · 파랑 #6FA3C8) */
:root{
  --paper:#F2F4F6; --card:#FFFFFF; --ink:#1A2027; --muted:#5A6570; --faint:#9AA4AE; --line:#D6DDE4;
  --red:#D9443A; --blue:#2F6F9F; --amber:#A86B12; --hl:#E6EEF5;
  --f-display:"Black Han Sans","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --f-body:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#05080D; --card:#0D1218; --ink:#E8EDF2; --muted:#949FAA; --faint:#56616C; --line:#1F2831;
  --red:#FF5A50; --blue:#6FA3C8; --amber:#E2A54B; --hl:#141C26; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#05080D; --card:#0D1218; --ink:#E8EDF2; --muted:#949FAA; --faint:#56616C; --line:#1F2831;
  --red:#FF5A50; --blue:#6FA3C8; --amber:#E2A54B; --hl:#141C26; color-scheme:dark}
*{box-sizing:border-box}
html{scroll-padding-top:16px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.65;word-break:keep-all;overflow-wrap:anywhere;padding-inline:16px;padding-block:24px 72px}
a{color:var(--blue)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.site-nav{max-width:1180px;margin:0 auto 18px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:13px;color:var(--muted)}
.site-nav .brand{font-family:var(--f-display);font-size:18px;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.site-nav .brand b{color:var(--red);font-weight:400}
.site-nav a{color:var(--muted);text-decoration:none}
.site-nav a:hover{color:var(--ink)}
.site-nav .theme{margin-left:auto}
.theme{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:2px;background:var(--card)}
.theme button{font-size:12px;color:var(--muted);padding:2px 10px;border-radius:999px;letter-spacing:0}
.theme button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

.wrap{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:320px minmax(0,1fr);grid-template-areas:"side head" "side main";column-gap:44px;align-items:start}
header{grid-area:head;min-width:0}
main{grid-area:main;min-width:0}
aside{grid-area:side;position:sticky;top:calc(env(safe-area-inset-top,0px) + 16px);height:calc(100vh - 32px - env(safe-area-inset-top,0px));display:flex;flex-direction:column;gap:12px;min-height:0}

.stage{position:relative;aspect-ratio:9/16;height:min(50vh,520px);max-width:100%;align-self:center;flex:none}
.vbox{position:absolute;inset:0;background:#000;border-radius:10px;overflow:hidden}
.vbox iframe,.vbox #yt{width:100%;height:100%;display:block;border:0}
.dockbar{display:none}

.toc{flex:1;min-height:0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.toc-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}
.toc-head b{color:var(--ink);font-weight:700;font-size:13px}
.toc-head label{margin-left:auto;display:flex;align-items:center;gap:5px}
.toc-toggle{display:none;width:100%;align-items:center;gap:10px;padding:10px 16px;text-align:left}
.toc-toggle .cur{flex:1;min-width:0;display:flex;gap:8px;align-items:baseline}
.toc-toggle .cur > span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:500}
.toc-toggle .tc{font-size:12px;color:var(--red);white-space:nowrap}
.toc-toggle .more{font-size:12px;color:var(--muted);white-space:nowrap}
.toc ol{list-style:none;margin:0;padding:4px;overflow:auto;flex:1}
.toc li button{width:100%;display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:2px 8px;align-items:baseline;text-align:left;padding:7px 8px;border-radius:7px;position:relative}
.toc li button:hover,.toc li.on button{background:var(--hl)}
.toc .tc{font-size:12px;color:var(--muted)}
.toc .nm{font-size:14px;line-height:1.4}
.toc .pl{font-size:10px;color:var(--faint)}
.toc li.on .pl{color:var(--red)}
.toc .prog{grid-column:2/4;height:2px;background:var(--line);border-radius:1px;overflow:hidden;display:none}
.toc li.on .prog{display:block}
.toc .prog i{display:block;height:100%;background:var(--red);width:0}

.eyebrow{font-size:12px;letter-spacing:.06em;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 10px}
.eyebrow b{color:var(--red);font-weight:700}
.eyebrow a{color:inherit}
h1{font-family:var(--f-display);font-weight:400;font-size:clamp(26px,3.4vw,38px);line-height:1.25;margin:10px 0 6px;text-wrap:balance;letter-spacing:-.01em}
h1 q{quotes:none;color:var(--red)}
.lede{color:var(--muted);margin:0 0 14px;max-width:62ch}
.facts{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13px;margin-bottom:6px;align-items:center}
.facts .yt{margin-left:auto}
.key{font-size:12.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 14px;padding-block:10px 4px;border-bottom:1px solid var(--line)}
.key span{display:inline-flex;gap:5px;align-items:baseline}

.mk{font-family:var(--f-mono);font-weight:500}
.mk-ok{color:var(--blue)} .mk-news{color:var(--amber)} .mk-no{color:var(--red)} .mk-int{color:var(--faint)}
.v{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:500;padding:1px 8px;border-radius:999px;border:1px solid currentColor;white-space:nowrap;line-height:1.6}
.v-ok{color:var(--blue)} .v-news{color:var(--amber)} .v-no{color:var(--red)}
.v::before{font-family:var(--f-mono)}
.v-ok::before{content:"✔"} .v-news::before{content:"△"} .v-no::before{content:"✗"}

.sec{padding-block:22px 6px}
.sec h2{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 8px;font-size:19px;font-weight:700;text-wrap:balance}
.sec h2 .tc{font-size:14px;font-weight:400;color:var(--red)}
.sec .acts{margin-left:auto;display:flex;gap:4px}
.sec .acts button{font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-weight:400}
.sec .acts button:hover{color:var(--ink);border-color:var(--muted)}
.sec-rule{height:1px;background:var(--line);margin-bottom:6px}
.s{display:grid;grid-template-columns:42px 26px minmax(0,1fr);gap:0 6px;padding:6px 8px 6px 4px;border-radius:7px;position:relative}
.s:hover,.s.on{background:var(--hl)}
.s.on::before{content:"";position:absolute;left:-7px;top:8px;bottom:8px;width:3px;border-radius:2px;background:var(--red)}
.s .tc{font-size:12px;color:var(--muted);padding-top:4px;text-align:left}
.s .mkb{font-size:13px;padding-top:2px;height:24px;border-radius:5px;display:grid;place-items:center;line-height:1}
.s .mkb:hover,.s .mkb[aria-expanded="true"]{background:var(--card);box-shadow:0 0 0 1px var(--line)}
.s .mkb sup{font-size:9px;margin-left:1px;vertical-align:4px}
.s .txt{font-size:16.5px;max-width:62ch;cursor:pointer;text-align:left}
.panel{grid-column:3;display:grid;gap:8px;padding-block:8px 4px}
.intnote{font-size:13px;color:var(--muted)}

.fact{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:12px 14px;display:grid;gap:6px}
.fact .top{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.fact .id{font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.fact .claim{font-weight:500}
.fact blockquote{margin:0;padding-left:10px;border-left:2px solid var(--line);color:var(--muted);font-size:14px}
.fact .src{font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 10px}
.fact .note{font-size:13px;color:var(--amber)}
.fact .used{font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.fact .used button{border:1px solid var(--line);border-radius:5px;padding:0 6px;font-family:var(--f-mono);font-size:12px}

#sources{margin-top:40px;padding-top:18px;border-top:2px solid var(--ink)}
#sources h2{font-size:22px;margin:0 0 4px}
#sources > p{color:var(--muted);margin:0 0 10px}
.filters{display:flex;flex-wrap:wrap;gap:6px}
.filters button{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:3px 12px;font-size:13px}
.filters button[aria-pressed="true"]{border-color:var(--ink);font-weight:500}
.flist{display:grid;gap:10px;padding-top:12px}
.method{margin-top:26px;font-size:13.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px;max-width:70ch}
.method h3{color:var(--ink);font-size:14px;margin:0 0 6px}
.method ul{margin:6px 0 0;padding-left:18px}
.corr{margin-top:26px;font-size:13.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px;max-width:70ch}
.corr h3{color:var(--ink);font-size:14px;margin:0 0 6px}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 20px);background:var(--ink);color:var(--paper);padding:8px 14px;border-radius:8px;font-size:13px;max-width:calc(100% - 32px);z-index:20;word-break:break-all}
.toast input{font:inherit;font-size:12px;width:min(70vw,420px);margin-top:4px;background:var(--paper);color:var(--ink);border:0;border-radius:4px;padding:3px 6px}

/* 목록 페이지 */
.list-wrap{max-width:900px;margin:0 auto}
.list-wrap h1{margin-top:0}
.list-wrap .lede{max-width:70ch}
.eplist{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px}
.eplist li{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:4px 12px;align-items:baseline;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--card)}
.eplist .no{font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.eplist .t{font-size:15px}
.eplist .t a{color:var(--ink);text-decoration:none}
.eplist .t a:hover{text-decoration:underline}
.eplist .st{font-size:12px;color:var(--muted);white-space:nowrap}
.eplist .st.ready{color:var(--blue)}
.eplist .meta{grid-column:2/4;font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 10px}
.fields{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.fields a{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:3px 12px;font-size:13px;color:var(--ink);text-decoration:none}
.fields a[aria-current="page"]{border-color:var(--ink);font-weight:500}
.foot{max-width:1180px;margin:48px auto 0;font-size:12px;color:var(--faint);display:flex;flex-wrap:wrap;gap:4px 14px}
.foot a{color:inherit}

@media (max-width:860px){
  /* 폰(10-06 개정): 영상 + 구간 줄을 위에 고정하고 대본만 아래서 흐른다. 작은 플레이어로 줄이지 않는다(사용자 지적: 너무 작고, 크게 눌러도 따라가기 때문에 다시 줄어듦) */
  body{padding-block:12px 72px}
  .wrap{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "side" "main";row-gap:10px}
  aside{position:sticky;top:0;height:auto;gap:0;z-index:4;background:var(--paper);margin-inline:-16px;padding:6px 16px 0;box-shadow:0 8px 16px -12px rgba(0,0,0,.45)}
  .stage{height:38vh;max-height:420px;width:auto;align-self:center}
  .toc{flex:none;border-radius:0;border-inline:0;margin:6px -16px 0;max-height:none}
  .toc-head{padding:0;border-bottom:0}
  .toc-head > b,.toc-head > #toc-count,.toc-head > label{display:none}
  .toc-toggle{display:flex!important}
  .toc ol{display:none;max-height:40vh;border-top:1px solid var(--line)}
  .toc.open ol{display:block}
  .toc .pl{display:none}
  .dockbar{display:none!important}
  .s{grid-template-columns:38px 24px minmax(0,1fr);scroll-margin-top:calc(38vh + 64px)}
  .s .txt{font-size:15.5px}
  .panel{grid-column:1/4}
  .facts .yt{margin-left:0}
  .sec .acts{margin-left:0;width:100%}
  .sec{scroll-margin-top:calc(38vh + 64px)}
  .eplist li{grid-template-columns:44px minmax(0,1fr)}
  .eplist .st{grid-column:2;white-space:normal}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}