/* memo.html 의 서재 메뉴(memo-space.js), 문서 속 사진(memo-render.js 의 figure),
   그리고 johny 서재(개인 일대기)의 자서전 모양. 색은 styles.css·ui-kit.css 토큰만 쓴다. */

/* ── 머리의 메뉴 버튼 ───────────────────────────────────────────────── */
.memo-spaces{ position:relative; }
.memo-space-btn{
  font:inherit; font-size:13px; padding:6px 12px; cursor:pointer;
  background:var(--bg); color:var(--ink); border:1px solid var(--line-strong);
}
.memo-spaces[hidden]{ display:none; }
.memo-space-btn:hover, .memo-space-btn[aria-expanded="true"]{ border-color:var(--mint-dim); color:var(--mint); }
.memo-space-menu{
  position:absolute; top:calc(100% + 6px); left:0; z-index:20;
  min-width:min(250px, calc(100vw - 28px)); max-width:calc(100vw - 28px);
  list-style:none; padding:6px; background:var(--bg-raised); border:1px solid var(--line-strong);
  box-shadow:0 10px 30px rgba(0,0,0,0.25);
}
.memo-space-menu[hidden]{ display:none; }
.memo-space-menu a{ display:block; padding:8px 10px; color:var(--ink-dim); border-left:2px solid transparent; }
.memo-space-menu a:hover{ color:var(--ink); background:var(--bg); }
.memo-space-menu a[aria-current="true"]{ border-left-color:var(--mint); color:var(--ink); }
.memo-space-menu strong{ display:block; font-size:14px; font-weight:600; }
.memo-space-menu a[aria-current="true"] strong{ color:var(--mint); }
.memo-space-menu small{ display:block; font-size:12px; color:var(--ink-faint); }

/* ── 문서 속 사진 ───────────────────────────────────────────────────── */
.memo-doc img{ max-width:100%; height:auto; }
.memo-doc .memo-figure{ margin:1.2em 0 1.6em; }
.memo-doc .memo-figure img{
  display:block; max-height:520px; width:auto; margin:0 auto;
  border:1px solid var(--line); background:var(--bg-raised);
}
.memo-doc .memo-figure figcaption{
  margin-top:8px; text-align:center; font-size:13px; line-height:1.6; color:var(--ink-faint);
}
.memo-doc img[data-memo-asset]{ opacity:0; transition:opacity .6s ease; }
.memo-doc img.memo-img-ready, .memo-doc img.memo-img-missing{ opacity:1; }
.memo-doc img.memo-img-missing{ min-width:160px; min-height:90px; }

/* ── johny 서재: 연도별 자서전 ──────────────────────────────────────── */
[data-memo-space="johny"] .memo-brand{ color:var(--warm); }
[data-memo-space="johny"] .memo-doc{ font-family:var(--serif); font-size:15.5px; line-height:1.95; }
[data-memo-space="johny"] .memo-doc h1{ font-size:30px; font-weight:700; }
[data-memo-space="johny"] .memo-doc h2{
  position:relative; margin:0 0 0 22px; padding:1.4em 0 .5em 18px; border-bottom:none;
  border-left:1px solid var(--line-strong); color:var(--warm); font-size:22px;
}
[data-memo-space="johny"] .memo-doc h2::before{
  content:''; position:absolute; left:-7px; top:calc(1.4em + 0.55em); width:12px; height:12px;
  border-radius:50%; background:var(--mint); box-shadow:0 0 0 4px var(--bg);
}
/* 연도(h2) 아래 내용은 세로 줄 하나에 매달린다 — 타임라인. 줄이 끊기지 않게 바깥 여백
   대신 안쪽 여백으로 띄운다. */
[data-memo-space="johny"] .memo-doc h2 ~ :where(:not(h2):not(hr)){
  margin:0 0 0 22px; padding:0 0 1em 18px; border-left:1px solid var(--line-strong);
}
[data-memo-space="johny"] .memo-doc h2 ~ ul, [data-memo-space="johny"] .memo-doc h2 ~ ol{ padding-left:calc(18px + 1.4em); }
[data-memo-space="johny"] .memo-doc h2 ~ h3{ padding-top:.6em; }
[data-memo-space="johny"] .memo-doc h2 ~ .memo-figure{ padding-top:.3em; padding-bottom:1.4em; }
[data-memo-space="johny"] .memo-doc blockquote{ font-style:italic; }

/* ── johny 서재의 움직임(memo-reveal.js) — 스크롤하면 연도와 사진이 살며시 떠오른다 ── */
[data-memo-space="johny"] .memo-doc .memo-reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s ease, transform .7s var(--motion-ease);
}
[data-memo-space="johny"] .memo-doc .memo-reveal.memo-shown{ opacity:1; transform:none; }
[data-memo-space="johny"] .memo-doc h2.memo-reveal::before{ transform:scale(0); transition:transform .5s .25s cubic-bezier(.3,1.6,.5,1); }
[data-memo-space="johny"] .memo-doc h2.memo-shown::before{ transform:scale(1); }

@media (prefers-reduced-motion: reduce){
  .memo-doc img[data-memo-asset]{ transition:none; }
  [data-memo-space="johny"] .memo-doc .memo-reveal,
  [data-memo-space="johny"] .memo-doc h2.memo-reveal::before{ opacity:1; transform:none; transition:none; }
}