/* 세 템플릿 공통: 구조와 동작만. 색·폰트·배치는 각 테마 CSS */
* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--body); line-height: 1.6;
  word-break: keep-all; overflow-wrap: anywhere; overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 72px;
}
img, video { display: block; width: 100%; height: 100%; object-fit: cover; }
button { font: inherit; color: inherit; }
main { max-width: 520px; margin: 0 auto; padding: 0 16px 40px; }

/* 잠금 */
.lock {
  position: fixed; inset: 0; z-index: 20;
  display: grid; place-items: center; padding: 16px;
  background: var(--bg);
  transition: opacity .6s ease, visibility .6s;
}
.lock.leaving { opacity: 0; visibility: hidden; }
.lock-inner { display: grid; gap: 16px; justify-items: center; text-align: center; }
.lock-heart { color: var(--heart); line-height: 1; }
#pw {
  width: 7.2ch; padding: 4px 0 8px;
  font-size: 44px; letter-spacing: .08em; text-align: center; font-variant-numeric: tabular-nums;
  color: var(--ink); background: transparent;
  border: none; border-bottom: 1px solid var(--ink); border-radius: 0; outline: none;
}
#pw::placeholder { color: var(--line); }
.lock-hint { font-size: 12px; color: var(--muted); }

/* 상단 바 */
.bar {
  position: sticky; top: 0; z-index: 5;
  display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 12px;
  padding: 10px 16px; font-size: 11px; line-height: 1.35;
  background: var(--bar-bg);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.bar > div { display: grid; justify-items: start; gap: 3px; }
.bar-clock { align-self: end; font-variant-numeric: tabular-nums; }
.bar .heart { color: var(--heart); }

/* 첫 화면 */
.hero {
  min-height: calc(100vh - 60px); min-height: calc(100svh - 60px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center;
}
.hero-heart {
  margin-top: 20px; padding: 8px;
  font-size: 32px; line-height: 1; color: var(--heart); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* 날짜는 형태가 셋: 테마가 하나만 보여줌 */
.date > span { display: none; }

/* 캐러셀 */
.frame { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--soft); }
.strip { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; height: 100%; scroll-snap-align: center; }
.slide img { cursor: zoom-in; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.counter {
  position: absolute; top: 12px; right: 12px;
  padding: 3px 8px; border-radius: 99px;
  font-size: 11px; line-height: 1.2; font-variant-numeric: tabular-nums;
  color: #fff; background: rgba(20, 18, 17, .55); pointer-events: none;
}
.nav {
  position: absolute; top: 50%; z-index: 1;
  width: 30px; height: 30px; padding: 0 0 2px;
  display: none; place-items: center;
  font-size: 20px; line-height: 1; color: #1a1614;
  background: rgba(255, 255, 255, .88); border: none; border-radius: 50%;
  transform: translateY(-50%); cursor: pointer;
}
.nav.prev { left: 10px; }
.nav.next { right: 10px; }
@media (hover: hover) { .frame:hover .nav { display: grid; } }
.frame:focus-within .nav { display: grid; }
.frame .nav[hidden] { display: none; }
.dots { display: flex; justify-content: center; gap: 5px; margin-top: 12px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); opacity: .35; transition: opacity .2s; }
.dots i.on { background: var(--ink); opacity: 1; }
.pop {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  font-size: 96px; line-height: 1; color: #fff;
  text-shadow: 0 4px 24px rgba(0, 0, 0, .25); pointer-events: none;
  animation: pop .9s ease-out forwards;
}
@keyframes pop {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  20% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  35% { transform: translate(-50%, -50%) scale(.95); }
  70% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -80%) scale(1); opacity: 0; }
}
.entry { scroll-margin-top: 72px; }
.entry.flash .line { color: var(--heart); transition: color .3s; }

/* 한 줄 모음 */
.index-list { padding: 0; list-style: none; }
.index-list a {
  display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; align-items: baseline;
  color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.index-list .d::after { content: " ↓"; }

/* 편지 · 마지막 */
.letter { display: grid; gap: 1.2em; white-space: pre-line; }
.sign { text-align: right; }
.closing {
  min-height: 70vh; min-height: 70svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center;
}
.closing-unit .heart { color: var(--heart); }
.to-top { margin-top: 28px; padding: 0; font-size: 12px; color: var(--muted); background: none; border: none; cursor: pointer; }
.foot {
  display: flex; justify-content: space-between;
  max-width: 520px; margin: 0 auto; padding: 24px 16px;
  font-size: 11px; color: var(--muted);
}

/* 사진 크게 · 알림 */
.viewer { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; margin: 0; padding: 0; border: none; background: transparent; }
.viewer::backdrop { background: rgba(0, 0, 0, .94); }
.viewer img { object-fit: contain; }
.toast {
  position: fixed; left: 50%; bottom: 84px; z-index: 30;
  padding: 10px 16px; border-radius: 99px;
  font-size: 13px; white-space: nowrap;
  color: var(--bg); background: var(--ink);
  opacity: 0; transform: translate(-50%, 10px); transition: .3s; pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* 데모 전용: 템플릿 바꿔 보기 */
.switcher {
  position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 25;
  display: flex; gap: 2px; padding: 4px; border-radius: 99px;
  transform: translateX(-50%);
  background: rgba(20, 18, 17, .84); border: 1px solid rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-family: -apple-system, "Apple SD Gothic Neo", system-ui, sans-serif;
}
.switcher a { padding: 7px 12px; border-radius: 99px; font-size: 12px; color: #cfc7c0; text-decoration: none; white-space: nowrap; }
.switcher a.on { color: #141211; background: #fff; }
.switcher a.home { color: #8e8680; }

/* 스크롤 등장 */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .9s ease, transform .9s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* 키보드 포커스 표시 */
:focus-visible { outline: 2px solid var(--heart); outline-offset: 3px; }
.strip:focus-visible { outline-offset: -3px; }