/* ============================================================
   게시본 부품 — 뼈대만 있습니다. 색·글꼴은 여기서 정하지 않습니다.
   모든 값은 --게시-* 토큰으로 받고, 그 토큰은 디자인/<이름>/연결.css 가 채웁니다.

   ★ 변수 이름에 '게시-' 를 붙인 이유
     꽂아 넣는 디자인 시스템도 --font-body 같은 흔한 이름을 씁니다.
     이름표가 없으면 서로 덮어써서 디자인이 깨집니다.
   ============================================================ */

/* 디자인이 값을 안 주었을 때만 쓰이는 최소한의 back-up */
:root{
  --게시-바탕:#fff; --게시-종이:#f7f7f5; --게시-글:#1a1a1a; --게시-흐린글:#6b6b6b;
  --게시-강조:#2f5d7c; --게시-강조바탕:#eef3f7; --게시-선:#e3e3e0;
  --게시-제목글꼴:system-ui,sans-serif; --게시-본문글꼴:system-ui,sans-serif;
  --게시-제목굵기:700; --게시-폭:720px; --게시-모서리:6px; --게시-사이:40px;
  --게시-글크기:17px; --게시-줄간:1.85; --게시-자간:-.01em; --게시-배율:1;
  --게시-테두리:1px solid var(--게시-선);
  --게시-그림자:none; --게시-카드바탕:transparent; --게시-카드안쪽:0;
  --게시-카드테두리:0; --게시-사진모서리:4px; --게시-표지위아래:64px 0 44px;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--게시-바탕); color:var(--게시-글);
  font-family:var(--게시-본문글꼴);
  font-size:calc(var(--게시-글크기) * var(--게시-배율));
  line-height:var(--게시-줄간);
  -webkit-text-size-adjust:100%;
}
.판{max-width:var(--게시-폭); margin:0 auto; padding:0 22px 120px}
a{color:var(--게시-강조)}

/* ---------- 표지 ---------- */
.표지{padding:var(--게시-표지위아래); border-bottom:var(--게시-테두리); margin-bottom:var(--게시-사이)}
.표지 h1{
  font-family:var(--게시-제목글꼴); font-weight:var(--게시-제목굵기);
  font-size:calc(2.3rem * var(--게시-배율)); line-height:1.24;
  margin:0 0 .35em; letter-spacing:var(--게시-자간);
}
.표지 .부제{color:var(--게시-흐린글); font-size:1.02rem; margin:0 0 1.4em}
.표지 .집계{
  display:flex; flex-wrap:wrap; gap:8px 20px; font-size:.85rem;
  color:var(--게시-흐린글); border-top:var(--게시-테두리); padding-top:14px;
}

/* ---------- 제작 노트 ---------- */
.제작노트{
  background:var(--게시-강조바탕); border-left:3px solid var(--게시-강조);
  border-radius:0 var(--게시-모서리) var(--게시-모서리) 0;
  padding:16px 20px; margin:0 0 var(--게시-사이); font-size:.92rem;
}
.제작노트 .딱지{display:block; font-weight:700; color:var(--게시-강조);
                font-size:.78rem; letter-spacing:.06em; margin-bottom:8px}
.제작노트 p{margin:.3em 0; white-space:pre-wrap}
.제작노트 .안내{color:var(--게시-흐린글); font-size:.82rem; margin-top:10px}

/* ---------- 목차 ---------- */
.목차{margin:0 0 var(--게시-사이); padding:20px 24px; background:var(--게시-종이);
      border:var(--게시-테두리); border-radius:var(--게시-모서리); box-shadow:var(--게시-그림자)}
.목차 .딱지{font-size:.78rem; letter-spacing:.06em; color:var(--게시-흐린글);
            font-weight:700; margin-bottom:12px}
.목차 ol{margin:0; padding-left:1.2em}
.목차 li{margin:.35em 0}
.목차 a{text-decoration:none}
.목차 a:hover{text-decoration:underline}
.목차 .날{color:var(--게시-흐린글); font-size:.82rem; margin-left:8px}

/* ---------- 자료 ---------- */
.자료{margin:0 0 var(--게시-사이); scroll-margin-top:20px}
.자료 h2.제목{
  font-family:var(--게시-제목글꼴); font-weight:var(--게시-제목굵기);
  font-size:calc(1.45rem * var(--게시-배율)); line-height:1.35;
  margin:0 0 .3em; letter-spacing:var(--게시-자간);
}
.자료 .머리{
  display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline;
  font-size:.83rem; color:var(--게시-흐린글); margin-bottom:1.1em;
  padding-bottom:.8em; border-bottom:var(--게시-테두리);
}
.자료 .머리 .원문{margin-left:auto; text-decoration:none; white-space:nowrap}
.자료 .머리 .원문:hover{text-decoration:underline}
.자료 .몸{
  background:var(--게시-카드바탕); padding:var(--게시-카드안쪽);
  border:var(--게시-카드테두리); border-radius:var(--게시-모서리);
  box-shadow:var(--게시-그림자);
}
.자료 .몸 > p{margin:0 0 1.05em}
.자료 .몸 > p:last-child{margin-bottom:0}
.자료 .몸 h3{font-family:var(--게시-제목글꼴); font-size:calc(1.12rem * var(--게시-배율));
             font-weight:var(--게시-제목굵기); margin:1.6em 0 .5em}
.자료.강조{
  background:var(--게시-강조바탕); margin-left:-24px; margin-right:-24px;
  padding:26px 24px; border-radius:var(--게시-모서리);
}

.자료 .몸 h4{font-family:var(--게시-제목글꼴); font-size:calc(1rem * var(--게시-배율));
             font-weight:var(--게시-제목굵기); margin:1.4em 0 .4em; color:var(--게시-흐린글)}
.자료 .몸 b,.자료 .몸 strong{font-weight:700}
.자료 .몸 code{font-family:Consolas,"D2Coding",monospace; font-size:.9em;
               background:var(--게시-강조바탕); padding:.1em .35em; border-radius:3px}
.자료 .몸 ul,.자료 .몸 ol{margin:0 0 1.05em; padding-left:1.5em}
.자료 .몸 li{margin:.25em 0}
.자료 .몸 li ul,.자료 .몸 li ol{margin:.25em 0 .25em}
.자료 .몸 pre.코드{
  background:var(--게시-종이); border:var(--게시-테두리); border-radius:var(--게시-모서리);
  padding:14px 16px; overflow:auto; font:.86em/1.6 Consolas,"D2Coding",monospace; margin:1.2em 0;
}
.자료 .몸 pre.코드 code{background:none; padding:0; font-size:inherit}
.자료 .몸 .표틀{overflow-x:auto; margin:1.4em 0}
.자료 .몸 table.표{border-collapse:collapse; width:100%; font-size:.93em}
.자료 .몸 table.표 th,.자료 .몸 table.표 td{border:var(--게시-테두리); padding:.5em .8em; text-align:left; vertical-align:top}
.자료 .몸 table.표 th{background:var(--게시-종이); font-weight:700}
.자료 .몸 hr.구분{border:0; border-top:var(--게시-테두리); margin:2em auto; width:40%}
.자료.사진자료 h2.제목{font-size:calc(1.1rem * var(--게시-배율))}

/* ============================================================
   접기 — 모든 것은 접힌다. 자료가 많아도 화면이 넘치지 않게.
   자료·장·목차·제작노트·사진판·출처가 전부 <details> 다. JS 없이도 손으로 여닫힌다.
   ============================================================ */
summary{cursor:pointer; list-style:none}
summary::-webkit-details-marker{display:none}

/* 접기줄 — 모두 펼치기/접기 */
.접기줄{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; justify-content:space-between;
        margin:calc(-1 * var(--게시-사이) + 10px) 0 var(--게시-사이); font-size:.83rem; color:var(--게시-흐린글)}
.접기줄 .단추들{display:flex; gap:6px}
.접기줄 button{font:inherit; font-size:.8rem; padding:5px 12px; border-radius:999px; cursor:pointer;
               border:var(--게시-테두리); background:var(--게시-종이); color:var(--게시-글)}
.접기줄 button:hover{border-color:var(--게시-강조); color:var(--게시-강조)}

/* 자료 제목줄 (나열·갤러리·잡지·타임라인) — 누르면 여닫힘, 오른쪽에 화살표 */
details.자료 > summary.제목줄{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; padding-right:28px; position:relative}
details.자료 > summary.제목줄 h2.제목{margin:0; flex:1 1 auto; min-width:0}
details.자료 > summary.제목줄 .곁{font-size:.8rem; color:var(--게시-흐린글); white-space:nowrap}
details.자료 > summary.제목줄::after{content:"›"; position:absolute; right:4px; top:.05em; font-size:1.4em; line-height:1;
  color:var(--게시-흐린글); transform:rotate(90deg); transition:transform .15s}
details.자료:not([open]) > summary.제목줄::after{transform:rotate(0)}
details.자료:not([open]){margin-bottom:12px}
details.자료:not([open]) > summary.제목줄{padding-bottom:10px; border-bottom:var(--게시-테두리)}
details.자료:not([open]) > summary.제목줄 h2.제목{font-size:calc(1.12rem * var(--게시-배율)); margin:0}
details.자료 > summary.제목줄:hover h2.제목{color:var(--게시-강조)}
details.자료 > .머리{margin-top:.2em}

/* 장 — 머리를 누르면 그 장이 통째로 접힌다 */
details.장 > summary.장머리 .곁{margin-left:auto; font-size:.8rem; color:var(--게시-흐린글); font-weight:400}
details.장 > summary.장머리::after{content:"›"; margin-left:8px; color:var(--게시-흐린글); transform:rotate(90deg); display:inline-block; transition:transform .15s}
details.장:not([open]) > summary.장머리::after{transform:rotate(0)}
details.장:not([open]) > summary.장머리{margin-bottom:0}

/* 목차·제작노트·사진판·출처 딱지가 곧 여닫이 */
details.목차 > summary.딱지, details.제작노트 > summary.딱지, details.사진모음 > summary.딱지, .출처 > details > summary.딱지{display:block}
details.목차:not([open]), details.제작노트:not([open]){padding-bottom:12px}
details.목차:not([open]) > summary.딱지, details.제작노트:not([open]) > summary.딱지{margin-bottom:0}
details.목차 > summary.딱지::after, details.제작노트 > summary.딱지::after, details.사진모음 > summary.딱지::after, .출처 > details > summary.딱지::after{content:"  ▾"; opacity:.6}
details.목차:not([open]) > summary.딱지::after, details.제작노트:not([open]) > summary.딱지::after, details.사진모음:not([open]) > summary.딱지::after, .출처 > details:not([open]) > summary.딱지::after{content:"  ▸"}

/* 사진 더 보기 */
details.더보기{margin:-.6em 0 1.6em}
details.더보기 > summary{display:inline-block; font-size:.85rem; padding:6px 14px; border-radius:999px;
  border:var(--게시-테두리); background:var(--게시-종이); color:var(--게시-강조)}
details.더보기 > summary:hover{border-color:var(--게시-강조)}
details.더보기[open] > summary{margin-bottom:.4em}
details.더보기 > .갤러리{margin-top:.6em}

/* 인쇄할 땐 스크립트가 다 펼친다. 화살표·단추는 숨김 */
@media print{ .접기줄, summary::after{display:none} }

/* ---------- 장(章) — 하위 폴더 하나가 장 하나 ---------- */
.장{margin:0 0 calc(var(--게시-사이) * 1.2)}
.장머리{display:flex; align-items:baseline; gap:14px; margin:0 0 var(--게시-사이);
        padding-bottom:12px; border-bottom:2px solid var(--게시-강조)}
.장머리 .딱지{font-size:.78rem; letter-spacing:.06em; font-weight:700; color:var(--게시-강조)}
.장머리 h2{font-family:var(--게시-제목글꼴); font-weight:var(--게시-제목굵기);
           font-size:calc(1.7rem * var(--게시-배율)); margin:0; letter-spacing:var(--게시-자간)}
.장 .자료{margin-left:0}
.목차 li.장{list-style:none; margin:.6em 0 .3em -1.2em}
.목차 li.장 > .장이름{font-weight:700; color:var(--게시-강조); font-size:.9rem}
.목차 li.장 > ol{margin-top:.2em}

/* ---------- 사진 크기 (메모: 사진크기: 크게/작게) ---------- */
.사진-크게 .갤러리{grid-template-columns:1fr}
.사진-크게 figure{margin:2em calc(-1 * clamp(0px, 6vw, 60px))}
.사진-크게 .갤러리 figure{margin:0}
.사진-작게 .갤러리{grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px}
.사진-작게 figure{max-width:60%; margin:1.2em auto}
.사진-작게 .갤러리 figure{max-width:none; margin:0}
@media (max-width:640px){ .사진-크게 figure{margin:1.6em 0} }

/* ---------- 인용 ---------- */
blockquote{
  margin:1.5em 0; padding:.2em 0 .2em 20px;
  border-left:3px solid var(--게시-강조);
  font-family:var(--게시-제목글꼴); font-size:1.05em;
}
blockquote p{margin:.3em 0}

/* ---------- 사진 ---------- */
figure{margin:1.6em 0}
figure img{width:100%; height:auto; display:block;
           border-radius:var(--게시-사진모서리); box-shadow:var(--게시-그림자)}
figcaption{font-size:.83rem; color:var(--게시-흐린글); margin-top:.6em; text-align:center}
.갤러리{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
        gap:14px; margin:1.6em 0}
.갤러리 figure{margin:0}
.사진없음{
  background:var(--게시-종이); border:1px dashed var(--게시-선);
  border-radius:var(--게시-사진모서리); padding:28px 20px; text-align:center;
  color:var(--게시-흐린글); font-size:.86rem; margin:1.6em 0;
}

/* ---------- 붙임 ---------- */
.붙임{
  display:flex; gap:12px; align-items:center; text-decoration:none; color:inherit;
  background:var(--게시-종이); border:var(--게시-테두리);
  border-radius:var(--게시-모서리); padding:14px 18px; margin:1.2em 0;
  box-shadow:var(--게시-그림자);
}
.붙임:hover{border-color:var(--게시-강조)}
.붙임 .아이콘{font-size:1.3rem; flex:0 0 auto}
.붙임 .이름{font-weight:600; font-size:.95rem}
.붙임 .곁{font-size:.8rem; color:var(--게시-흐린글)}

/* ---------- 통합 사이트 (허브) ---------- */
.허브격자{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
          gap:18px; margin:0 0 var(--게시-사이)}
.게시본칸{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--게시-종이); border:var(--게시-테두리);
  border-radius:var(--게시-모서리); box-shadow:var(--게시-그림자); overflow:hidden;
}
.게시본칸:hover{border-color:var(--게시-강조)}
.게시본칸 .그림{
  aspect-ratio:16/9; background:var(--게시-강조바탕); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.게시본칸 .그림 img{width:100%; height:100%; object-fit:cover; display:block}
.게시본칸 .그림 .없음{color:var(--게시-흐린글); font-size:.8rem}
.게시본칸 .속{padding:16px 18px 18px}
.게시본칸 h3{
  font-family:var(--게시-제목글꼴); font-weight:var(--게시-제목굵기);
  font-size:calc(1.08rem * var(--게시-배율)); line-height:1.4;
  margin:0 0 .3em; letter-spacing:var(--게시-자간);
}
.게시본칸 .곁{color:var(--게시-흐린글); font-size:.86rem; margin:0 0 .8em}
.게시본칸 .셈{display:flex; flex-wrap:wrap; gap:4px 12px;
              color:var(--게시-흐린글); font-size:.78rem}
.빈안내{
  border:1px dashed var(--게시-선); border-radius:var(--게시-모서리);
  padding:34px 24px; text-align:center; color:var(--게시-흐린글); font-size:.92rem;
}

/* ---------- 꼬리 ---------- */
.출처{margin-top:calc(var(--게시-사이) * 1.4); padding-top:24px;
      border-top:var(--게시-테두리); font-size:.85rem; color:var(--게시-흐린글)}
.출처 .딱지{font-weight:700; letter-spacing:.06em; font-size:.78rem; margin-bottom:12px}
.출처 ul{margin:0; padding-left:1.1em}
.출처 li{margin:.3em 0; word-break:break-all}
.출처 .곁{opacity:.75}
.만든표시{margin-top:28px; font-size:.78rem; color:var(--게시-흐린글)}

/* ============================================================
   배치 — 자료를 늘어놓는 방식. 디자인(색·글꼴)과 별개 축.
   <html class="배치-바둑판"> 처럼 걸린다. 기본(나열)은 위의 규칙 그대로.
   ============================================================ */

/* ---------- 바둑판 · 목록 : 카드를 눌러 펼친다 (details, JS 없음) ---------- */
details.자료{margin:0}
details.자료 > summary.카드{
  list-style:none; cursor:pointer; display:flex; gap:14px; align-items:flex-start;
  background:var(--게시-종이); border:var(--게시-테두리); border-radius:var(--게시-모서리);
  box-shadow:var(--게시-그림자); overflow:hidden; height:100%;
}
details.자료 > summary.카드::-webkit-details-marker{display:none}
details.자료 > summary.카드:hover{border-color:var(--게시-강조)}
details.자료.강조 > summary.카드{border-color:var(--게시-강조); background:var(--게시-강조바탕)}
.카드 .표지그림{flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:var(--게시-강조바탕); overflow:hidden}
.카드 .표지그림 img{width:100%; height:100%; object-fit:cover; display:block}
.카드 .빈그림{font-size:1.6rem; color:var(--게시-흐린글)}
.카드 .카드글{display:flex; flex-direction:column; gap:4px; min-width:0; padding:14px 16px 16px}
.카드 .카드제목{font-family:var(--게시-제목글꼴); font-weight:var(--게시-제목굵기); font-size:calc(1.05rem * var(--게시-배율)); line-height:1.35; letter-spacing:var(--게시-자간)}
.카드 .카드곁{font-size:.78rem; color:var(--게시-흐린글)}
.카드 .발췌{font-size:.86rem; color:var(--게시-흐린글); line-height:1.55; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical}
details.자료 > .펼침{padding:6px 4px 30px}
details.자료[open] > summary.카드{border-bottom-left-radius:0; border-bottom-right-radius:0; border-color:var(--게시-강조)}
details.자료[open] > summary.카드 .발췌{display:none}

.배치-바둑판 .자료들, .배치-바둑판 .장 .장속{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px; align-items:start;
}
.배치-바둑판 .자료들 > .장{grid-column:1 / -1}
.배치-바둑판 details.자료[open]{grid-column:1 / -1}
.배치-바둑판 .카드{flex-direction:column; gap:0}
.배치-바둑판 .카드 .표지그림{width:100%; aspect-ratio:16/10}
.배치-바둑판 .카드 .표지그림.빈그림{aspect-ratio:16/5}
.배치-바둑판 details.자료[open] > summary.카드{flex-direction:row}
.배치-바둑판 details.자료[open] > summary.카드 .표지그림{width:120px; aspect-ratio:auto; height:80px; margin:14px 0 14px 14px; border-radius:calc(var(--게시-모서리) / 2)}
.배치-바둑판 .판, .배치-목록 .판{max-width:min(1100px, 100%)}
.배치-바둑판 .표지, .배치-목록 .표지, .배치-갤러리 .표지{max-width:var(--게시-폭); margin-left:auto; margin-right:auto}
.배치-바둑판 .제작노트, .배치-목록 .제작노트{max-width:var(--게시-폭); margin-left:auto; margin-right:auto}
.배치-바둑판 details.자료 > .펼침, .배치-목록 details.자료 > .펼침{max-width:var(--게시-폭); margin:0 auto}

.배치-목록 .자료들, .배치-목록 .장 .장속{display:flex; flex-direction:column; gap:8px}
.배치-목록 .카드{align-items:center; padding-right:14px}
.배치-목록 .카드 .표지그림{width:88px; height:64px; margin:8px 0 8px 8px; border-radius:calc(var(--게시-모서리) / 2)}
.배치-목록 .카드 .카드글{padding:10px 8px}
.배치-목록 .카드 .발췌{-webkit-line-clamp:1}
.배치-목록 .카드 .카드제목{font-size:calc(.98rem * var(--게시-배율))}
.배치-목록 .장머리{margin-top:calc(var(--게시-사이) * .6)}

/* ---------- 슬라이드 : 한 화면에 하나. scroll-snap + 점 길잡이 ---------- */
.배치-슬라이드 body{overflow:hidden}
.배치-슬라이드 .판{max-width:none; padding:0; height:100vh; height:100dvh; overflow-y:auto; scroll-snap-type:y mandatory; scroll-behavior:smooth}
.배치-슬라이드 .슬라이드{
  min-height:100vh; min-height:100dvh; scroll-snap-align:start; scroll-snap-stop:always;
  box-sizing:border-box; padding:48px 24px 72px; overflow-y:auto;
  display:flex; flex-direction:column; justify-content:center;
}
.배치-슬라이드 .슬라이드 > *{width:100%; max-width:var(--게시-폭); margin-left:auto; margin-right:auto}
.배치-슬라이드 .슬라이드 .자료{margin-bottom:0}
.배치-슬라이드 .슬라이드.첫{justify-content:center}
.배치-슬라이드 .슬라이드.첫 .표지{border-bottom:0; padding-top:0}
.배치-슬라이드 .슬라이드.첫 .목차{margin-bottom:0}
.배치-슬라이드 .장슬라이드{min-height:100vh; min-height:100dvh; scroll-snap-align:start; display:flex; align-items:center; justify-content:center}
.배치-슬라이드 .장슬라이드 .장머리{border-bottom:0; flex-direction:column; align-items:center; gap:10px}
.배치-슬라이드 .장슬라이드 .장머리 h2{font-size:calc(2.4rem * var(--게시-배율))}
.배치-슬라이드 .자료들, .배치-슬라이드 .장, .배치-슬라이드 .장속{display:contents}
.배치-슬라이드 .출처{margin-top:0}
.배치-슬라이드 .슬라이드.끝{justify-content:flex-start}
.슬라이드길{
  position:fixed; right:18px; bottom:18px; z-index:9; display:flex; align-items:center; gap:6px;
  background:var(--게시-종이); border:var(--게시-테두리); border-radius:999px; padding:6px 8px; box-shadow:var(--게시-그림자);
}
.슬라이드길 button{font:inherit; border:0; background:transparent; cursor:pointer; color:var(--게시-글); border-radius:999px; line-height:1}
.슬라이드길 > button{font-size:1.3rem; padding:2px 8px}
.슬라이드길 .점들{display:flex; gap:5px; align-items:center; max-width:40vw; overflow:hidden}
.슬라이드길 .점들 button{width:8px; height:8px; padding:0; background:var(--게시-선)}
.슬라이드길 .점들 button.지금{background:var(--게시-강조); width:20px}
@media (max-width:640px){ .배치-슬라이드 .슬라이드{padding:28px 16px 80px} }

/* ---------- 갤러리 : 사진판 먼저, 그 밑에 글 ---------- */
.사진모음{margin:0 0 var(--게시-사이)}
.사진모음 .딱지{font-size:.78rem; letter-spacing:.06em; color:var(--게시-흐린글); font-weight:700; margin-bottom:12px}
.사진판{display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); grid-auto-rows:150px; grid-auto-flow:dense; gap:8px}
.사진판 .한장{position:relative; display:block; overflow:hidden; border-radius:var(--게시-사진모서리); background:var(--게시-종이)}
.사진판 .한장 img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s}
.사진판 .한장:hover img{transform:scale(1.04)}
.사진판 .한장:nth-child(5n+1){grid-column:span 2; grid-row:span 2}
.사진판 .한장 .설명{position:absolute; left:0; right:0; bottom:0; padding:18px 10px 8px; font-size:.75rem; color:#fff;
  background:linear-gradient(transparent, rgba(0,0,0,.6)); opacity:0; transition:opacity .2s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.사진판 .한장:hover .설명{opacity:1}
.배치-갤러리 .판{max-width:min(1100px, 100%)}
.배치-갤러리 .자료들, .배치-갤러리 .제작노트, .배치-갤러리 .목차, .배치-갤러리 .출처{max-width:var(--게시-폭); margin-left:auto; margin-right:auto}
.배치-갤러리 .자료들 .자료{scroll-margin-top:24px}

/* ---------- 잡지 : 두 단, 첫 사진은 크게 ---------- */
.배치-잡지 .판{max-width:min(980px, 100%)}
.배치-잡지 .자료 .몸{columns:2; column-gap:38px; column-rule:var(--게시-테두리)}
.배치-잡지 .자료 .몸 > *{break-inside:avoid}
.배치-잡지 .자료 .몸 > h3, .배치-잡지 .자료 .몸 > h4{break-after:avoid}
.배치-잡지 .자료 .몸 > figure:first-child, .배치-잡지 .자료 .몸 > .갤러리:first-child{column-span:all; margin-top:0}
.배치-잡지 .자료 .몸 > p:first-of-type::first-letter{font-family:var(--게시-제목글꼴); font-size:3.1em; float:left; line-height:.85; padding:.08em .12em 0 0; color:var(--게시-강조)}
.배치-잡지 .자료 h2.제목{font-size:calc(1.9rem * var(--게시-배율))}
.배치-잡지 .자료.사진자료 .몸, .배치-잡지 .자료.파일자료 .몸{columns:1}
@media (max-width:760px){ .배치-잡지 .자료 .몸{columns:1} }

/* ---------- 타임라인 : 왼쪽 세로줄에 날짜 ---------- */
.배치-타임라인 .자료들{position:relative; padding-left:150px}
.배치-타임라인 .자료들::before{content:""; position:absolute; left:118px; top:0; bottom:0; width:2px; background:var(--게시-선)}
.배치-타임라인 .자료{position:relative}
.배치-타임라인 .자료::before{
  content:attr(data-날짜); position:absolute; left:-150px; top:.35em; width:104px; text-align:right;
  font-size:.8rem; color:var(--게시-흐린글); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.배치-타임라인 .자료::after{
  content:""; position:absolute; left:-38px; top:.55em; width:12px; height:12px; border-radius:50%;
  background:var(--게시-강조); border:3px solid var(--게시-바탕); box-shadow:0 0 0 2px var(--게시-선);
}
.배치-타임라인 .자료.강조::after{background:var(--게시-글); width:16px; height:16px; left:-40px}
.배치-타임라인 .자료:not([data-날짜])::before{content:"—"}
.배치-타임라인 .장{padding-left:0}
.배치-타임라인 .장머리{margin-left:-150px}
.배치-타임라인 .자료.강조{margin-left:0; margin-right:0}
@media (max-width:640px){
  .배치-타임라인 .자료들{padding-left:0}
  .배치-타임라인 .자료들::before, .배치-타임라인 .자료::after{display:none}
  .배치-타임라인 .자료::before{position:static; display:block; text-align:left; width:auto; margin-bottom:.3em}
  .배치-타임라인 .장머리{margin-left:0}
}

/* ---------- 허브 배치 : 목록 ---------- */
.배치-목록 .허브격자{grid-template-columns:1fr; gap:10px}
.배치-목록 .게시본칸{flex-direction:row; align-items:center}
.배치-목록 .게시본칸 .그림{width:140px; aspect-ratio:16/10; flex:0 0 auto}
.배치-목록 .게시본칸 .속{padding:10px 16px}
.배치-목록 .게시본칸 .곁{margin-bottom:.3em}

/* ---------- 좁은 화면 ---------- */
@media (max-width:640px){
  body{font-size:calc(16px * var(--게시-배율))}
  .표지 h1{font-size:calc(1.75rem * var(--게시-배율))}
  .자료.강조{margin-left:0; margin-right:0}
  .자료 .머리 .원문{margin-left:0}
}

/* ---------- 인쇄 ---------- */
@media print{
  body{background:#fff; color:#000}
  .목차,.제작노트,.슬라이드길{display:none}
  .자료{break-inside:avoid}
}