/* 기록 — 방문자 화면 스타일.
*
* 팝업(index.html)과 정식 페이지(archive.html)가 같은 화면을 그린다.
* 두 곳에 같은 규칙을 복사해 두었더니 한쪽만 고쳐 놓고 잊는 일이 생겼다.
* 한 파일로 두고 둘 다 여기를 읽는다.
*
* 화면은 두 겹이다.
* 색인 종류 탭 · 시기 칩 · 묶음 카드 격자 — 무엇이 있는지 한 화면에서 본다
* 상세 고른 묶음 하나 — 그 안만 본다
* 전에는 공개된 모든 항목이 한 줄기로 이어져 있었다. 사진 145점이 열리면
* 끝까지 내리는 데만 한참이 걸려, 보고 싶은 시기에 닿기 전에 지친다.
*/
.arc-wait, .arc-empty{
text-align:center; padding:60px 20px; color:var(--ink-faint);
font-family:var(--batang); font-size:15px; line-height:2;
}
/* ── 색인 ───────────────────────────────────────────────── */
.arc-kinds{
display:flex; gap:2px; flex-wrap:wrap;
border-bottom:1px solid var(--line-soft); margin-bottom:14px;
}
.arc-kind{
font-family:var(--serif); font-size:14px; letter-spacing:3px; cursor:pointer;
background:none; border:none; border-bottom:2px solid transparent;
padding:9px 16px 10px; color:var(--ink-faint); transition:color .25s, border-color .25s;
}
.arc-kind:hover{color:var(--ink-mute);}
.arc-kind.on{color:var(--ink); border-bottom-color:var(--ink);}
.arc-kind .n{
display:inline-block; margin-left:7px; font-family:var(--sans);
font-size:10.5px; letter-spacing:0; color:var(--ink-ghost);
}
.arc-kind.on .n{color:var(--ink-faint);}
.arc-eras{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:20px;}
.arc-era{
font-family:var(--sans); font-size:11.5px; letter-spacing:.5px; cursor:pointer;
background:var(--paper); border:1px solid var(--line-soft); border-radius:100px;
padding:5px 13px; color:var(--ink-faint); transition:all .25s; white-space:nowrap;
}
.arc-era:hover{border-color:var(--line); color:var(--ink-mute);}
.arc-era.on{background:var(--ink); border-color:var(--ink); color:var(--paper);}
.arc-era em{font-style:normal; opacity:.62; margin-left:5px; font-size:10.5px;}
.arc-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px;}
/* 묶음 카드 — 대표 한 장과 이름, 몇 점인지. 누르면 그 안으로 들어간다 */
.arc-card{
display:flex; flex-direction:column; text-align:left; padding:0; cursor:pointer;
background:var(--paper-warm); border:1px solid var(--line-soft); border-radius:2px;
overflow:hidden; transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.arc-card:hover{
transform:translateY(-3px); border-color:var(--thread, var(--line));
box-shadow:0 8px 22px rgba(42,37,32,.09);
}
.arc-card[data-thread="root"]{--thread:var(--root);}
.arc-card[data-thread="labor"]{--thread:var(--labor);}
.arc-card[data-thread="resist"]{--thread:var(--resist);}
.arc-card[data-thread="pastor"]{--thread:var(--pastor);}
.arc-card[data-thread="home"]{--thread:var(--home);}
.arc-card .shot{position:relative; display:block; width:100%; aspect-ratio:4/3; overflow:hidden; background:var(--line-soft);}
.arc-card .shot img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease;}
.arc-card:hover .shot img{transform:scale(1.045);}
/* 문서·음성에는 대표 사진이 없다. 빈 회색 칸을 두는 대신 글자로 채운다 —
무엇이 들어 있는지는 어차피 제목이 말해 준다. */
.arc-card .mark{
display:flex; align-items:center; justify-content:center;
width:100%; aspect-ratio:4/3; background:var(--paper);
border-bottom:1px solid var(--line-soft);
font-family:var(--serif); font-size:22px; letter-spacing:4px; color:var(--line);
}
.arc-card .txt{padding:11px 13px 13px; border-top:1px solid var(--line-soft);}
.arc-card .shot + .txt{border-top:none;}
.arc-card .yr{
display:block; font-family:var(--serif); font-size:11px; letter-spacing:2px;
color:var(--thread, var(--ink-ghost)); margin-bottom:4px;
}
.arc-card .nm{
display:block; font-family:var(--serif); font-weight:500; font-size:13.5px;
line-height:1.55; color:var(--ink); word-break:keep-all;
}
.arc-card .ct{display:block; font-size:11px; color:var(--ink-ghost); margin-top:5px; letter-spacing:.5px;}
/* ── 상세 ───────────────────────────────────────────────── */
.arc-back{
font-family:var(--sans); font-size:12px; letter-spacing:1.5px; cursor:pointer;
background:none; border:none; padding:0 0 4px; color:var(--ink-faint);
transition:color .25s; margin-bottom:14px;
}
.arc-back:hover{color:var(--ink);}
.arc-detail > header{
display:flex; align-items:baseline; gap:11px; flex-wrap:wrap;
padding-bottom:13px; margin-bottom:18px; border-bottom:1px solid var(--line-soft);
}
.arc-detail[data-thread="root"]{--thread:var(--root);}
.arc-detail[data-thread="labor"]{--thread:var(--labor);}
.arc-detail[data-thread="resist"]{--thread:var(--resist);}
.arc-detail[data-thread="pastor"]{--thread:var(--pastor);}
.arc-detail[data-thread="home"]{--thread:var(--home);}
.arc-year{font-family:var(--serif); font-size:12px; letter-spacing:2px; color:var(--ink-ghost);}
.arc-detail h3{font-family:var(--serif); font-weight:500; font-size:17px; color:var(--ink); letter-spacing:.5px;}
.arc-thread{font-size:11px; letter-spacing:1.5px; color:var(--thread, var(--ink-faint));}
.arc-count{font-size:11px; color:var(--ink-ghost); letter-spacing:.5px; margin-left:auto;}
.arc-shots{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px;}
.arc-shot{
padding:0; border:1px solid var(--line-soft); border-radius:2px; overflow:hidden;
background:var(--paper-warm); cursor:pointer; transition:transform .3s ease, border-color .3s ease;
}
.arc-shot:hover{transform:translateY(-2px); border-color:var(--thread, var(--line));}
.arc-shot img{width:100%; aspect-ratio:1; object-fit:cover; display:block;}
/* 기록 속 글 — 설교 원고·양심선언문처럼 읽는 자료 */
.arc-doc{
display:block; width:100%; text-align:left; cursor:pointer; margin-bottom:8px;
background:var(--paper-warm); border:1px solid var(--line-soft); border-radius:2px;
padding:13px 15px; font-family:var(--sans); transition:border-color .3s, transform .3s;
}
.arc-doc:hover{border-color:var(--thread, var(--line)); transform:translateY(-1px);}
.arc-doc b{display:block; font-family:var(--serif); font-weight:500; font-size:14.5px; color:var(--ink); margin-bottom:5px;}
.arc-doc span{
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
font-size:12px; line-height:1.7; color:var(--ink-faint);
}
/* ── 음성 ───────────────────────────────────────────────── */
/* 1980년 창후리교회 첫 설교의 육성이다. 재생기를 누르면 바로 들린다.
preload="none" — 목록에 다섯 개가 놓여도 열자마자 내려받지는 않는다. */
.arc-track{
background:var(--paper-warm); border:1px solid var(--line-soft); border-radius:2px;
padding:13px 15px 14px; margin-bottom:9px;
}
.arc-track b{
display:block; font-family:var(--serif); font-weight:500; font-size:14px;
color:var(--ink); line-height:1.6; word-break:keep-all;
}
.arc-track .len{display:block; font-size:11px; color:var(--ink-ghost); letter-spacing:.5px; margin:3px 0 9px;}
.arc-track audio{width:100%; height:34px; display:block;}
.arc-track p{font-size:12px; line-height:1.8; color:var(--ink-faint); margin-top:8px;}
/* ── 영상 ───────────────────────────────────────────────── */
/* 유튜브에 올린 영상만 재생기가 붙는다. 아직 안 올린 것은 대표 화면과
«준비 중»만 보인다 — 눌러도 아무 일이 없는 버튼보다 낫다. */
.arc-films{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px;}
.arc-film{background:var(--paper-warm); border:1px solid var(--line-soft); border-radius:2px; overflow:hidden;}
.arc-film .frame{position:relative; width:100%; aspect-ratio:16/9; background:#1a1613; overflow:hidden;}
.arc-film .frame img{width:100%; height:100%; object-fit:cover; display:block;}
.arc-film iframe{width:100%; height:100%; border:0; display:block;}
.arc-film .play{
position:absolute; inset:0; width:100%; cursor:pointer; border:none;
background:rgba(24,20,16,.28); transition:background .3s;
display:flex; align-items:center; justify-content:center;
}
.arc-film .play:hover{background:rgba(24,20,16,.12);}
.arc-film .play span{
width:54px; height:54px; border-radius:50%; background:rgba(251,248,242,.92);
display:flex; align-items:center; justify-content:center;
font-size:17px; color:var(--ink); padding-left:4px; transition:transform .3s;
}
.arc-film .play:hover span{transform:scale(1.09);}
.arc-film .soon{
position:absolute; left:0; right:0; bottom:0; padding:7px 11px;
background:rgba(24,20,16,.62); color:rgba(255,255,255,.78);
font-size:11px; letter-spacing:1.5px;
}
.arc-film .txt{padding:11px 14px 13px;}
.arc-film .txt b{display:block; font-family:var(--serif); font-weight:500; font-size:13.5px; color:var(--ink); line-height:1.6; word-break:keep-all;}
.arc-film .txt .len{display:block; font-size:11px; color:var(--ink-ghost); margin-top:4px; letter-spacing:.5px;}
@media(max-width:760px){
.arc-kind{font-size:13px; letter-spacing:2px; padding:8px 12px 9px;}
/* 320px 짜리 좁은 기기에서도 두 칸이 들어가게. 136px 이면 두 칸이 3px 모자라
한 줄에 하나씩 늘어섰다. */
.arc-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px;}
.arc-shots{grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px;}
.arc-films{grid-template-columns:1fr;}
.arc-count{margin-left:0; width:100%;}
}
/* ── 글 읽기 ────────────────────────────────────────────── */
.rd{
position:fixed; inset:0; z-index:210; display:flex; align-items:center; justify-content:center;
background:rgba(24,20,16,.55); padding:40px 20px; opacity:0; transition:opacity .3s ease;
}
.rd.is-on{opacity:1;}
.rd-sheet{
background:var(--paper); border-radius:3px; width:min(720px,100%);
max-height:calc(100vh - 80px); max-height:calc(100dvh - 80px);
display:flex; flex-direction:column; box-shadow:0 18px 60px rgba(42,37,32,.3);
}
.rd-sheet header{
display:flex; justify-content:space-between; align-items:center; gap:14px;
padding:17px 22px; border-bottom:1px solid var(--line-soft); flex:0 0 auto;
}
.rd-sheet h3{font-family:var(--serif); font-weight:500; font-size:16.5px; letter-spacing:1px;}
.rd-x{
font-family:var(--sans); font-size:12.5px; letter-spacing:2px; cursor:pointer;
background:none; border:1px solid var(--line); color:var(--ink-mute);
border-radius:2px; padding:7px 16px; transition:all .25s;
}
.rd-x:hover{background:var(--ink); border-color:var(--ink); color:var(--paper);}
.rd-body{
overflow-y:auto; padding:26px 26px 34px;
font-family:var(--batang); font-size:15px; line-height:2.1; color:var(--ink-soft);
white-space:pre-wrap; word-break:keep-all;
}
@media(max-width:760px){
.rd{padding:18px 12px;}
.rd-sheet{max-height:calc(100dvh - 36px);}
.rd-body{padding:20px 18px 28px; font-size:14.5px;}
}
/* 외부 글의 발췌 아래 붙는 출처·원문 링크 */
.rd-source{
margin-top:30px; padding-top:20px; border-top:1px solid var(--line-soft);
font-family:var(--sans); white-space:normal;
}
.rd-note{font-size:12.5px; color:var(--ink-faint); letter-spacing:.3px; margin-bottom:10px;}
.rd-by{font-family:var(--serif); font-size:13.5px; color:var(--ink-mute); margin-bottom:14px;}
.rd-link{
display:inline-block; font-size:13px; letter-spacing:1px; color:var(--copper);
border-bottom:1px solid var(--copper); padding-bottom:2px; transition:opacity .25s;
}
.rd-link:hover{opacity:.65;}
/* ── 영상 크게 보기 ─────────────────────────────────────── */
.vlb{
position:fixed; inset:0; z-index:220;
display:flex; flex-direction:column; align-items:center; justify-content:center;
background:rgba(18,15,12,.93); padding:52px 20px 40px;
opacity:0; transition:opacity .3s ease;
}
.vlb.is-on{opacity:1;}
.vlb-box{width:min(1040px,100%);}
.vlb-frame{
position:relative; width:100%; aspect-ratio:16/9; background:#000;
border-radius:3px; overflow:hidden; box-shadow:0 24px 70px rgba(0,0,0,.55);
}
.vlb-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block;}
.vlb-cap{margin-top:15px; text-align:center; color:rgba(255,255,255,.82); font-size:13px; letter-spacing:.3px;}
.vlb-x{
position:absolute; top:18px; right:20px; font-family:var(--sans); font-size:12.5px; letter-spacing:2px;
background:none; border:1px solid rgba(255,255,255,.4); color:rgba(255,255,255,.9);
border-radius:2px; padding:7px 16px; cursor:pointer; transition:all .25s;
}
.vlb-x:hover{background:rgba(255,255,255,.14);}
@media(max-width:760px){ .vlb{padding:46px 12px 30px;} }
/* ── 크게 보기 ──────────────────────────────────────────── */
.lb{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
background:rgba(24,20,16,.9); opacity:0; transition:opacity .3s ease; padding:60px 68px;}
.lb.is-on{opacity:1;}
.lb figure{max-width:100%; max-height:100%; display:flex; flex-direction:column; align-items:center; gap:14px;}
.lb img{max-width:100%; max-height:calc(100vh - 150px); object-fit:contain; display:block; transition:transform .25s ease;}
/* 방향을 90·270° 돌린 문서는 가로·세로가 바뀌므로 화면에 맞게 한도를 바꾼다 */
.lb img[data-rot="90"], .lb img[data-rot="270"]{max-width:calc(100vh - 160px); max-height:94vw;}
.lb figcaption{font-size:12.5px; letter-spacing:.5px; color:rgba(255,255,255,.72); text-align:center;}
.lb-desc{display:block; margin-top:5px; font-size:.9em; letter-spacing:0; color:rgba(255,255,255,.6);}
.lb-x{position:absolute; top:18px; right:20px; font-family:var(--sans); font-size:12.5px; letter-spacing:2px;
background:none; border:1px solid rgba(255,255,255,.4); color:rgba(255,255,255,.9);
border-radius:2px; padding:7px 16px; cursor:pointer; transition:all .25s;}
.lb-x:hover{background:rgba(255,255,255,.14);}
.lb-nav{position:absolute; top:50%; transform:translateY(-50%); width:44px; height:64px;
font-size:30px; line-height:1; cursor:pointer; background:none; border:none;
color:rgba(255,255,255,.7); transition:color .25s;}
.lb-nav:hover{color:#fff;}
.lb-nav:disabled{opacity:.18; cursor:default;}
.lb-prev{left:8px;} .lb-next{right:8px;}
@media(max-width:760px){
.lb{padding:56px 12px 40px;}
.lb-nav{width:38px; height:56px; font-size:26px;}
}