/* 에디토리얼: 다크 · 큰 날짜 · 알약 라벨 · 목소리는 명조 */
:root {
  --bg: #141211; --ink: #f3eee9; --muted: #9a918a; --line: #2a2522; --soft: #1e1b19;
  --heart: #ff6369; --bar-bg: rgba(20, 18, 17, .82);
  --grotesk: "Helvetica Neue", Helvetica, Arial, "Pretendard Variable", Pretendard, sans-serif;
  --body: "Pretendard Variable", Pretendard, "Helvetica Neue", sans-serif;
  --serif: "MaruBuri", serif;
  --serif-en: "Instrument Serif", serif;
}
.tag {
  display: inline-block; padding: 0 6px;
  font-family: var(--grotesk); font-size: 10px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); border: 1px solid currentColor; border-radius: 99px; white-space: nowrap;
}
.display { font-family: var(--grotesk); font-weight: 400; letter-spacing: -.045em; line-height: .92; }
.bar { font-family: var(--grotesk); }

.lock-heart { font-size: 28px; }
.lock-for { font-family: var(--serif-en); font-size: 28px; line-height: 1; }
.lock-q { font-size: 15px; }
#pw { font-family: var(--grotesk); }

.hero-for { font-family: var(--serif-en); font-size: 28px; line-height: 1; }
.hero-name { font-size: clamp(64px, 21vw, 150px); }
.hero-name-kr, .hero-day, .hero-from { display: none; }
.hero-sub { margin-top: 6px; font-family: var(--serif); font-size: 15px; color: var(--muted); }

.month-head {
  display: flex; align-items: center; gap: 10px;
  margin-top: 24px; padding-top: 10px; border-top: 1px solid var(--ink);
}
.month-word { display: none; }
.month-cap { font-size: 12px; color: var(--muted); }

.entry { padding: 36px 0 52px; }
.entry-head { display: flex; justify-content: space-between; font-family: var(--grotesk); font-size: 11px; color: var(--muted); }
.entry-head .who { color: var(--ink); }
.date .d-short { display: block; margin: 12px 0 18px; font-size: clamp(60px, 20vw, 128px); }
.date .d-range { display: block; margin: -10px 0 18px; font-family: var(--grotesk); font-size: 13px; color: var(--muted); }
.frame { border-radius: 14px; }
.line { margin-top: 18px; font-family: var(--serif); font-size: 22px; line-height: 1.45; letter-spacing: -.02em; }
.dots + .line { margin-top: 10px; }
.note { margin-top: 8px; font-size: 14px; color: var(--muted); }

.index-sec { display: grid; gap: 56px; padding-top: 72px; }
.index-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--ink); }
.index-head .n, .index-list .n, .index-list .d { font-family: var(--grotesk); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.index-list a { padding: 11px 0; border-bottom: 1px solid var(--line); }
.index-list .t { font-size: 16px; letter-spacing: -.01em; }

.letter-sec { padding-top: 104px; }
.letter { margin-top: 18px; font-family: var(--serif); font-size: 16.5px; line-height: 2.05; letter-spacing: -.01em; }

.closing-day { font-size: clamp(64px, 21vw, 150px); }
.closing-unit { font-size: 15px; }
.closing-text { margin-top: 18px; font-family: var(--serif); font-size: 17px; }
.foot { font-family: var(--grotesk); }