/* 스크랩북: 크림 종이 · 마스킹테이프 폴라로이드 · 손글씨 */
:root {
  --bg: #f7f0e4; --ink: #3b2f2a; --muted: #756963; --line: #e3d5c2; --soft: #efe4d4;
  --heart: #e8667f; --bar-bg: rgba(247, 240, 228, .9);
  --hand: "Nanum Pen Script", cursive;
  --body: "Gowun Dodum", sans-serif;
  --a: #4f7fae; --b: #d9577a;
}
body {
  background-color: var(--bg);
  background-image: radial-gradient(rgba(120, 90, 60, .08) 1px, transparent 1px);
  background-size: 14px 14px;
}
.tag {
  display: inline-block; padding: 0 8px;
  font-size: 11px; line-height: 18px; color: var(--muted);
  background: #fffdf8; border-radius: 6px; box-shadow: 0 1px 2px rgba(80, 50, 20, .08);
}
.display { font-family: var(--hand); font-weight: 400; line-height: 1; }

.lock-heart { font-size: 36px; }
.lock-for { font-family: var(--hand); font-size: 40px; line-height: 1; color: var(--b); rotate: -3deg; }
.lock-q { font-size: 15px; }
#pw { font-family: var(--hand); font-size: 56px; border-bottom: 2px dashed var(--ink); }

.hero-for, .hero-name { display: none; }
.hero-name-kr { font-family: var(--hand); font-size: 76px; line-height: 1; color: var(--b); rotate: -3deg; }
.hero-sub { display: none; }
.hero-from { margin-top: 4px; font-family: var(--hand); font-size: 26px; color: var(--muted); }
.hero-day {
  margin-top: 8px; padding: 2px 14px;
  font-family: var(--hand); font-size: 26px; color: var(--ink);
  background: #fffdf8; border-radius: 99px; box-shadow: 0 2px 6px rgba(80, 50, 20, .12); rotate: 2deg;
}
.hero-heart { font-size: 40px; }

.month-head { display: flex; flex-direction: column; align-items: center; margin-top: 56px; }
.month-num { display: none; }
.month-word { font-family: var(--hand); font-size: 44px; line-height: 1; }
.month-cap { font-family: var(--hand); font-size: 24px; color: var(--muted); }

/* 폴라로이드 카드 */
.entry {
  position: relative; display: flex; flex-direction: column;
  margin: 44px 4px; padding: 14px 14px 20px;
  background: #fffdf8;
  box-shadow: 0 2px 4px rgba(80, 50, 20, .08), 0 14px 30px rgba(80, 50, 20, .12);
  rotate: -1.5deg;
}
.entry:nth-of-type(even) { rotate: 1.2deg; }
.entry::before { /* 마스킹테이프 */
  content: ""; position: absolute; top: -13px; left: 50%;
  width: 96px; height: 26px;
  background: rgba(232, 190, 120, .55); transform: translateX(-50%) rotate(-3deg);
}
.entry.by-b::before { background: rgba(232, 140, 165, .5); }
.entry-head { order: 3; display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; color: var(--muted); }
.entry-head .idx { display: none; }
.frame { order: 0; border-radius: 2px; }
.dots { order: 1; }
.date { order: 2; margin-top: 12px; }
.date .d-hand { display: block; font-family: var(--hand); font-size: 26px; line-height: 1.1; color: var(--muted); }
.line { order: 4; margin-top: 2px; font-family: var(--hand); font-size: 32px; line-height: 1.15; color: var(--a); }
.by-b .line { color: var(--b); }
.note { order: 5; margin-top: 4px; font-size: 14px; color: var(--muted); }

.index-sec { display: grid; gap: 36px; padding-top: 72px; }
.index-head { display: flex; justify-content: center; margin-bottom: 12px; }
.index-head .tag { padding: 0; font-family: var(--hand); font-size: 30px; color: var(--ink); background: none; box-shadow: none; }
.index-head .n { display: none; }
.index-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; }
.index-list a {
  display: inline-flex; padding: 2px 14px;
  font-family: var(--hand); font-size: 24px; line-height: 1.3; color: var(--a);
  border: 1.5px solid currentColor; border-radius: 99px; background: #fffdf8;
}
.index-group:first-child .index-list a { color: var(--b); }
.index-list .n, .index-list .d { display: none; }

.letter-sec { padding-top: 88px; text-align: center; }
.letter {
  margin-top: 14px; padding: 28px 24px; text-align: left;
  font-size: 16px; line-height: 32px;
  background: #fffdf8 repeating-linear-gradient(transparent 0 31px, var(--line) 31px 32px);
  background-position: 0 24px;
  box-shadow: 0 2px 4px rgba(80, 50, 20, .08), 0 14px 30px rgba(80, 50, 20, .12);
  rotate: .6deg; gap: 32px;
}
.sign { font-family: var(--hand); font-size: 30px; color: var(--a); }

.closing-day { font-size: 110px; color: var(--b); }
.closing-unit { font-family: var(--hand); font-size: 30px; }
.closing-text { font-size: 16px; }