/* 소개: 어두운 종이 위 긴 글. 데스크톱은 마우스 높이, 폰은 화면 중간쯤의 띠 아래로 글자가 점에서 글자로 돌아온다. */
body { background: #110000; color: #E6D8BE; }
.reader { min-height: 100vh; }
.reader main { max-width: 620px; margin: 0 auto; padding: 220px 24px 220px; }
.rv { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 22%; }
@keyframes rise { from { opacity: 0; transform: translateY(24px) } to { opacity: 1; transform: none } }
.intro { font-size: 21px; line-height: 1.8; letter-spacing: -0.01em; }
.intro p { margin: 0; }
.sec h2 { margin: 0 0 28px; padding-top: 28px; border-top: 1px solid rgba(230,216,190,.22); font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.sec p { margin: 0 0 16px; font-size: 15px; line-height: 2; color: rgba(230,216,190,.9); }
.sec.s2 { margin-top: 96px; }
.sig { margin-top: 28px; color: #E6D8BE; }
.contact { margin-top: 96px; font-size: 13px; color: rgba(230,216,190,.6); }
.contact a { color: #E6D8BE; }
.contact[hidden] { display: none; }
.contact.copy { margin-top: 6px; }
.contact.legal { margin-top: 12px; }
.bigt { margin: 160px 0 56px; font-size: 34px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.dinos { display: flex; gap: 16px; margin: 28px 0 40px; align-items: flex-start; }
.dinos img { display: block; flex: 1 1 0; min-width: 0; box-shadow: 0 10px 26px rgba(0,0,0,.5); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.dinos img:nth-child(1) { transform: rotate(-2deg); }
.dinos img:nth-child(2) { transform: translateY(10px) rotate(1.5deg); }
.dinos img:nth-child(3) { transform: rotate(-1deg); }
.dinos img:hover { transform: translateY(-6px) rotate(0) scale(1.03); }

@property --ly { syntax: '<length>'; inherits: false; initial-value: 0px; }
.kk { display: block; transition: --ly .35s cubic-bezier(.2,.7,.2,1); color: transparent; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(to bottom, #E6D8BE 0, #E6D8BE calc(var(--ly) + 12px), rgba(230,216,190,0) calc(var(--ly) + 44px)), radial-gradient(circle, #E6D8BE 0 .85px, transparent 1.15px); background-repeat: no-repeat, repeat; background-size: 100% 100%, 3px 3px; }

@media (max-width: 767px) {
  .reader main { padding: 120px 28px 180px; }
  .intro { font-size: 17px; }
  .sec h2 { margin: 0 0 22px; padding-top: 24px; font-size: 16px; }
  .sec p { margin: 0 0 14px; font-size: 14px; line-height: 1.95; }
  .sec.s2 { margin-top: 72px; }
  .bigt { margin: 110px 0 40px; font-size: 26px; }
  .dinos { gap: 8px; margin: 20px 0 28px; }
  .topfade { position: fixed; left: 0; right: 0; top: 0; height: 92px; z-index: 4; background: linear-gradient(#110000 60%, rgba(17,0,0,0)); pointer-events: none; }
}