/* ════════════════════════════════════════════════════════════════════════════
   百日 — 영상이 앞, 사진은 뒤에 툭 던져놓은 듯.
   따뜻한 종이빛 위, 흰 테두리 인화사진들.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  --paper:   #F6F3EC;
  --paper-2: #FBFAF5;
  --print:   #FAF8F2;     /* 인화사진 흰 테두리 (따뜻한 화이트) */
  --ink:     #23211C;
  --muted:   #6A665C;
  --line:    #D8D2C4;
  --seal:    #9E3B2E;

  --s1: 4px;  --s2: 8px;  --s3: 16px; --s4: 24px;
  --s5: 40px; --s6: 64px; --s7: 104px; --s8: 168px;

  --margin: 26px;
  --ease: cubic-bezier(.22, .61, .36, 1);

  --font-num:  'Fraunces', 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --font-ko:   'Nanum Myeongjo', 'Noto Serif KR', 'Apple SD Gothic Neo', serif;
  --font-ja:   'Shippori Mincho', 'Noto Serif JP', 'Hiragino Mincho ProN', serif;
  --font-body: 'EB Garamond', 'Nanum Myeongjo', 'Shippori Mincho', 'Apple SD Gothic Neo', 'Hiragino Mincho ProN', Georgia, serif;
  --font-label:'Cormorant Garamond', 'Fraunces', Georgia, serif;
}
@supports (color: color(display-p3 1 1 1)) {
  :root { --seal: color(display-p3 0.62 0.23 0.18); }
}

/* ── 리셋 / 기본 ─────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
  font-feature-settings: 'liga' 1, 'lnum' 1;
  position: relative;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(180deg, #FBFAF5 0%, #F6F3EC 42%, #F3EFE6 100%);
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .20; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
img, video, svg { display: block; max-width: 100%; }
.book { position: relative; z-index: 1; }

/* ── 공통 라벨 ───────────────────────────────────────────────────────────── */
.placard {
  margin: 0;
  font-family: var(--font-label); font-weight: 500;
  font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var(--muted);
}
.section {
  padding-left: calc(var(--margin) + env(safe-area-inset-left, 0px));
  padding-right: calc(var(--margin) + env(safe-area-inset-right, 0px));
}
.section-head { margin-bottom: var(--s6); }

/* ════════════════════════════════════════════════════════════════════════
   인화사진 (흰 테두리)  — 여는 화면 뒤편 & 갤러리 공통
   ════════════════════════════════════════════════════════════════════════ */
.print {
  background: var(--print);
  padding: 7px 7px 13px;                 /* 아래쪽이 살짝 두꺼운 인화지 느낌 */
  box-shadow: 0 1px 2px rgba(35, 33, 28, .10), 0 20px 34px -22px rgba(35, 33, 28, .5);
  transform: rotate(var(--rot, 0deg));
  cursor: pointer;
}
.print .pic {
  position: relative; display: block; overflow: hidden; background: #e7e3d9; line-height: 0;
}
.print .pic img { width: 100%; height: auto; }

/* 갤러리 영상 인화사진의 재생 표시 */
.g-play { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.g-play-ring {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(250, 248, 242, .92); background: rgba(35, 33, 28, .26);
  display: grid; place-items: center;
}
.g-play-tri {
  width: 0; height: 0; margin-left: 2px;
  border-left: 9px solid var(--print);
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}

/* ════════════════════════════════════════════════════════════════════════
   여는 화면 — 영상 앞, 사진은 뒤에 흩뿌려
   ════════════════════════════════════════════════════════════════════════ */
.opening {
  position: relative; overflow: hidden;
  height: 100svh;                          /* 딱 한 화면 — 스크롤 없음 */
  display: flex; flex-direction: column;
  padding-top: max(calc(env(safe-area-inset-top) + 24px), var(--s5));
  /* 도장이 차지하던 아래 여백을 되살려 영상·사진을 원래 높이로 */
  padding-bottom: max(calc(env(safe-area-inset-bottom) + 80px), 88px);
  padding-left: calc(var(--margin) + env(safe-area-inset-left, 0px));
  padding-right: calc(var(--margin) + env(safe-area-inset-right, 0px));
}
.op-seal { align-self: center; position: relative; z-index: 5; line-height: 0; margin-top: var(--s3); }

.op-mark {
  text-align: center; position: relative; z-index: 5;
  padding: 0 var(--s4) var(--s3);
  background: radial-gradient(ellipse 82% 150% at center top, rgba(246, 243, 236, .9) 34%, rgba(246, 243, 236, 0) 80%);
}
.op-date {
  margin: 0 0 var(--s2);
  font-family: var(--font-num); font-style: italic; font-weight: 300;
  font-size: 13px; letter-spacing: .08em; color: var(--muted);
}
.op-names {
  margin: 0;
  font-size: 21px; line-height: 1.4; letter-spacing: .08em; font-weight: 400; color: var(--ink);
}
.op-names [lang="ko"] { font-family: var(--font-ko); }
.op-names [lang="ja"] { font-family: var(--font-ja); }
.op-names .seal-dot { font-family: var(--font-num); color: var(--seal); padding: 0 .2em; vertical-align: .08em; }
.op-greet {
  margin: var(--s3) 0 0;
  font-family: var(--font-num); font-style: italic; font-weight: 300;
  font-size: 16px; letter-spacing: .04em; color: var(--ink);
}
.op-big {
  margin: 3px 0 0;
  font-family: var(--font-num); font-weight: 300;
  font-size: 34px; line-height: 1.04; letter-spacing: .02em; color: var(--ink);
}
.op-unit {
  margin: 3px 0 0;
  font-family: var(--font-num); font-style: italic; font-weight: 300;
  font-size: 16px; letter-spacing: .04em; color: var(--ink);
}
.op-couple {
  margin: var(--s3) 0 0;
  font-size: 17px; letter-spacing: .05em; color: var(--ink);
}
.op-couple [lang="ko"] { font-family: var(--font-ko); }
.op-couple [lang="ja"] { font-family: var(--font-ja); }

.hero-stage { position: relative; flex: 1; display: grid; place-items: center; }

.hero-scatter { position: absolute; inset: -4% -2%; z-index: 1; pointer-events: none; }
.hero-scatter .print {
  position: absolute; width: var(--w, 39%);
  pointer-events: auto; box-shadow: 0 1px 2px rgba(35,33,28,.08), 0 16px 26px -20px rgba(35,33,28,.45);
}

/* 가운데 영상 — 사진 더미 위로 들린 한 장 */
.film-hero { position: relative; z-index: 3; width: min(84%, 372px); margin: 0 auto; }
.film-card {
  background: var(--print); padding: 8px;
  box-shadow: 0 2px 4px rgba(35, 33, 28, .12), 0 30px 50px -24px rgba(35, 33, 28, .62);
  transform: rotate(-1deg);
}
.film-media { position: relative; line-height: 0; background: #0d0c0a; }
.film-video { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.film-poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: opacity .45s var(--ease);
}
.film-poster.is-hidden { opacity: 0; pointer-events: none; }

.play {
  position: absolute; inset: 0; margin: 0; padding: 0; border: 0;
  display: grid; place-items: center; background: transparent; cursor: pointer;
  transition: opacity .4s var(--ease);
}
.play-ring {
  width: 60px; height: 60px; border-radius: 50%;
  border: 1px solid var(--print);
  display: grid; place-items: center;
  background: rgba(20, 18, 15, .26); backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px);
  transition: transform .4s var(--ease);
}
.play:active .play-ring { transform: scale(.93); }
.play-tri {
  width: 0; height: 0; margin-left: 4px;
  border-left: 13px solid var(--print);
  border-top: 8px solid transparent; border-bottom: 8px solid transparent;
}
.play.is-hidden { opacity: 0; pointer-events: none; }

.film-cap {
  position: relative; z-index: 3;
  margin-top: var(--s4); padding: var(--s3) var(--s4); display: flex; flex-direction: column; gap: var(--s1); text-align: center;
  background: radial-gradient(ellipse 78% 130% at center, rgba(246, 243, 236, .94) 42%, rgba(246, 243, 236, 0) 80%);
}
.film-cap .cap-title {
  font-family: var(--font-label); font-weight: 500;
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted);
}
.film-cap .cap-sub { font-family: var(--font-body); font-style: italic; font-size: 14px; color: var(--muted); }

/* 원본(무손실) 영상 저장 — 기울어진 필름 카드 아래, 종이빛 알약 버튼 */
.film-save {
  position: relative; z-index: 4;
  display: flex; align-items: center; gap: 10px;
  width: max-content; max-width: 100%;
  margin: var(--s4) auto 0;
  padding: 8px 17px 9px;
  text-decoration: none; color: var(--ink);
  background: linear-gradient(180deg, var(--paper-2), var(--paper));
  border: 1px solid var(--line); border-radius: 999px;
  box-shadow: 0 1px 2px rgba(35, 33, 28, .05), 0 14px 24px -20px rgba(35, 33, 28, .5);
  -webkit-tap-highlight-color: transparent;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.film-save:hover { border-color: var(--muted); }
.film-save:active {
  transform: translateY(1px) scale(.985);
  box-shadow: 0 1px 2px rgba(35, 33, 28, .06);
}
.film-save-ico { display: grid; place-items: center; color: var(--muted); transition: color .35s var(--ease); }
.film-save:active .film-save-ico { color: var(--seal); }
.film-save-ja { font-family: var(--font-ja); font-size: 14px; letter-spacing: .04em; color: var(--ink); }
/* 작은 화면(iPhone SE 등, 한 화면 고정)에서 버튼이 잘리지 않도록 살짝 조임 */
@media (max-height: 700px) {
  .film-save { margin-top: var(--s2); padding: 6px 16px 7px; }
}

.scroll-tick { position: relative; z-index: 5; align-self: center; margin-top: var(--s5); }
.scroll-line { display: block; width: 1px; height: 40px; margin: 0 auto; background: linear-gradient(var(--muted), transparent); }

/* ════════════════════════════════════════════════════════════════════════
   사진들 — 툭 던져놓은 듯 흩뿌려진 인화사진
   ════════════════════════════════════════════════════════════════════════ */
.photos { margin-top: var(--s7); }
.scatter { position: relative; padding: var(--s2) 0 var(--s6); }
.scatter .item {
  position: relative; display: block;
  width: var(--w, 66%);
  margin-top: var(--mt, 0px);
  margin-left: var(--ml, auto);
  margin-right: var(--mr, auto);
  z-index: var(--z, 1);
}

/* ════════════════════════════════════════════════════════════════════════
   편지 (내용 있을 때만)
   ════════════════════════════════════════════════════════════════════════ */
.letter { margin-top: var(--s7); }
.letter-body { max-width: 30em; }
.letter-heading { margin: 0 0 var(--s4); font-family: var(--font-body); font-size: 18px; letter-spacing: .02em; color: var(--ink); }
.letter-heading [lang="ja"] { font-family: var(--font-ja); }
.letter-heading [lang="ko"] { font-family: var(--font-ko); }
.letter-p { margin: 0 0 var(--s4); font-family: var(--font-body); font-size: 17px; line-height: 1.85; color: var(--ink); }
.letter-sign { margin: var(--s6) 0 0; text-align: right; font-family: var(--font-ko); font-size: 16px; letter-spacing: .06em; color: var(--ink); }

/* ════════════════════════════════════════════════════════════════════════
   콜로폰 / 맺음
   ════════════════════════════════════════════════════════════════════════ */
.colophon {
  margin-top: var(--s7);
  min-height: 72svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: var(--s5);
  padding-bottom: max(calc(env(safe-area-inset-bottom) + 56px), var(--s7));
}
.closing-line {
  margin: 0; max-width: 22em;
  font-family: var(--font-num); font-style: italic; font-weight: 300;
  font-size: 21px; line-height: 1.5; letter-spacing: .01em; color: var(--ink);
}
.seal { line-height: 0; }
.seal-edge { fill: none; stroke: var(--seal); stroke-width: 2.4; stroke-linejoin: round; opacity: .9; }
.seal-char { fill: var(--seal); opacity: .92; font-family: var(--font-ja); font-size: 30px; }
.colophon-meta {
  margin: 0;
  font-family: var(--font-label); font-weight: 500;
  font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--muted);
}
.colophon-meta [lang] { letter-spacing: .12em; }
.colophon-meta [lang="ko"] { font-family: var(--font-ko); }
.colophon-meta [lang="ja"] { font-family: var(--font-ja); }
.colophon-meta .name-sep { color: var(--line); padding: 0 .5em; }
.meta-dot { padding: 0 .6em; color: var(--line); }

/* ════════════════════════════════════════════════════════════════════════
   라이트박스
   ════════════════════════════════════════════════════════════════════════ */
/* ⚠️ 닫혀 있을 땐 완전히 숨김 — 안 그러면 투명 오버레이가 화면 전체 탭을 가로챔 */
.lightbox[hidden] { display: none !important; }
.lightbox {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding:
    max(env(safe-area-inset-top), 28px) max(env(safe-area-inset-right), 22px)
    max(env(safe-area-inset-bottom), 28px) max(env(safe-area-inset-left), 22px);
  background: rgba(35, 33, 28, .96);
  opacity: 0; transition: opacity .3s var(--ease);
  overscroll-behavior: contain;
}
.lightbox.open { opacity: 1; }
.lb-grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .12; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
.lb-figure { margin: 0; position: relative; z-index: 1; max-width: 100%; }
.lb-print { background: var(--print); padding: 8px; box-shadow: 0 24px 50px -24px rgba(0,0,0,.6); }
.lb-media { line-height: 0; background: #e7e3d9; }
.lb-img { width: auto; max-width: 100%; max-height: 70svh; }
.lb-caption {
  margin-top: var(--s3); text-align: center;
  font-family: var(--font-label); font-weight: 500;
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted);
}
.lb-plate {
  position: absolute; top: max(env(safe-area-inset-top), 24px); left: 0; right: 0;
  text-align: center; z-index: 2;
  font-family: var(--font-label); font-weight: 500;
  font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var(--print); opacity: .7;
}
.lb-close {
  position: absolute; z-index: 3;
  top: max(env(safe-area-inset-top), 20px); right: max(env(safe-area-inset-right), 18px);
  width: 44px; height: 44px; display: grid; place-items: center;
  background: transparent; border: 0; cursor: pointer;
}
.lb-close svg { stroke: var(--print); stroke-width: 1; fill: none; opacity: .8; }
.lb-edge { position: absolute; top: 0; bottom: 0; width: 33%; background: transparent; border: 0; cursor: pointer; z-index: 1; }
.lb-prev { left: 0; } .lb-next { right: 0; }

/* ════════════════════════════════════════════════════════════════════════
   등장 모션
   ════════════════════════════════════════════════════════════════════════ */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--rd, 0ms); }
.reveal.in { opacity: 1; transform: none; }

/* 여는 화면 로드 연출 */
.r { opacity: 0; }
@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
html.ready .opening .r { animation: riseIn .9s var(--ease) both; }
html.ready .op-mark     { animation-delay: 80ms; }
html.ready .film-hero   { animation-delay: 240ms; }
html.ready .scroll-tick { animation-delay: 1000ms; }

/* 뒤편 사진들이 하나씩 툭 떨어지듯 */
.hero-scatter .print { opacity: 0; }
@keyframes tossIn {
  from { opacity: 0; transform: rotate(var(--rot)) scale(.9) translateY(-14px); }
  to   { opacity: 1; transform: rotate(var(--rot)) scale(1) translateY(0); }
}
html.ready .hero-scatter .print { animation: tossIn .7s var(--ease) both; animation-delay: var(--d, 500ms); }

/* 도장은 마지막에 '찍히듯' */
.op-seal { opacity: 0; transform: scale(1.06); }
@keyframes pressIn { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } }
html.ready .op-seal { animation: pressIn 240ms var(--ease) both; animation-delay: 1180ms; }

@media (prefers-reduced-motion: reduce) {
  .r, .reveal, .hero-scatter .print { opacity: 1 !important; transform: rotate(var(--rot, 0deg)) !important; }
  .op-seal { opacity: 1 !important; transform: none !important; }
  html.ready .opening .r,
  html.ready .hero-scatter .print,
  html.ready .op-seal { animation: none !important; }
  * { scroll-behavior: auto !important; }
}