/* 추모관 공통 — 첫 화면(「빛 속의 초상」)의 결을 모든 페이지가 함께 입는다.
 *
 * 여기 있는 것: 색·글꼴 · 메뉴바 · 빛망울과 먼지 · 커서가 지나간 자리의 색 · 부드러운 등장 · 꼬리말 · 맨 위로.
 * 여기 없는 것: 페이지마다 다른 모양(슬라이드·연표·기록 목록 …)은 그 페이지에.
 * 이 파일의 값을 바꾸면 전 페이지가 함께 바뀐다.
 *
 * 움직임은 한 가지 곡선(--ease-soft)으로 — 빨리 시작해 오래 내려앉는다. 느리고 부드럽게.
 */
:root{
  --night:#0D0B09;
  --gold:#D6B26E;
  --cream:#F1E8D6;
  --serif:"Noto Serif KR", serif;
  --batang:"Gowun Batang", serif;
  --sans:"Noto Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Malgun Gothic", sans-serif;
  --ease-soft:cubic-bezier(.22,.61,.36,1);
}
/* 휴대폰 브라우저가 누른 링크 칸 전체에 칠하는 반투명 파란 네모를 끈다(물려받는 속성이라 여기 한 번이면 전 페이지) */
html{-webkit-tap-highlight-color:transparent;}

/* ---------- 메뉴바 ----------
   맨 위에서는 투명(옅은 그늘만), 조금 내려가면 어두운 바. 밝은 바탕 페이지는 data-solid 로 처음부터 바.
   지금 있는 곳의 메뉴는 금색(스크립트가 aria-current 를 단다). 휴대폰은 ⋮ 를 누르면 어두운 판이 내려온다. */
.snav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 32px;
  transition:background .6s var(--ease-soft);
}
.snav::before{
  content:""; position:absolute; top:0; left:0; right:0; height:132px; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(13,11,9,.5), rgba(13,11,9,.16) 55%, transparent);
  transition:opacity .6s ease;
}
.snav.solid{background:rgba(13,11,9,.88); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);}
/* 메뉴바가 본문을 덮지 않게 자리를 비워 두는 칸(처음부터 바가 깔리는 밝은 페이지용) */
.snav-space{height:62px;}
@media(max-width:760px){ .snav-space{height:56px;} }
.snav.solid::before{opacity:0;}
.snav .brand{
  font-family:var(--serif); font-weight:500; letter-spacing:2px; font-size:17.2px; line-height:1.4;
  color:#fff; text-decoration:none; white-space:nowrap;
  text-shadow:0 1px 12px rgba(0,0,0,.5); transition:color .6s, text-shadow .6s;
}
.snav.solid .brand{color:var(--cream); text-shadow:none;}
.snav .links{display:flex; gap:26px; font-family:var(--serif); font-size:15.5px; letter-spacing:1.5px; line-height:1.4;}
.snav .links a{color:rgba(255,255,255,.9); text-decoration:none; text-shadow:0 1px 10px rgba(0,0,0,.5); transition:color .5s var(--ease-soft), opacity .3s;}
.snav.solid .links a{color:rgba(241,232,214,.84); text-shadow:none;}
.snav .links a:hover{opacity:.6;}
.snav .links a[aria-current="page"]{color:var(--gold);}
.snav .links a[aria-current="page"]:hover{opacity:1;}

/* 휴대폰 메뉴 단추 — 점 셋은 CSS 로 그린다(글꼴마다 모양이 달라서). 누르는 칸은 44px */
.snav-toggle{
  display:none; width:44px; height:44px; margin-right:-12px; padding:0;
  background:none; border:0; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.snav-toggle span{display:block; width:4px; height:4px; border-radius:50%; background:#fff; box-shadow:0 1px 6px rgba(0,0,0,.5); transition:background .6s, box-shadow .6s;}
.snav.solid .snav-toggle span{background:var(--cream); box-shadow:none;}
.snav-toggle:focus-visible{outline:1px solid var(--cream); outline-offset:-4px;}

@media(max-width:760px){
  .snav{padding:6px 20px;}
  .snav-toggle{display:flex;}
  .snav .links{
    position:absolute; top:calc(100% - 2px); right:12px;
    flex-direction:column; gap:0; align-items:stretch; min-width:168px; padding:6px 0;
    background:rgba(22,19,15,.96); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    border-radius:4px; box-shadow:0 18px 40px rgba(0,0,0,.45);
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .35s var(--ease-soft), transform .35s var(--ease-soft), visibility .35s;
  }
  .snav.menu-open .links{opacity:1; visibility:visible; transform:none;}
  .snav .links a, .snav.solid .links a{padding:12px 20px; font-size:16.1px; letter-spacing:1px; color:rgba(241,232,214,.86); text-shadow:none;}
  .snav .links a:hover{opacity:1; background:rgba(241,232,214,.06);}
  .snav .links a[aria-current="page"]{color:var(--gold);}
}

/* ---------- 나가기 ----------
   메뉴바 없이 설계된 몰입 화면(전시로 걷기 · 스크롤 연표) 왼쪽 위의 단 하나. 전시관 입구로 돌아간다.
   글자와 가는 화살표만 — 밝은 바탕 위로 내려가면(solid) 옅은 먹빛을 한 겹 깐다. data-float 면 끝까지 글자만 */
.sexit{
  position:fixed; top:14px; left:18px; z-index:50;
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px 0 12px; border-radius:22px;
  font-family:var(--serif); font-size:14.5px; letter-spacing:1.5px; line-height:1;
  color:rgba(241,232,214,.86); text-decoration:none; text-shadow:0 1px 10px rgba(0,0,0,.55);
  transition:color .4s var(--ease-soft), background .6s var(--ease-soft);
}
.sexit svg{width:16px; height:16px; flex:none; transition:transform .5s var(--ease-soft);}
.sexit:hover{color:var(--gold);}
.sexit:hover svg{transform:translateX(-3px);}
.sexit:focus-visible{outline:1px solid var(--cream); outline-offset:2px;}
.sexit.solid{background:rgba(13,11,9,.72); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); text-shadow:none;}
@media(max-width:760px){ .sexit{top:8px; left:8px;} }

/* ---------- 빛망울과 먼지 ----------
   화면 뒤에 고정으로 한 겹. 첫 화면보다 옅게 — 글을 읽는 페이지라서.
   <div class="ambient"><i style="--x --y --s --a --d --tx --ty --dl"></i>… <canvas></canvas></div> */
.ambient{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
.ambient i, .bokeh-i{
  position:absolute; left:var(--x); top:var(--y); width:var(--s); height:var(--s);
  margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius:50%;
  background:radial-gradient(circle, rgba(246,214,146,var(--a, .5)) 0%, rgba(226,184,108,calc(var(--a, .5) * .75)) 46%, rgba(214,170,96,calc(var(--a, .5) * .22)) 64%, rgba(214,170,96,0) 71%);
  animation:bokeh var(--d, 30s) ease-in-out infinite alternate; animation-delay:var(--dl, 0s);
}
.ambient canvas{position:absolute; inset:0; width:100%; height:100%;}
@keyframes bokeh{
  0%{transform:translate3d(0,0,0) scale(1); opacity:.75;}
  50%{opacity:1;}
  100%{transform:translate3d(var(--tx, 40px), var(--ty, -30px), 0) scale(1.08); opacity:.6;}
}
@media(prefers-reduced-motion:reduce){ .ambient i, .bokeh-i{animation:none;} }

/* ---------- 커서가 지나간 자리의 색 ----------
   흑백으로 눌러 둔 사진 위에 같은 사진 한 겹(.tint)을 얹고, 지나간 자리만 보이게 한다(모양은 스크립트가 그린다).
   색을 입히는 게 아니라 필터를 그 자리만 걷는 것. 원본의 색 그대로. */
.tint-host > .tint{position:absolute; inset:0; pointer-events:none; opacity:0;}
.tint-host.lit > .tint{opacity:1;}

/* ---------- 부드러운 등장 ----------
   data-rise 가 붙은 것은 화면에 들어올 때 천천히 떠오른다. --rise-delay 로 차례를 준다.
   숨기는 것은 스크립트가 준비됐을 때만(rise-ready) — 스크립트가 없거나 실패해도 글은 보인다. */
.rise-ready [data-rise]:not(.risen){opacity:0; transform:translateY(22px);}
.rise-ready [data-rise]{transition:opacity 1.3s var(--ease-soft), transform 1.5s var(--ease-soft); transition-delay:var(--rise-delay, 0s);}
@media(prefers-reduced-motion:reduce){
  .rise-ready [data-rise]:not(.risen){opacity:1; transform:none;}
  .rise-ready [data-rise]{transition:none;}
}

/* ---------- 꼬리말 ----------
   한 줄 + 링크 셋(상자 없이) + 앱 설치. 왼쪽 정렬, 본문 칸의 왼쪽 선에 맞춘다. */
.sfoot{position:relative; z-index:1; padding:24px 0 64px; text-align:left; background:var(--night); color:rgba(255,255,255,.72); font-family:var(--sans); line-height:1.9;}
.sfoot-in{max-width:1280px; margin:0 auto; padding:0 56px;}
@media(max-width:760px){ .sfoot-in{padding:0 16px;} }
.sfoot .colophon{font-size:14px; color:rgba(255,255,255,.6); letter-spacing:.02em; margin-top:8px;}
.sfoot .foot-links{margin-top:10px; display:flex; column-gap:24px; justify-content:flex-start; align-items:center; flex-wrap:wrap;}
.sfoot .foot-links a{display:inline-flex; align-items:center; min-height:44px; font-size:13.5px; letter-spacing:.04em; color:rgba(255,255,255,.55); text-decoration:none; transition:color .3s;}
.sfoot .foot-links a:hover{color:#fff;}
.sfoot a.made-by{gap:7px; font-size:13px; letter-spacing:0;}
.sfoot a.made-by svg{width:16px; height:16px; flex:none;}
.sfoot a.made-by b{font-weight:700; color:rgba(255,255,255,.72); transition:color .3s;}
.sfoot a.made-by span{font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;}
.sfoot a.made-by:hover{color:rgba(255,255,255,.8);}
.sfoot a.made-by:hover b{color:var(--gold);}
.sfoot .app-install{margin:0; display:inline-flex; align-items:center; min-height:44px; font-family:var(--sans);
  font-size:13.5px; letter-spacing:.04em; color:rgba(255,255,255,.55);
  background:none; border:0; padding:0; cursor:pointer; transition:color .3s;}
.sfoot .app-install:hover{color:#fff;}
.sfoot .app-install:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}
.sfoot .app-install[hidden]{display:none;}

/* ---------- 맨 위로(top.js) — 공용 top.css 는 밝은 종이색이라 검은 바탕에서 혼자 튄다 ---------- */
body .totop{background:rgba(13,11,9,.78); border-color:rgba(214,178,110,.55); color:var(--cream); box-shadow:none;}
body .totop:hover{background:rgba(214,178,110,.16); border-color:var(--gold); color:var(--cream);}
@media(max-width:760px){ body .totop{width:44px; height:44px;} }