/* 로고 의미 화면: 로고를 층으로 나누어 휠을 한 번 돌릴 때마다 한 화면씩 보여 준다. 움직임 줄이기 설정에서는 전환 없이 바뀐다. */
html:has(body.logo-page) { scroll-snap-type: y mandatory; }
.logo-page .site-footer { scroll-snap-align: end; }
.logo-story { position: relative; color: #fff; background: #0c1a2e; }
.ls-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-items: center start; padding-left: clamp(24px, 9vw, 150px); }
.ls-bg { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--ease); }
.ls-bg-0 { opacity: 1; background: radial-gradient(900px 520px at 28% 50%, rgba(46, 90, 140, .5), transparent 70%), linear-gradient(160deg, #0b1829, #14263f); }
.ls-bg-1 { background: radial-gradient(900px 520px at 28% 50%, rgba(170, 230, 110, .28), transparent 70%), linear-gradient(160deg, #0b3524, #1d6a3f 55%, #4c9e4f); }
.ls-bg-2 { background: radial-gradient(900px 520px at 28% 50%, rgba(255, 120, 100, .25), transparent 70%), linear-gradient(160deg, #3a0a14, #85161f 55%, #b5302a); }
.ls-bg-3 { background: radial-gradient(900px 520px at 28% 50%, rgba(255, 225, 150, .38), transparent 70%), linear-gradient(160deg, #3a2606, #7b5210 55%, #a9741a); }
.logo-story[data-step="1"] .ls-bg-1, .logo-story[data-step="2"] .ls-bg-2, .logo-story[data-step="3"] .ls-bg-2, .logo-story[data-step="4"] .ls-bg-2, .logo-story[data-step="5"] .ls-bg-2, .logo-story[data-step="6"] .ls-bg-3 { opacity: 1; }
.ls-logo { position: relative; z-index: 1; width: min(44vw, 470px); aspect-ratio: 1; }
.ly { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; transition: transform 1.3s var(--ease), opacity 1.1s var(--ease), filter 1.1s var(--ease); will-change: transform, opacity; }
/* 길과 줄기는 한 덩어리였던 것을 나눈 층이라 같은 기준점에서 움직여야 이음매가 보이지 않는다 */
.ly-stem { opacity: 1; }
.ly-cross { transform-origin: 81% 53%; }

/* 처음에는 흩어져 있던 층이 모여 로고가 된다(한 번) */
@media (prefers-reduced-motion: no-preference) {
  .ly-green { animation: ly-g 1.8s .15s var(--ease) backwards; }
  .ly-path, .ly-stem { animation: ly-b 1.8s .35s var(--ease) backwards; }
  .ly-head { animation: ly-h 1.8s .6s var(--ease) backwards; }
  .ly-cross { animation: ly-c 1.8s .5s var(--ease) backwards; }
}
@keyframes ly-g { from { opacity: 0; transform: translate(-16%, -12%) scale(.82) rotate(-14deg); } }
@keyframes ly-b { from { opacity: 0; transform: translate(14%, 12%) scale(.86) rotate(10deg); } }
@keyframes ly-h { from { opacity: 0; transform: translate(0, -44%) scale(.4); } }
@keyframes ly-c { from { opacity: 0; transform: translate(26%, -22%) scale(.7) rotate(14deg); } }

/* 단계별 모습: 3(십자가) 4(길+십자가) 5(i)는 해당 층만 보인다 */
.logo-story[data-step="1"] .ly:not(.ly-green) { opacity: .12; filter: grayscale(.5); transform: translate(6%, 5%) scale(.96); }
.logo-story[data-step="1"] .ly-green { transform: scale(1.06); }
.logo-story[data-step="2"] .ly-green { opacity: .14; filter: grayscale(.4); transform: translate(-6%, -5%) scale(.96); }
.logo-story[data-step="2"] .ly:not(.ly-green) { transform: scale(1.03); }
.logo-story[data-step="3"] .ly-green, .logo-story[data-step="3"] .ly-path, .logo-story[data-step="3"] .ly-stem, .logo-story[data-step="3"] .ly-head { opacity: .14; }
.logo-story[data-step="3"] .ly-cross { transform: translate(5%, -4%) scale(1.2); }
.logo-story[data-step="4"] .ly-green, .logo-story[data-step="4"] .ly-stem, .logo-story[data-step="4"] .ly-head { opacity: 0; }
.logo-story[data-step="4"] .ly-path, .logo-story[data-step="4"] .ly-cross { transform: scale(1.06); }
.logo-story[data-step="5"] .ly-green, .logo-story[data-step="5"] .ly-path, .logo-story[data-step="5"] .ly-cross { opacity: 0; }
.logo-story[data-step="5"] .ly-stem, .logo-story[data-step="5"] .ly-head { transform: translate(-2.1%, -18.8%) scale(2.2); }
.logo-story[data-step="5"] .ly-stem { -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 71%, transparent 83%); mask-image: linear-gradient(to bottom, #000 0, #000 71%, transparent 83%); }
.logo-story[data-step="6"] .ly { filter: drop-shadow(0 0 28px rgba(255, 244, 214, .45)); }

/* 풀이 글: 한 단계가 한 화면. 휠을 돌릴 때마다 한 화면씩 맞춰 멈춘다 */
.ls-steps { position: relative; z-index: 2; margin: -100svh 0 0; padding: 0; list-style: none; }
.ls-step { position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: flex-end; padding: 0 clamp(24px, 8vw, 150px); scroll-snap-align: start; scroll-snap-stop: always; }
.ls-cue { position: absolute; left: 50%; bottom: 6svh; width: 16px; height: 16px; margin-left: -8px; border-right: 2.5px solid rgba(255, 255, 255, .8); border-bottom: 2.5px solid rgba(255, 255, 255, .8); transform: rotate(45deg); animation: ls-cue 2s ease-in-out infinite; }
@keyframes ls-cue { 0%, 100% { opacity: .35; transform: translateY(0) rotate(45deg); } 50% { opacity: 1; transform: translateY(8px) rotate(45deg); } }
.ls-card { max-width: 580px; }
.ls-card h1, .ls-card h2 { margin: 0 0 12px; font: 700 clamp(30px, 4vw, 54px)/1.25 var(--serif); letter-spacing: -.02em; color: #fff; text-shadow: 0 2px 20px rgba(0, 0, 0, .3); }
.ls-card h1 { font-size: clamp(40px, 5.4vw, 72px); margin-bottom: 18px; }
.ls-card p { margin: 0 0 12px; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.85; color: rgba(255, 255, 255, .92); text-shadow: 0 1px 12px rgba(0, 0, 0, .3); }
.ls-card p:last-child { margin-bottom: 0; }
.logo-story.js .ls-card { opacity: .22; transform: translateY(18px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.logo-story.js .ls-step.on .ls-card { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ly, .ls-bg, .logo-story.js .ls-card { transition: none; } .ls-cue { animation: none; } html:has(body.logo-page) { scroll-snap-type: none; } }
@media (max-width: 820px) {
  .ls-stage { place-items: start center; padding: 11svh 0 0; }
  .ls-logo { width: min(64vw, 300px); }
  .ls-step { align-items: flex-end; justify-content: center; padding: 0 20px 9svh; }
  .logo-story.js .ls-step:not(.on) .ls-card { opacity: 0; }
  .ls-card { padding: 18px 20px; border-radius: 20px; background: rgba(8, 16, 30, .5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .ls-card h1 { font-size: clamp(32px, 9vw, 44px); }
  .ls-cue { display: none; }
}