/* 성서 형성 연표 — 디자인 규칙 v1 덧씌움. :is(body.wz,html[data-wz] body) 아래에서만 적용된다(규칙: webzine.css). 내용(DOM)은 그대로, 보이는 방식만 바꾼다. */
:is(body.wz,html[data-wz] body){padding:0}
/* 규칙: 테두리 없음 — 이 쪽에 남은 옛 선도 모두 걷는다(면과 여백으로만 나눈다) */
:is(body.wz,html[data-wz] body) *,:is(body.wz,html[data-wz] body) *::before,:is(body.wz,html[data-wz] body) *::after{border:0!important;outline-color:transparent}
:is(body.wz,html[data-wz] body) :focus-visible{outline:2px solid var(--wz-accent)!important}
:is(body.wz,html[data-wz] body) .wrap{max-width:1040px;margin:0 auto;padding:0 var(--s3) var(--s7)}
:is(body.wz,html[data-wz] body) .topbar,:is(body.wz,html[data-wz] body) .navbtn,:is(body.wz,html[data-wz] body) .hero,:is(body.wz,html[data-wz] body) .era,:is(body.wz,html[data-wz] body) .col,:is(body.wz,html[data-wz] body) .item,:is(body.wz,html[data-wz] body) .explain-btn,:is(body.wz,html[data-wz] body) .disputes,:is(body.wz,html[data-wz] body) .lg,:is(body.wz,html[data-wz] body) .anchor,:is(body.wz,html[data-wz] body) .meta,:is(body.wz,html[data-wz] body) .badge,:is(body.wz,html[data-wz] body) .tag,:is(body.wz,html[data-wz] body) .explain-inner{border:0!important;box-shadow:none!important}
/* 큰 제목 */
:is(body.wz,html[data-wz] body) .mast-title{font-size:var(--t-title)!important;line-height:1.06!important;letter-spacing:-.035em!important;font-weight:900!important}
/* 시간축 */
.wz-timeline{margin:var(--s5) calc(var(--s3)*-1) var(--s4);position:sticky;top:0;z-index:20;background:var(--wz-bg);padding:var(--s2) var(--s3) var(--s2)}
.wz-tl-hint{font-size:var(--t-aux);color:var(--wz-mute);margin:var(--s1) var(--s2) 0}
.wz-tl-band{flex:none;min-width:112px}
.wz-tl-band small{display:block;margin-top:2px}
.wz-tl-band i{font-style:normal;font-size:12px;opacity:.55;letter-spacing:.08em}
/* 시대 구간 — 접힌 채로 머리만, 누르면 펼침 */
:is(body.wz,html[data-wz] body) .era{background:var(--wz-s1)!important;border-radius:var(--r)!important;padding:var(--s3)!important;margin:var(--s2) 0!important;scroll-margin-top:152px;transition:background var(--ease)}
:is(body.wz,html[data-wz] body) .era-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s1) var(--s2);cursor:pointer}
:is(body.wz,html[data-wz] body) .era-top h2{font-size:28px!important;letter-spacing:-.03em;margin:0}
:is(body.wz,html[data-wz] body) .era-num{color:var(--wz-mute)!important;font-size:13px!important;background:none!important}
:is(body.wz,html[data-wz] body) .range{background:var(--wz-accent)!important;color:var(--wz-on-accent)!important;border-radius:999px!important;padding:2px 12px!important;font-size:13px!important;font-weight:800!important}
:is(body.wz,html[data-wz] body) .cap{color:var(--wz-mute)!important}
:is(body.wz,html[data-wz] body) .era.wz-closed .grid,:is(body.wz,html[data-wz] body) .era.wz-closed .explain,:is(body.wz,html[data-wz] body) .era.wz-closed .explain-btn{display:none!important}
:is(body.wz,html[data-wz] body) .era:not(.wz-closed){animation:wz-in var(--ease)}
:is(body.wz,html[data-wz] body) .era.wz-closed:hover{background:var(--wz-s2)!important}
/* 네 갈래(트랙) — 면으로 나누고 색은 작은 점으로만 */
:is(body.wz,html[data-wz] body) .grid{gap:var(--s1)!important;margin-top:var(--s3)}
:is(body.wz,html[data-wz] body) .col{background:var(--wz-bg)!important;border-radius:12px!important;padding:var(--s2)!important}
:is(body.wz,html[data-wz] body) .col-h{background:none!important;color:var(--wz-tx)!important;font-weight:800!important;padding:0 0 var(--s1)!important;display:flex;align-items:center;gap:var(--s1)}
:is(body.wz,html[data-wz] body) .col-h::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--wz-mute)}
:is(body.wz,html[data-wz] body) .col[data-t=hb] .col-h::before{background:#E8A33D}:is(body.wz,html[data-wz] body) .col[data-t="2t"] .col-h::before{background:#5CC6A8}:is(body.wz,html[data-wz] body) .col[data-t=nt] .col-h::before{background:#FF7B9C}:is(body.wz,html[data-wz] body) .col[data-t=arch] .col-h::before{background:#6FA8FF}
:is(body.wz,html[data-wz] body) .col.empty{opacity:.45}
:is(body.wz,html[data-wz] body) .item{background:none!important;padding:4px 0!important}
:is(body.wz,html[data-wz] body) .explain-btn{background:var(--wz-bg)!important;color:var(--wz-tx)!important;border-radius:999px!important;padding:6px 14px!important;margin-top:var(--s2);cursor:pointer;transition:background var(--ease)}
:is(body.wz,html[data-wz] body) .explain-inner{background:var(--wz-bg)!important;border-radius:12px!important;padding:var(--s2)!important}
@media (max-width:640px){:is(body.wz,html[data-wz] body) .wrap{padding:0 var(--s2) var(--s6)}.wz-timeline{margin-left:calc(var(--s2)*-1);margin-right:calc(var(--s2)*-1);padding-left:var(--s2);padding-right:var(--s2)}:is(body.wz,html[data-wz] body) .era-top h2{font-size:22px!important}}

/* 머리글 — 개념 지도와 같은 모양(위제목·큰 제목·형광 띠). 옛 장식(선·점)은 걷는다 */
:is(body.wz,html[data-wz] body) .masthead.wz-head{padding:var(--s5) 0 var(--s2)}
:is(body.wz,html[data-wz] body) .masthead .eyebrow.wz-kicker{display:block;margin:0 0 var(--s2)}
:is(body.wz,html[data-wz] body) .masthead .eyebrow .dash{display:none}
:is(body.wz,html[data-wz] body) .masthead .mast-title.wz-title{font-size:var(--t-title)!important;margin:0 0 var(--s2)!important}
:is(body.wz,html[data-wz] body) .masthead .mast-title mark{background:linear-gradient(transparent 58%,var(--wz-accent) 58%);color:inherit;padding:0 .06em}
:is(body.wz,html[data-wz] body) .mast-sub{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);margin:var(--s2) 0 var(--s1)!important}
:is(body.wz,html[data-wz] body) .mast-sub .meta{display:flex;gap:var(--s1);align-items:baseline;margin:0!important}
:is(body.wz,html[data-wz] body) .mast-sub .meta .k{font-size:var(--t-aux)!important;color:var(--wz-mute)!important}
:is(body.wz,html[data-wz] body) .mast-sub .meta .v{font-size:14px!important;font-weight:700}
:is(body.wz,html[data-wz] body) .navrow{display:flex;gap:var(--s1);flex-wrap:wrap;margin:var(--s1) 0 0!important}
:is(body.wz,html[data-wz] body) .navbtn{background:var(--wz-s1)!important;border-radius:999px!important;padding:6px 14px!important;text-decoration:none;font-size:14px;font-weight:700;color:var(--wz-tx)!important;transition:background var(--ease)}
:is(body.wz,html[data-wz] body) .navbtn:hover{background:var(--wz-s2)!important}
:is(body.wz,html[data-wz] body) .topbar{display:none}
/* 시간축은 제목 바로 아래 — 머리글 안에서는 붙박이를 풀고(스크롤하면 따라오게는 유지) 폭만 맞춘다 */
:is(body.wz,html[data-wz] body) .masthead .wz-timeline{margin:var(--s3) 0 var(--s1);padding:0;position:static}
:is(body.wz,html[data-wz] body) .wz-intro{margin:var(--s3) 0}
:is(body.wz,html[data-wz] body) .wz-intro .hero{padding:0!important;margin:0 0 var(--s3)!important;background:none!important}
:is(body.wz,html[data-wz] body) .wz-intro a.sibling{display:flex;justify-content:space-between;gap:var(--s2);align-items:center;background:var(--wz-bg)!important;border-radius:var(--r)!important;padding:var(--s3)!important;text-decoration:none}
:is(body.wz,html[data-wz] body) .wz-intro a.sibling h3{margin:2px 0 4px}
/* 옛 큰 제목의 형광 띠(페이지 고유)는 걷고 새 규칙의 띠 하나만 쓴다 */
:is(body.wz,html[data-wz] body) .masthead .mast-title.wz-title,:is(body.wz,html[data-wz] body) .masthead .mast-title.wz-title::before,:is(body.wz,html[data-wz] body) .masthead .mast-title.wz-title::after{background:none!important;box-shadow:none!important}
:is(body.wz,html[data-wz] body) .masthead .mast-title.wz-title::before,:is(body.wz,html[data-wz] body) .masthead .mast-title.wz-title::after{display:none!important}

/* 머리글 윗줄 */
:is(body.wz,html[data-wz] body) .masthead .wz-back{display:inline-flex;margin:0 0 var(--s3);background:none!important;padding:0!important;font-size:13px;font-weight:600;color:var(--wz-mute)!important}
:is(body.wz,html[data-wz] body) .masthead .wz-back:hover{color:var(--wz-tx)!important}
/* 형성의 리듬 그래프 — 카드 줄 바로 아래, 면으로 */
:is(body.wz,html[data-wz] body) .masthead .fluxchart{margin:var(--s2) 0 var(--s3)!important;background:var(--wz-s1)!important;border-radius:var(--r)!important;padding:var(--s3)!important}
@media (max-width:640px){
  :is(body.wz,html[data-wz] body) .wz-fc-scroll{overflow-x:auto;margin:0 calc(var(--s3)*-1);padding:0 var(--s3);scrollbar-width:thin}
  :is(body.wz,html[data-wz] body) .wz-fc-scroll .fc-svg{min-width:980px}
  :is(body.wz,html[data-wz] body) #fluxSvg text{font-size:14px!important}
  :is(body.wz,html[data-wz] body) .masthead .fluxchart .fc-hint:after{content:" · 좌우로 밀어 보세요"}
}