:root {
  --ink: #20211f;
  --muted: #77766f;
  --paper: #f4f1eb;
  --line: rgba(32, 33, 31, 0.16);
  --warm: #d5bea3;
  --blue: #b8cbd0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Noto Sans KR", "Apple SD Gothic Neo", sans-serif; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
button, a { color: inherit; font: inherit; }
button { cursor: pointer; }
.page-shell { position: relative; max-width: 1440px; margin: auto; padding: 34px 5vw 32px; animation: page-in .9s ease both; }
.page-shell::before, .page-shell::after { position: fixed; z-index: -1; width: 35vw; height: 35vw; border-radius: 50%; content: ""; filter: blur(40px); opacity: .25; pointer-events: none; }
.page-shell::before { top: 12%; left: -18%; background: #e4b8a5; animation: drift 12s ease-in-out infinite alternate; }
.page-shell::after { right: -18%; bottom: 4%; background: #9fc2cc; animation: drift 15s ease-in-out -4s infinite alternate-reverse; }
.site-header { display: flex; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 24px; animation: slide-down .8s .1s ease both; }
.brand { font-family: "Manrope", sans-serif; font-size: 13px; line-height: 1.05; letter-spacing: .13em; text-decoration: none; font-weight: 800; }
.brand em, h1 i, h2 em { font-family: inherit; font-style: normal; font-weight: 800; letter-spacing: -.06em; }
.brand em { color: #9b554a; font-size: 1.1em; }
.issue, .eyebrow, .story-meta, .site-footer { font-family: "Manrope", "Noto Sans KR", sans-serif; color: var(--muted); font-size: 10px; letter-spacing: .14em; }
.issue { margin: 3px 0 0; }
.menu-mark { display: none; }
.intro { position: relative; padding: 104px 0 86px; text-align: center; animation: intro-in 1s .2s ease both; }
.intro::after { position: absolute; top: 28%; left: 50%; width: 170px; height: 170px; border: 1px solid rgba(155, 85, 74, .18); border-radius: 50%; content: ""; transform: translate(-50%, -50%); animation: ring 4s ease-in-out infinite; pointer-events: none; }
.eyebrow { margin: 0 0 21px; }
h1 { margin: 0; font-size: clamp(45px, 6.7vw, 92px); font-weight: 800; line-height: 1.04; letter-spacing: -.1em; word-break: keep-all; }
h1 i { color: #9b554a; font-size: 1em; }
.intro-copy { color: var(--muted); font-size: 14px; font-weight: 400; line-height: 1.85; letter-spacing: -.035em; margin: 28px 0 0; }
.stories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.story-card { overflow: hidden; }
.story-card--warm { background: var(--warm); }
.story-card--blue { background: var(--blue); }
.story-image-wrap { position: relative; overflow: hidden; background: #202328; }
.story-image-wrap--wide { aspect-ratio: 1.9 / 1; }
.story-image-wrap--portrait { aspect-ratio: 1.9 / 1; background: #111820; }
.story-image { width: 100%; height: 100%; display: block; object-fit: contain; object-position: center; filter: saturate(.92); transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .8s ease; }
.story-image-wrap::after { position: absolute; top: -30%; left: -55%; width: 28%; height: 160%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); content: ""; transform: rotate(16deg); animation: shine 6s 1.2s ease-in-out infinite; pointer-events: none; }
.story-card:hover { transform: translateY(-8px) rotate(.25deg); box-shadow: 0 24px 45px rgba(32, 33, 31, .15); }
.story-card:hover .story-image { transform: scale(1.06); filter: saturate(1.08) brightness(1.04); }
.story-number { position: absolute; top: 18px; left: 20px; color: #fff; font-family: "Manrope", sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -.06em; }
.story-content { padding: 31px 34px 35px; }
.story-card { transition: transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .55s ease; }
.reveal { opacity: 0; transform: translateY(35px); animation: reveal .9s .35s ease forwards; }
.reveal-delay { animation-delay: .55s; }
.story-meta { margin: 0 0 21px; color: rgba(32, 33, 31, .62); font-size: 9px; }
h2 { margin: 0; font-size: clamp(28px, 3.1vw, 43px); font-weight: 800; letter-spacing: -.1em; line-height: 1.14; word-break: keep-all; }
h2 em { color: #9b554a; font-size: 1em; }
.story-text { max-width: 440px; margin: 23px 0 27px; font-size: 13px; font-weight: 400; line-height: 1.95; letter-spacing: -.035em; color: rgba(32, 33, 31, .78); }
.story-text--small { margin-top: 24px; }
.story-text a, .event-box a { color: inherit; text-underline-offset: 3px; }
.story-text strong { color: var(--ink); }
.event-box, .amount-box { margin-top: 23px; padding: 18px 20px; background: rgba(255, 255, 255, .28); border: 1px solid rgba(32, 33, 31, .13); }
.event-box h3 { margin: 0 0 8px; font-size: 13px; font-weight: 800; letter-spacing: -.04em; }
.event-box p, .amount-box p { margin: 0; font-size: 12px; line-height: 1.8; }
.event-box--blue { background: rgba(255, 255, 255, .2); }
.amount-box { background: rgba(255, 255, 255, .35); }
.amount-box p + p { margin-top: 3px; }
.amount-box .total { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(32, 33, 31, .16); font-size: 16px; font-weight: 700; }
.event-list { margin-top: 25px; }
.event-list h3 { margin: 0 0 11px; font-size: 13px; font-weight: 800; letter-spacing: -.04em; }
.event-list ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; margin: 0; padding: 0; list-style: none; color: rgba(32, 33, 31, .76); font-size: 11px; line-height: 1.6; letter-spacing: -.035em; }
.event-list li::before { content: "✓"; margin-right: 5px; }
.like-button { padding: 0 0 5px; border: 0; border-bottom: 1px solid rgba(32, 33, 31, .5); background: transparent; font-size: 11px; letter-spacing: .04em; transition: color .2s ease; }
.like-button span { margin-right: 5px; font-size: 20px; line-height: 0; vertical-align: -2px; }
.like-button[aria-pressed="true"] { color: #9b554a; border-color: #9b554a; }
.like-button[aria-pressed="true"] span { content: "♥"; }
.site-footer { display: flex; justify-content: space-between; padding-top: 25px; }
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-down { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes intro-in { from { opacity: 0; transform: translateY(25px); } to { opacity: 1; transform: translateY(0); } }
@keyframes reveal { to { opacity: 1; transform: translateY(0); } }
@keyframes shine { 0%, 45% { left: -55%; } 72%, 100% { left: 135%; } }
@keyframes drift { from { transform: translate3d(0, -20px, 0) scale(1); } to { transform: translate3d(35px, 30px, 0) scale(1.12); } }
@keyframes ring { 0%, 100% { opacity: .12; transform: translate(-50%, -50%) scale(.8); } 50% { opacity: .34; transform: translate(-50%, -50%) scale(1.3); } }
@media (max-width: 680px) {
  .page-shell { padding: 22px 20px 24px; }
  .site-header { padding-bottom: 18px; align-items: center; }
  .issue { display: none; }
  .menu-mark { display: flex; flex-direction: column; gap: 5px; }
  .menu-mark span { width: 25px; height: 1px; background: var(--ink); }
  .intro { padding: 73px 0 60px; }
  h1 { font-size: clamp(47px, 14vw, 72px); }
  .intro-copy { font-size: 12px; }
  .desktop-break { display: none; }
  .stories { grid-template-columns: 1fr; gap: 19px; }
  .story-image-wrap--wide, .story-image-wrap--portrait { aspect-ratio: 1.6 / 1; }
  .story-content { padding: 26px 24px 29px; }
  h2 { font-size: 36px; }
  .story-text { font-size: 12px; margin: 20px 0 24px; }
  .event-list ul { grid-template-columns: 1fr 1fr; gap: 4px 10px; font-size: 10px; }
  .site-footer { font-size: 8px; letter-spacing: .12em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}