/* 기록관 — 연대기 서가(assets/js/archive-hall.js 와 짝). 색·글꼴·곡선은 site.css 의 것을 쓴다.
 * 사진은 원본 색 그대로 — 필터를 걸지 않는다. 테두리·상자 선 없이 옅은 바탕으로만 구분한다. */

html.hall-locked{overflow:hidden;}

/* ---------- 머리 ---------- */
.hall-head{position:relative; z-index:1; max-width:1280px; margin:0 auto; padding:136px 56px 36px;}
.hall-kicker{font-family:var(--batang); font-size:16px; letter-spacing:.06em; color:var(--gold); margin-bottom:18px;}
.hall-title{font-family:var(--batang); font-weight:400; font-size:clamp(28px, 3vw, 40px); line-height:1.45; color:var(--cream); word-break:keep-all; max-width:22em;}
.hall-sub{margin-top:14px; font-size:15px; line-height:1.8; color:rgba(241,232,214,.6); word-break:keep-all; max-width:40em;}

/* ---------- 붙어 따라오는 막대 — 메뉴바 바로 아래. 두 겹이 한 바처럼 이어지게 같은 먹빛 ---------- */
.hall-bar{position:sticky; top:var(--nav-h, 56px); z-index:30; background:rgba(13,11,9,.88); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);}
.hall-bar-in{max-width:1280px; margin:0 auto; padding:0 56px;}
.hall-kinds{display:flex; gap:30px; align-items:center; min-height:52px;}
.hall-kind{display:inline-flex; align-items:baseline; gap:7px; min-height:44px; padding:0; background:none; border:0; cursor:pointer;
  font-family:var(--serif); font-size:16px; letter-spacing:.04em; color:rgba(241,232,214,.62); transition:color .4s var(--ease-soft);}
.hall-kind .n{font-family:var(--sans); font-size:12px; letter-spacing:0; color:rgba(241,232,214,.4); transition:color .4s var(--ease-soft);}
.hall-kind:hover{color:var(--cream);}
.hall-kind[aria-selected="true"]{color:var(--gold);}
.hall-kind[aria-selected="true"] .n{color:rgba(214,178,110,.7);}
.hall-years{display:flex; gap:20px; align-items:center; min-height:40px; overflow-x:auto; scrollbar-width:none; padding-bottom:4px;
  -webkit-mask-image:linear-gradient(to right, #000 92%, transparent); mask-image:linear-gradient(to right, #000 92%, transparent);}
.hall-years::-webkit-scrollbar{display:none;}
.hall-year{flex:none; min-height:36px; padding:0; background:none; border:0; cursor:pointer; white-space:nowrap;
  font-family:var(--sans); font-size:13.5px; letter-spacing:.02em; color:rgba(241,232,214,.46); transition:color .5s var(--ease-soft);}
.hall-year:hover{color:var(--cream);}
.hall-year.on{color:var(--gold);}
.hall-kind:focus-visible, .hall-year:focus-visible{outline:1px solid var(--cream); outline-offset:3px;}

/* ---------- 서가 ---------- */
.hall-body{position:relative; z-index:1; max-width:1280px; margin:0 auto; padding:8px 56px 110px; transition:opacity .26s var(--ease-soft);}
.hall-body.is-switching{opacity:0;}
.hall-wait{padding:80px 0; font-family:var(--batang); font-size:16px; line-height:2; color:rgba(241,232,214,.55);}

.shelf{padding-top:64px; scroll-margin-top:140px;}
.shelf-head{display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 16px; margin-bottom:22px;}
.shelf-year{font-family:var(--batang); font-size:16px; letter-spacing:.04em; color:var(--gold);}
.shelf-title{font-family:var(--serif); font-weight:500; font-size:clamp(21px, 1.9vw, 25px); line-height:1.4; color:var(--cream); word-break:keep-all;}
.shelf-count{font-size:13.5px; color:rgba(241,232,214,.45);}

/* 그림 — 비율대로 줄을 가지런히 채운다. 늘어나는 정도(flex-grow)는 스크립트가, 기준 너비는 비율 × 줄 높이 */
.tiles{--h:268px; display:flex; flex-wrap:wrap; gap:10px;}
.tiles.few{--h:400px;}
.tiles::after{content:""; flex-grow:10000;}          /* 마지막 줄이 한없이 늘어나지 않게 */
.tile{position:relative; flex:1 1 calc(var(--r, 1.33) * var(--h)); min-width:0; padding:0; border:0; cursor:zoom-in; overflow:hidden; clip-path:inset(0);
  background:rgba(241,232,214,.04);}
.tile[hidden]{display:none;}
.tile img{display:block; width:100%; height:auto; aspect-ratio:var(--r, 1.33); object-fit:cover; transition:transform 1.4s var(--ease-soft), opacity .6s;}
.tile:hover img{transform:scale(1.03);}
.tile:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
.shelf-more{display:inline-flex; align-items:baseline; gap:8px; min-height:44px; margin-top:14px; padding:0; background:none; border:0; cursor:pointer;
  font-family:var(--serif); font-size:15px; letter-spacing:.04em; color:rgba(241,232,214,.78); transition:color .4s var(--ease-soft);}
.shelf-more .n{font-family:var(--sans); font-size:12.5px; color:rgba(241,232,214,.45);}
.shelf-more:hover{color:var(--gold);}

/* 글 — 제목과 첫머리 */
.reads{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px;}
.read{display:flex; flex-direction:column; gap:10px; text-align:left; padding:24px 26px; border:0; cursor:pointer;
  background:rgba(241,232,214,.045); color:var(--cream); transition:background .5s var(--ease-soft);}
.read:hover{background:rgba(241,232,214,.08);}
.read-title{font-family:var(--serif); font-weight:500; font-size:18px; line-height:1.5; word-break:keep-all;}
.read-excerpt{font-size:14px; line-height:1.75; color:rgba(241,232,214,.55); word-break:keep-all;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.read-go{margin-top:auto; font-family:var(--batang); font-size:14px; color:var(--gold); opacity:.85;}
.read:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}

/* 음성 */
.tracks{display:flex; flex-direction:column; gap:8px;}
.track{display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:8px 16px; padding:12px 22px 12px 12px; background:rgba(241,232,214,.04);}
.track-play{width:44px; height:44px; display:grid; place-items:center; padding:0; background:none; border:0; cursor:pointer; color:var(--gold);}
.track-play svg{width:22px; height:22px; fill:currentColor;}
.track-play .i-pause{display:none;}
.track.is-playing .track-play .i-play{display:none;}
.track.is-playing .track-play .i-pause{display:inline;}
.track-play:focus-visible{outline:1px solid var(--gold); outline-offset:-4px;}
.track-main{display:flex; flex-direction:column; gap:10px; min-width:0;}
.track-title{font-family:var(--serif); font-size:16.5px; line-height:1.5; color:var(--cream); word-break:keep-all;}
.track-cap{font-size:13.5px; line-height:1.7; color:rgba(241,232,214,.5); word-break:keep-all;}
.track-line{position:relative; height:14px; cursor:pointer;}
.track-line::before{content:""; position:absolute; left:0; right:0; top:6px; height:2px; background:rgba(241,232,214,.14);}
.track-line i{position:absolute; left:0; right:0; top:6px; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .25s linear;}
.track-line:focus-visible{outline:1px solid var(--gold); outline-offset:2px;}
.track-time{font-size:13px; color:rgba(241,232,214,.5); font-variant-numeric:tabular-nums; white-space:nowrap;}

/* 영상 — 16:9 */
.films{display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:22px 14px;}
.film-card{display:flex; flex-direction:column; gap:10px; padding:0; border:0; background:none; text-align:left; color:var(--cream); cursor:pointer;}
div.film-card{cursor:default;}
.film-frame{position:relative; display:block; aspect-ratio:16 / 9; overflow:hidden; clip-path:inset(0); background:rgba(241,232,214,.05);}
.film-frame img{width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease-soft);}
.film-card:hover .film-frame img{transform:scale(1.03);}
.film-play{position:absolute; left:50%; top:50%; width:64px; height:64px; margin:-32px 0 0 -32px; display:grid; place-items:center; border-radius:50%;
  background:rgba(13,11,9,.55); color:var(--cream); transition:background .4s var(--ease-soft), color .4s;}
.film-play svg{width:24px; height:24px; fill:currentColor; margin-left:3px;}
.film-card:hover .film-play{background:rgba(13,11,9,.75); color:var(--gold);}
.film-soon{position:absolute; left:14px; bottom:12px; font-size:12.5px; color:rgba(241,232,214,.7);}
.film-title{font-family:var(--serif); font-size:16px; line-height:1.5; word-break:keep-all;}
.film-len{margin-top:-6px; font-size:13px; color:rgba(241,232,214,.45);}
button.film-card:focus-visible{outline:2px solid var(--gold); outline-offset:4px;}

/* ---------- 겹 공통 — 크게 보기 · 읽기 · 영상 ---------- */
.hv, .hr, .hf{position:fixed; inset:0; z-index:100; background:rgba(9,8,7,.97); color:var(--cream);
  opacity:0; transition:opacity .5s var(--ease-soft);}
.hv.is-on, .hr.is-on, .hf.is-on{opacity:1;}
.hv-x{position:absolute; top:14px; right:18px; z-index:3; display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 14px;
  background:none; border:0; cursor:pointer; font-family:var(--serif); font-size:14.5px; letter-spacing:.06em; color:rgba(241,232,214,.78); transition:color .4s;}
.hv-x svg{width:18px; height:18px;}
.hv-x:hover{color:var(--gold);}

/* 크게 보기 */
.hv-fig{position:absolute; inset:64px 84px 28px; display:flex; flex-direction:column; gap:16px; margin:0;
  transform:scale(.985); transition:transform .7s var(--ease-soft);}
.hv.is-on .hv-fig{transform:none;}
.hv-stage{flex:1; min-height:0; display:flex; align-items:center; justify-content:center;}
.hv-img{max-width:100%; max-height:100%; object-fit:contain; transition:opacity .45s var(--ease-soft);}
.hv-img.is-fading{opacity:0;}
.hv-cap{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:4px 16px; text-align:center; min-height:48px;}
.hv-where{font-family:var(--batang); font-size:15px; color:var(--gold);}
.hv-text{font-size:14.5px; line-height:1.7; color:rgba(241,232,214,.78); word-break:keep-all; max-width:48em;}
.hv-count{font-size:13px; color:rgba(241,232,214,.45); font-variant-numeric:tabular-nums;}
.hv-nav{position:absolute; top:50%; z-index:2; width:64px; height:96px; margin-top:-48px; display:grid; place-items:center; padding:0;
  background:none; border:0; cursor:pointer; color:rgba(241,232,214,.6); transition:color .4s, opacity .4s;}
.hv-nav svg{width:30px; height:30px;}
.hv-nav:hover{color:var(--cream);}
.hv-nav:disabled{opacity:0; pointer-events:none;}
.hv-prev{left:10px;} .hv-next{right:10px;}
.hv-nav:focus-visible, .hv-x:focus-visible{outline:1px solid var(--cream); outline-offset:-4px;}
/* 겹이 열리면 맨 위로 단추는 숨는다(겹 위로 비치지 않게) */
html.hall-locked .totop{opacity:0 !important; pointer-events:none !important;}

/* 읽기 */
.hr{overflow-y:auto; overscroll-behavior:contain;}
.hr-sheet{max-width:720px; margin:0 auto; padding:104px 28px 110px; transform:translateY(14px); transition:transform .8s var(--ease-soft);}
.hr.is-on .hr-sheet{transform:none;}
.hr-where{font-family:var(--batang); font-size:15px; color:var(--gold); margin-bottom:14px;}
.hr-title{font-family:var(--serif); font-weight:500; font-size:clamp(24px, 2.6vw, 32px); line-height:1.45; color:var(--cream); word-break:keep-all; margin-bottom:36px;}
.hr-body{font-family:var(--batang); font-size:18px; line-height:2.15; color:rgba(241,232,214,.88); white-space:pre-wrap; word-break:keep-all;}
.hr-source{margin-top:44px; font-family:var(--sans); white-space:normal;}
.hr-note{font-size:14px; color:rgba(241,232,214,.55);}
.hr-by{margin-top:6px; font-size:14px; color:rgba(241,232,214,.7);}
.hr-link{display:inline-flex; align-items:center; min-height:44px; font-size:14.5px; color:var(--gold); text-decoration:none;}

/* 영상 */
.hf{display:flex; align-items:center; justify-content:center; padding:64px 24px 28px;}
.hf-box{width:min(1100px, 100%); transform:scale(.985); transition:transform .7s var(--ease-soft);}
.hf.is-on .hf-box{transform:none;}
.hf-frame{position:relative; aspect-ratio:16 / 9; background:#000;}
.hf-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.hf-cap{margin-top:14px; text-align:center; font-family:var(--serif); font-size:15.5px; color:rgba(241,232,214,.8);}

@media(max-width:1080px){ .tiles{--h:220px;} .tiles.few{--h:320px;} }
@media(max-width:760px){
  .hall-head{padding:96px 16px 26px;}
  .hall-kicker{font-size:14px; margin-bottom:12px;}
  .hall-title{font-size:25px;}
  .hall-sub{font-size:14.5px;}
  .hall-bar-in{padding:0 16px;}
  .hall-kinds{gap:22px; min-height:48px;}
  .hall-kind{font-size:15.5px;}
  .hall-years{gap:16px;}
  .hall-body{padding:0 16px 80px;}
  .shelf{padding-top:48px;}
  .shelf-head{margin-bottom:16px;}
  .tiles{--h:150px; gap:6px;}
  .tiles.few{--h:230px;}
  .reads{grid-template-columns:1fr;}
  .read{padding:20px;}
  .films{grid-template-columns:1fr;}
  .hv-fig{inset:60px 8px 70px;}
  .hv-nav{top:auto; bottom:10px; margin-top:0; width:56px; height:56px;}
  .hv-prev{left:6px;} .hv-next{right:6px;}
  .hv-cap{padding:0 56px;}
  .hr-sheet{padding:88px 20px 90px;}
  .hr-body{font-size:17px; line-height:2.05;}
}
@media(prefers-reduced-motion:reduce){
  .hv, .hr, .hf, .hv-fig, .hr-sheet, .hf-box, .hv-img, .tile img, .hall-body{transition:none;}
}