:root {
  color-scheme: light;
  --ink: #191919;
  --muted: #646460;
  --accent: #cc5d9d;
  --paper: #fff;
  --ground: #f0f0ee;
  --rule: #d6d6d2;
  --sans: Helvetica, "Helvetica Neue", Arial, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --mono: "Courier Prime", "Courier New", Courier, monospace;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
body { margin: 0; padding: 40px 24px; min-width: 280px; }
::selection { background: #f2d9e8; color: var(--ink); }
p, h1, h2 { margin: 0; }
.sheet {
  width: min(100%, 680px);
  min-height: min(840px, calc(100svh - 80px));
  margin: 0 auto;
  padding: 34px 44px 28px;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  border-top: 3px solid var(--accent);
}
.registration { display: flex; justify-content: space-between; gap: 16px; font: 10px/1.4 var(--mono); letter-spacing: .055em; }
h1 { margin: 38px 0 20px -3px; font-size: 78px; line-height: .88; letter-spacing: -.065em; font-weight: 500; }
.brand-period { color: var(--accent); }
.brand-caption { font: 10px/1.5 var(--mono); letter-spacing: .09em; }
.entry { flex: 1; display: flex; flex-direction: column; margin-top: 38px; border-top: 1px solid var(--ink); }
.entry-index { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; font: 11px/1.5 var(--mono); letter-spacing: .06em; }
.index-mark { font: 22px/1 var(--sans); color: var(--accent); }
.entry-copy { margin: 82px 0 80px; }
.eyebrow { margin-bottom: 14px; font: 10px/1.5 var(--mono); letter-spacing: .05em; color: var(--muted); }
h2 { font-weight: 400; font-size: clamp(32px, 5.7vw, 45px); line-height: 1.05; letter-spacing: -.045em; overflow-wrap: break-word; }
.description { margin-top: 24px; font-size: 15px; line-height: 1.85; letter-spacing: -.025em; word-break: keep-all; }
.preparation { margin-top: auto; display: flex; gap: 9px; align-items: flex-start; font: 10px/1.6 var(--mono); letter-spacing: .015em; color: var(--muted); }
.status-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; margin-top: 5px; }
.colophon { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; border-top: 1px solid var(--rule); margin-top: 26px; padding-top: 18px; font: 10px/1.65 var(--mono); letter-spacing: .025em; }
.colophon p span { font-size: 9px; color: var(--muted); letter-spacing: 0; }
.end-mark { color: var(--accent); font: 28px/1 var(--sans); }
.no-script { margin-top: 64px; font-size: 14px; line-height: 1.8; }
@media (max-width: 540px) {
  body { padding: 16px 14px; padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .sheet { padding: 24px 25px 22px; min-height: calc(100svh - 32px); }
  h1 { font-size: clamp(54px, 16.5vw, 76px); margin: 38px 0 18px -2px; }
  .entry { margin-top: 32px; }
  .entry-copy { margin: 66px 0 72px; }
  h2 { font-size: clamp(31px, 8.8vw, 43px); }
  .description { font-size: 14px; margin-top: 22px; }
  .registration { font-size: 9px; }
  .preparation { font-size: 9px; gap: 7px; }
}
@media (max-width: 350px) {
  .sheet { padding-left: 20px; padding-right: 20px; }
  .registration { font-size: 8px; }
  .colophon p span { font-size: 8px; }
  .preparation { font-size: 8px; }
}