@charset "utf-8";

/*
 * 추모기부 캠페인 스타일 (모바일)
 *
 * 작성자  김현호 (에젤, 데브현)
 * 작성일  2026.08.12
 */

/*= FONTS =*/
:root {
  --fallback:
    -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI',
    'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', sans-serif;

  --pretendard: 'Pretendard', var(--fallback);
  --maruburi: 'MaruBuri', var(--fallback);
}

@font-face {
  font-family: 'MaruBuri';
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url(../fonts/MaruBuri/MaruBuri-ExtraLight.woff2) format('woff2');
}

@font-face {
  font-family: 'MaruBuri';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url(../fonts/MaruBuri/MaruBuri-Light.woff2) format('woff2');
}

@font-face {
  font-family: 'MaruBuri';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url(../fonts/MaruBuri/MaruBuri-Regular.woff2) format('woff2');
}

@font-face {
  font-family: 'MaruBuri';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url(../fonts/MaruBuri/MaruBuri-SemiBold.woff2) format('woff2');
}

@font-face {
  font-family: 'MaruBuri';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url(../fonts/MaruBuri/MaruBuri-Bold.woff2) format('woff2');
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url(../fonts/Pretendard/PretendardVariable.woff2) format('woff2-variations');
}

@font-face {
  font-family: 'SpoqaHanSansNeo';
  font-weight: 300;
  font-style: normal;
  src: url(/assets/common/fonts/spoqahan-sans-neo/SpoqaHanSansNeoL.woff2) format('woff2');
}

@font-face {
  font-family: 'SpoqaHanSansNeo';
  font-weight: 400;
  font-style: normal;
  src: url(/assets/common/fonts/spoqahan-sans-neo/SpoqaHanSansNeoR.woff2) format('woff2');
}

@font-face {
  font-family: 'SpoqaHanSansNeo';
  font-weight: 500;
  font-style: normal;
  src: url(/assets/common/fonts/spoqahan-sans-neo/SpoqaHanSansNeoM.woff2) format('woff2');
}

@font-face {
  font-family: 'SpoqaHanSansNeo';
  font-weight: 700;
  font-style: normal;
  src: url(/assets/common/fonts/spoqahan-sans-neo/SpoqaHanSansNeoB.woff2) format('woff2');
}

@font-face {
  font-family: 'Nanum Barun Gothic';
  font-weight: 400;
  font-style: normal;
  src: url(/assets/common/fonts/nanum-barun-gothic/NanumBarunGothic.woff2) format('woff2');
}

@font-face {
  font-family: 'Nanum Barun Gothic';
  font-weight: 700;
  font-style: normal;
  src: url(/assets/common/fonts/nanum-barun-gothic/NanumBarunGothicBold.woff2) format('woff2');
}

@font-face {
  font-family: 'NanumSquare';
  font-weight: 400;
  font-style: normal;
  src: url(/assets/common/fonts/nanum-square/NanumSquareR.woff) format('woff');
}

/*= RESET =*/
* {
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
  font-family: 'SpoqaHanSansNeo', 'NanumSquare', "Apple SD Gothic Neo", Helvetica, sans-serif, Arial !important;
  font-weight: 400;
}

div, ul, li, dl, dt, dd {
  overflow: visible;
}

/*= CONTENT =*/
.content_area {
  overflow: hidden;
}

.div_inner {
  position: relative;
  width: 100%;
  padding-inline: 2.3077rem;
}

.footer {
  border-top: 2px solid #da291c !important;
  padding-bottom: 34vw !important; /* 맨 아래까지 따라 내려온 플로팅 버튼이 푸터 글자를 가리지 않도록 비워 두는 자리 */
}

.content_area {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

#memorial {
  background: #c7ad8a url(../images/main/main-bg.png) repeat center top / 100% auto;
}


.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 4.6875vw;
}

.main-visual {
  background:
    url(../images/main/visual-bg.png) no-repeat center top / 100% auto,
    #c7ad8a url(../images/main/main-bg.png) repeat center top / 100% auto;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.main-visual .container {
  position: relative;
}

.main-visual .intro {
  --reveal: 0.75s; /* 문구·버튼 페이드 시간 */
  --cta-delay: 0.26s; /* 버튼이 문구를 뒤따르는 간격 */
  --arrow-lag: 0.3s; /* 버튼이 뜨기 시작한 뒤 화살표가 그어지기까지 */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* 페이드 가속 곡선 */
  padding: 27.5vw 0 21.875vw;
}

.main-visual .intro .desc,
.main-visual .intro .action {
  animation: intro_reveal var(--reveal) var(--ease) both paused;
}

.main-visual .intro .action {
  animation-delay: var(--cta-delay);
}

.main-visual .intro.animation .desc,
.main-visual .intro.animation .action,
.main-visual .intro.animation .action .button .line::before,
.main-visual .intro.animation .action .button .line::after {
  animation-play-state: running;
}

.main-visual .intro .texture {
  --play: paused; /* 붓글씨·나비의 재생 여부 */
  --cycle: 3s; /* 붓글씨 획이 다 그려지기까지 걸리는 시간 */
  --ink-end: 0.748; /* 마지막 획이 완성되는 시점 — --cycle 대비 비율 */
  --seq-gap: -0.15s; /* 획 완성 대비 문구 등장 시점 — 음수면 앞당김 */
  --bf-gap: -0.26s; /* 획 완성 대비 나비 등장 시점 */
  --bf-fly: 1.35s; /* 나비가 내려앉기까지 */
  --bf-wing: 1.95s; /* 날갯짓이 잦아들기까지 */
  --bf-start: calc(var(--cycle) * var(--ink-end) + var(--bf-gap)); /* 나비 등장 시각 */
  --bf-route: 10s; /* 스크롤 진행도에 감기는 비행 전체 길이 */
  --bf-loop: 1.1s; /* 비행 중 날갯짓 한 번 */
  --bf-rest: 0.8s; /* 내려앉은 자리에서 날갯짓이 잦아들기까지 */
  --bf-idle: 6s; /* 내려앉은 뒤 저절로 날갯짓하는 주기 */
  position: relative;
  width: 81.25vw;
  margin: 0 auto;
  aspect-ratio: 571/382;
}

.main-visual .intro.ready .texture {
  --play: running;
}

.main-visual .intro .texture .calli {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.main-visual .intro .texture .mult {
  mix-blend-mode: multiply;
}

.main-visual .intro .texture .scr {
  mix-blend-mode: screen;
}

.main-visual .intro .texture .path {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100 300;
  stroke-dashoffset: 100.6;
  animation-duration: var(--cycle);
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  animation-play-state: var(--play);
}

.main-visual .intro .texture .butterfly {
  position: absolute;
  left: 66%;
  top: -13.4375vw;
  width: 32%;
  aspect-ratio: 207/220;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: bf_in 0.5s ease-out var(--bf-start) forwards;
  animation-play-state: var(--play);
}

.main-visual .intro .texture .butterfly .route-x,
.main-visual .intro .texture .butterfly .route-y,
.main-visual .intro .texture .butterfly .route-z,
.main-visual .intro .texture .butterfly .route-tilt,
.main-visual .intro .texture .butterfly .fly-x,
.main-visual .intro .texture .butterfly .fly-y,
.main-visual .intro .texture .butterfly .tilt,
.main-visual .intro .texture .butterfly .lean {
  width: 100%;
  height: 100%;
  will-change: transform;
}

.main-visual .intro .texture .butterfly .route-x {
  animation: bf_route_x var(--bf-route) linear both paused;
}

.main-visual .intro .texture .butterfly .route-y {
  animation: bf_route_y var(--bf-route) linear both paused;
}

.main-visual .intro .texture .butterfly .route-z {
  animation: bf_route_z var(--bf-route) linear both paused;
}

.main-visual .intro .texture .butterfly .route-tilt {
  animation: bf_route_tilt var(--bf-route) linear both paused;
}

.main-visual .intro .texture .butterfly .fly-x {
  animation: bf_x var(--bf-fly) cubic-bezier(0.45, 0, 0.2, 1) var(--bf-start) both;
  animation-play-state: var(--play);
}

.main-visual .intro .texture .butterfly .fly-y {
  animation: bf_y var(--bf-fly) cubic-bezier(0.15, 0.6, 0.3, 1) var(--bf-start) both;
  animation-play-state: var(--play);
}

.main-visual .intro .texture .butterfly .tilt {
  perspective: 46.875vw;
  perspective-origin: 61.8% 39.9%;
  animation: bf_tilt var(--bf-fly) cubic-bezier(0.25, 0.7, 0.3, 1) var(--bf-start) both;
  animation-play-state: var(--play);
}

.main-visual .intro .texture .butterfly .lean {
  transform-style: preserve-3d;
  animation: bf_route_lean var(--bf-route) linear both paused;
}

.main-visual .intro .texture .butterfly .shade {
  position: absolute;
  inset: 0;
  background: url(../images/main/butterfly.png) no-repeat center / 100% 100%;
  filter: brightness(0) blur(4px);
  opacity: 0.3;
  transform: translate(9%, 13%) scale(0.94);
  animation: bf_shade var(--bf-fly) cubic-bezier(0.25, 0.7, 0.3, 1) var(--bf-start) both;
  animation-play-state: var(--play);
}

.main-visual .intro .texture .butterfly .frame {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.main-visual .intro .texture .butterfly .wing {
  position: absolute;
  inset: 0;
  background: url(../images/main/butterfly.png) no-repeat center / 100% 100%;
  transform-origin: 61.8% 39.9%;
  will-change: transform;
}

.main-visual .intro .texture .butterfly .wing.left {
  clip-path: polygon(-20% 76.4%, 120% 15.6%, 120% -20%, -20% -20%);
  animation: bf_flap_left var(--bf-wing) ease-in-out var(--bf-start) both;
  animation-play-state: var(--play);
}

.main-visual .intro .texture .butterfly .wing.right {
  clip-path: polygon(-20% 74.4%, 120% 13.6%, 120% 120%, -20% 120%);
  animation: bf_flap_right var(--bf-wing) ease-in-out var(--bf-start) both;
  animation-play-state: var(--play);
}

.main-visual .intro .texture .butterfly.flying .wing.left {
  animation: bf_wing_left var(--bf-loop) ease-in-out infinite;
}

.main-visual .intro .texture .butterfly.flying .wing.right {
  animation: bf_wing_right var(--bf-loop) ease-in-out infinite;
}

.main-visual .intro .texture .butterfly.perched .wing.left {
  animation:
    bf_rest_left var(--bf-rest) ease-out both,
    bf_idle_left var(--bf-idle) ease-in-out var(--bf-rest) infinite;
}

.main-visual .intro .texture .butterfly.perched .wing.right {
  animation:
    bf_rest_right var(--bf-rest) ease-out both,
    bf_idle_right var(--bf-idle) ease-in-out var(--bf-rest) infinite;
}

.main-visual .intro .desc {
  font-family: var(--maruburi);
  font-size: 4.75vw;
  line-height: 7.5vw;
  letter-spacing: -0.03em;
  margin-top: 4.0625vw;
  color: #2f2117;
  opacity: 0.8;
  text-align: center;
  transform: rotate(0.03deg);
}

.main-visual .intro .action {
  margin-top: 5.3125vw;
  display: flex;
  justify-content: center;
}

.main-visual .intro .action .button {
  font-family: var(--maruburi);
  border-radius: 4.6875vw 1.25vw 4.6875vw 1.25vw;
  width: 65.9375vw;
  height: 11.25vw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.875vw;
  padding: 0;
  background: #412e21;
  color: #ffffff;
  font-size: 4vw;
  letter-spacing: -0.02em;
  box-shadow: 0 2px 6px rgba(65, 46, 33, 0.18);
  transform: rotate(0.03deg);
}

.main-visual .intro .action .button .line {
  --draw: 0.9s; /* 화살표가 한 획으로 그어지는 시간 */
  position: relative;
  width: 7.1875vw;
  height: 2.1875vw;
  opacity: 0.8;
}

.main-visual .intro .action .button .line::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0.3125vw;
  background-color: currentColor;
  animation: line_body var(--draw) ease-in-out calc(var(--cta-delay) + var(--arrow-lag)) both paused;
}

.main-visual .intro .action .button .line::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 2.5vw;
  height: 0.3125vw;
  background-color: currentColor;
  transform-origin: 100% 100%;
  transform: rotate(45deg) scaleX(0);
  animation: line_head var(--draw) ease-in-out calc(var(--cta-delay) + var(--arrow-lag)) both paused;
}

.main-visual .story {
  position: relative;
  z-index: 1;
  padding: 13.125vw 0 6.25vw;
}

.main-visual .story::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3.59375vw;
  z-index: 2;
  width: 100%;
  height: 172.96875vw;
  background: url(../images/main/story-bg.png) no-repeat 0 0 / 100% 100%;
  opacity: 0.17;
  pointer-events: none;
}

.main-visual .story .story-item {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
}

.main-visual .story .story-item.item-02 {
  flex-direction: column;
}

.main-visual .story .story-item .flower {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: -18.72vw;
  transform: translateX(31.16vw);
  z-index: 2;
}

.main-visual .story .story-item.item-02 .flower {
  margin-bottom: -4.7vw;
  transform: translateX(-29.84vw);
}

.main-visual .story .story-item .flower img {
  pointer-events: none;
}

.main-visual .story .story-item .flower .bloom {
  position: relative;
  width: 36.46vw;
  aspect-ratio: 232/267;
}

.main-visual .story .story-item .flower .sprout {
  position: absolute;
  left: -14.4vw;
  top: -2.55vw;
  width: 26.16vw;
  aspect-ratio: 164/157;
}

.main-visual .story .story-item .flower .bud {
  position: relative;
  width: 26.47vw;
  aspect-ratio: 251/194;
}

.main-visual .story .story-item .content {
  position: relative;
  width: 87.5vw;
  padding: 11.25vw 8.3125vw 10vw;
  background: url(../images/main/story-content.png) no-repeat center / 100% 100%;
}

.main-visual .story .story-item.item-02 .content {
  padding-bottom: 8.75vw;
}

.main-visual .story .story-item .content::before,
.main-visual .story .story-item .content::after {
  content: '';
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

.main-visual .story .story-item .box:not(.left) .content::before {
  left: -8.41vw;
  bottom: -3.11vw;
  width: 91.26vw;
  height: 55.14vw;
  background-image: url(../images/main/story-bottom-left.png);
}

.main-visual .story .story-item .box:not(.left) .content::after {
  right: -3.75vw;
  top: -5.82vw;
  width: 52.81vw;
  height: 55.14vw;
  background-image: url(../images/main/story-top_right.png);
}

.main-visual .story .story-item .box.left .content::before {
  right: -9.45vw;
  bottom: -8.67vw;
  width: 97.99vw;
  height: 64.33vw;
  background-image: url(../images/main/story-bottom-right.png);
}

.main-visual .story .story-item .box.left .content::after {
  left: -9.32vw;
  top: -6.86vw;
  width: 97.99vw;
  height: 64.33vw;
  background-image: url(../images/main/story-top_left.png);
}

.main-visual .story .story-item .content p {
  position: relative;
  z-index: 1;
  font-family: var(--maruburi);
  font-size: 3.75vw;
  line-height: 5.625vw;
  letter-spacing: -0.03em;
  color: #222222;
  text-align: center;
  transform: rotate(0.03deg);
}

.main-visual .story .story-item .content p + p {
  margin-top: 5vw;
}

.main-visual .story .story-item .content p.ready {
  opacity: 0.15;
  filter: blur(4px);
}

.main-visual .story .story-item .content p.animation {
  animation: ink_focus 0.75s ease-out both;
}

.main-visual .message {
  position: relative;
  padding: 49.21875vw 0 49.0625vw;
}

.main-visual .message::before {
  content: '';
  position: absolute;
  left: 0;
  top: -6.40625vw;
  z-index: -1;
  width: 100%;
  height: 88.4375vw;
  background: url(../images/main/message-wreath_top.png) no-repeat center / 100% 100%;
  pointer-events: none;
}

.main-visual .message .head .title {
  font-family: var(--maruburi);
  font-size: 5.9375vw;
  line-height: 9.375vw;
  letter-spacing: -0.03em;
  color: #412e21;
  text-align: center;
  transform: rotate(0.03deg);
}

.main-visual .message .head .desc {
  font-family: var(--maruburi);
  font-size: 4vw;
  line-height: 7.25vw;
  letter-spacing: -0.03em;
  margin-top: 3.28125vw;
  color: #2f2117;
  opacity: 0.8;
  text-align: center;
  transform: rotate(0.03deg);
}

.main-visual .message .card {
  position: relative;
  margin: 6.25vw 0 0;
}

.main-visual .message .card-empty {
  margin: 6.25vw 0 0;
  padding: 18.75vw 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4.0625vw;
  color: #222;
  font-weight: 500;
}

.main-visual .message .card::before,
.main-visual .message .card::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  width: calc((100% - 2.8125vw) / 2);
  height: 71.09375vw;
  border-radius: 4.6875vw;
  box-shadow:
    2px 3px 15px rgba(65, 46, 33, 0.16),
    1px 2px 8px rgba(65, 46, 33, 0.1);
}

.main-visual .message .card::before {
  left: 0;
  clip-path: inset(-21px 100% -21px -21px);
}

.main-visual .message .card::after {
  right: 0;
  clip-path: inset(-21px -21px -21px 100%);
}

.main-visual .message .card .swiper-container {
  overflow: visible;
  clip-path: inset(-15px 0 -21px);
}

.main-visual .message .card .swiper-slide {
  width: calc((100% - 2.8125vw) / 2);
  margin-right: 2.8125vw;
  overflow: hidden;
}

.main-visual .message .card .paper {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
  width: 100%;
  height: 71.09375vw;
  padding: 0.46875vw 4.6875vw 5.46875vw;
  border-radius: 6.275vw;
  background: url(../images/main/message-card-bg.png) no-repeat center / 100% 100%;
  box-shadow:
    2px 3px 15px rgba(65, 46, 33, 0.16),
    1px 2px 8px rgba(65, 46, 33, 0.1);
  cursor: pointer;
}

.main-visual .message .card .paper .flower {
  display: block;
  width: 23.4375vw;
  margin: 0 auto -1.875vw;
}

.main-visual .message .card .paper .to,
.main-visual .message .card .paper .from {
  font-family: var(--maruburi);
  font-weight: 500;
  font-size: 3.125vw;
  line-height: 4.375vw;
  letter-spacing: -0.02em;
  color: #5b524d;
  text-align: left;
  transform: rotate(0.03deg);
}

.main-visual .message .card .paper .from {
  margin-top: auto;
  text-align: right;
}

.main-visual .message .card .paper .text {
  margin-top: 1.40625vw;
  padding: 5.859375vw 0;
  background-image:
    url(../images/main/message-quotes_top.png), url(../images/main/message-quotes_bottom.png);
  background-position:
    left top,
    right bottom;
  background-repeat: no-repeat;
  background-size:
    5.9375vw auto,
    5.9375vw auto;
}

.main-visual .message .card .paper .text .inner {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  width: 100%;
  transform: rotate(0.03deg);
  font-family: var(--maruburi);
  font-weight: 600;
  font-size: 4.0625vw;
  line-height: 6.25vw;
  letter-spacing: -0.03em;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
  color: #222222;
  text-align: center;
  min-width: 100%;
}

.message-modal::backdrop {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: none;
}

.message-modal > .panel {
  width: 90.625vw;
  max-width: none;
  height: 70vw;
  max-height: none;
  display: flex;
  flex-direction: column;
  padding: 4.6875vw 4.6875vw 5.625vw;
  background: url(../images/main/message-modal-bg.png) no-repeat center / 100% 100%;
  filter: drop-shadow(0 5px 7px rgba(65, 46, 33, 0.28));
  font-family: var(--maruburi);
  color: #5b524d;
  border-radius: 6.25vw;
  gap: 0;
  transform: rotate(0.03deg);
}

.message-modal .to,
.message-modal .from {
  font-size: 3.4375vw;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 3.75vw;
  transform: rotate(0.03deg);
}

.message-modal .to {
  margin-top: 1.40625vw;
}

.message-modal .message-modal-flower {
  display: flex;
  justify-content: center;
  margin-top: -7.96875vw;
}

.message-modal .flower {
  width: 25.625vw;
}

.message-modal .text {
  display: flex;
  align-items: safe center;
  justify-content: center;
  flex: none;
  margin-top: -0.9375vw;
  height: 18.75vw;
  overflow-y: auto;
  overscroll-behavior: contain;
  outline: none;
  font-size: 3.75vw;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 6.25vw;
  color: #222222;
  text-align: center;
}

.message-modal .from {
  align-self: flex-end;
  margin-top: auto;
}

.message-modal > .panel > .close {
  position: absolute;
  inset-inline-end: 4.6875vw;
  top: 4.6875vw;
  width: 8.28125vw;
  height: 8.28125vw;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  color: #ffffff;
  opacity: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.message-modal .close .size-message-close {
  width: 4.6875vw;
  height: 4.6875vw;
  fill: currentColor;
}

.main-visual .message .card .nav {
  position: absolute;
  z-index: 1;
  top: 31.40625vw;
  width: 8.28125vw;
  height: 8.28125vw;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #39281f;
  cursor: pointer;
}

.main-visual .message .card .nav.prev {
  left: -4.53125vw;
}

.main-visual .message .card .nav.next {
  right: -4.53125vw;
}

.main-visual .message .card .nav svg {
  display: block;
  width: 5.625vw;
  height: 5.625vw;
  fill: #ffffff;
  opacity: 0.9;
}

.main-visual .message .card .nav.prev svg {
  transform: scaleX(-1);
}

.main-visual .message .action {
  --seat: 1.2s; /* 나비가 버튼 위로 내려앉기까지 */
  --idle: 6s; /* 앉은 뒤 저절로 날갯짓하는 주기 */
  position: relative;
  margin-top: 16px; /* 화면 너비와 무관하게 버튼 위 여백을 고정한다 */
  display: flex;
  justify-content: center;
}

.main-visual .message .action .button {
  font-family: var(--maruburi);
  border-radius: 4.6875vw 1.25vw 4.6875vw 1.25vw;
  width: 57.5vw;
  height: 11.875vw;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #412e21;
  color: #ffffff;
  font-size: 4vw;
  letter-spacing: -0.02em;
  box-shadow: 0 2px 6px rgba(65, 46, 33, 0.18);
  transform: rotate(0.03deg);
}

.main-visual .message .action .butterfly {
  position: absolute;
  left: 50%;
  bottom: 4.0625vw;
  margin-left: 21.5625vw;
  width: 10.9375vw;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(5px 7px 3px rgba(48, 33, 23, 0.5));
}

.main-visual .message .action .butterfly img {
  display: block;
  width: 100%;
  transform-origin: 39% 59%;
}

.main-visual .message .action.settled .butterfly {
  animation: bf_seat var(--seat) linear both;
}

.main-visual .message .action.settled .butterfly img {
  animation:
    bf_seat_wing var(--seat) ease-in-out both,
    bf_seat_idle var(--idle) ease-in-out var(--seat) infinite;
}

.main-visual .message .container > .desc {
  margin-top: 3.28125vw;
  text-align: center;
}

.main-visual .message .container > .desc small {
  display: block;
  font-family: var(--maruburi);
  font-size: 3.425vw;
  line-height: 5.2875vw;
  letter-spacing: -0.03em;
  color: #2f2117;
  opacity: 0.9;
  transform: rotate(0.03deg);
}

.main-visual .message .container > .desc p {
  margin-top: 5.78125vw;
  font-family: var(--maruburi);
  font-size: 4vw;
  line-height: 7.25vw;
  letter-spacing: -0.03em;
  color: #412e21;
  transform: rotate(0.03deg);
}

.main-contents {
  position: relative;
  z-index: 2;
  background: #d8c3a8 url(../images/main/contents-tile.png) repeat center top / 100% auto;
}

.main-contents::before {
  content: '';
  position: absolute;
  left: 0;
  top: -77.65625vw;
  z-index: -1;
  width: 100%;
  height: 102.03125vw;
  background:
    url(../images/main/message-wreath_bottom.png) no-repeat center top / 100% auto,
    url(../images/main/reward-top.png) no-repeat center bottom / 100% auto;
  pointer-events: none;
}

.main-contents::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 100%;
  z-index: -2;
  width: 100%;
  height: 3.75vw;
  background: #d8c3a8 url(../images/main/contents-tile.png) repeat center bottom / 100% auto;
  pointer-events: none;
}

.main-contents .reward {
  position: relative;
  padding: 15.625vw 0 19.6875vw;
}

.main-contents .reward .head .title {
  font-family: var(--maruburi);
  font-size: 6.25vw;
  line-height: 9.375vw;
  letter-spacing: -0.03em;
  color: #412e21;
  text-align: center;
  transform: rotate(0.03deg);
}

.main-contents .reward .head .desc {
  font-family: var(--maruburi);
  font-size: 4vw;
  line-height: 7.25vw;
  letter-spacing: -0.03em;
  margin-top: 3.4375vw;
  color: #2f2117;
  opacity: 0.9;
  text-align: center;
  transform: rotate(0.03deg);
}

.main-contents .reward .showcase {
  position: relative;
}

.main-contents .reward .showcase .deco {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
}

.main-contents .reward .showcase .deco .leaf {
  position: absolute;
  background: no-repeat center / 100% 100%;
  opacity: 0;
  animation-duration: 1.2s;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  animation-fill-mode: both;
  animation-play-state: paused;
}

.main-contents .reward .showcase .deco .leaf.right {
  left: 68.125vw;
  top: -6.40625vw;
  width: 31.875vw;
  height: 50vw;
  background-image: url(../images/main/reward-leaf_right.png);
  opacity: 1;
  animation: none;
}

.main-contents .reward .showcase .deco .leaf.one {
  left: 5.46875vw;
  top: 3.4375vw;
  width: 14.375vw;
  height: 14.84375vw;
  background-image: url(../images/main/reward-leaf01.png);
}

.main-contents .reward .showcase .deco .leaf.five {
  left: 84.0625vw;
  top: 68.125vw;
  width: 10.3125vw;
  height: 7.34375vw;
  background-image: url(../images/main/reward-leaf05.png);
}

.main-contents .reward .showcase .deco .leaf.two {
  left: 10.3125vw;
  top: 75.625vw;
  width: 6.25vw;
  height: 6.40625vw;
  background-image: url(../images/main/reward-leaf02.png);
}

.main-contents .reward .showcase .deco .leaf.four {
  left: 68.75vw;
  top: 81.40625vw;
  width: 12.96875vw;
  height: 7.65625vw;
  background-image: url(../images/main/reward-leaf04.png);
}

.main-contents .reward .showcase .deco .leaf.three {
  left: 31.40625vw;
  top: 83.28125vw;
  width: 6.25vw;
  height: 6.40625vw;
  background-image: url(../images/main/reward-leaf03.png);
}

.main-contents .reward .showcase .deco .leaf.six {
  left: 5.9375vw;
  top: 162.65625vw;
  width: 12.1875vw;
  height: 8.125vw;
  background-image: url(../images/main/reward-leaf06.png);
}

.main-contents .reward .showcase .deco .leaf.one,
.main-contents .reward .showcase .deco .leaf.six {
  animation-name: reward_bit_a;
}

.main-contents .reward .showcase .deco .leaf.five {
  animation-name: reward_bit_b;
  animation-delay: 0.12s;
}

.main-contents .reward .showcase .deco .leaf.two,
.main-contents .reward .showcase .deco .leaf.three {
  animation-name: reward_bit_c;
  animation-delay: 0.24s;
}

.main-contents .reward .showcase .deco .leaf.four {
  animation-name: reward_bit_d;
  animation-delay: 0.36s;
}

.main-contents .reward.animation .showcase .deco .leaf {
  animation-play-state: running;
}

.main-contents .reward .showcase .log-list {
  margin-top: 5.71875vw;
}

.main-contents .reward .showcase .log-list .log-item {
  position: relative;
  width: 85.3125vw;
  margin: 0 auto;
}

.main-contents .reward .showcase .log-list .log-item:nth-child(2) {
  width: 89.0625vw;
}

.main-contents .reward .showcase .log-list .log-item .disc {
  display: block;
  width: 100%;
}

.main-contents .reward .showcase .log-list .log-item .sprig {
  position: absolute;
  z-index: 3;
  left: 8.28125vw;
  top: 34.375vw;
  width: 28.125vw;
  height: 44.84375vw;
  background: url(../images/main/reward-leaf_log.png) no-repeat center / 100% 100%;
  opacity: 0;
  animation: reward_in_left 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) 0.6s both paused;
}

.main-contents .reward .showcase .log-list .log-item:nth-child(2) .sprig {
  z-index: 1;
  left: 45.625vw;
  top: 25.15625vw;
  width: 47.1875vw;
  height: 61.25vw;
  background-image: url(../images/main/reward-leaf_log2.png);
  animation-name: reward_in_right;
}

.main-contents .reward .showcase .log-list .log-item .doc {
  position: absolute;
  z-index: 2;
  left: 17.96875vw;
  top: 2.03125vw;
  width: 59.6875vw;
  opacity: 0;
  animation: reward_in_right 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) 0.6s both paused;
}

.main-contents .reward .showcase .log-list .log-item .flower {
  position: absolute;
  z-index: 2;
  left: 9.53125vw;
  top: 3.28125vw;
  width: 76.09375vw;
  opacity: 0;
  animation: reward_in_left 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) 0.6s both paused;
}

.main-contents .reward .showcase .log-list .log-item.animation .sprig,
.main-contents .reward .showcase .log-list .log-item.animation .doc,
.main-contents .reward .showcase .log-list .log-item.animation .flower {
  animation-play-state: running;
}

.main-contents .reward .showcase .explain {
  margin-top: 3.125vw;
  text-align: center;
}

.main-contents .reward .showcase .explain p {
  font-family: var(--maruburi);
  font-size: 4vw;
  line-height: 7.25vw;
  letter-spacing: -0.03em;
  color: #412e21;
  transform: rotate(0.03deg);
}

.main-contents .reward .showcase .explain small {
  display: block;
  margin-top: 1.5625vw;
  font-family: var(--maruburi);
  font-size: 3.4125vw;
  line-height: 4.6875vw;
  letter-spacing: -0.03em;
  color: #412e21;
  opacity: 0.9;
  transform: rotate(0.03deg);
}

.main-contents .reward .showcase .display {
  position: relative;
  margin-top: 9.375vw;
  overflow: hidden;
}

.main-contents .reward .showcase .display .swiper-container {
  --dur: 0ms; /* 카드가 모양을 바꾸는 시간 — 스크립트가 슬라이드 이동 시간에 맞춘다 */
}

.main-contents .reward .showcase .display .swiper-slide {
  --shift: 0vw; /* 중앙에서 떨어진 카드가 안쪽으로 비키는 거리 */
  --scale: 1; /* 중앙에서 멀수록 작아지는 배율 */
  --off: 1; /* 중앙에서 벗어난 정도 — 어둡기·흐림·확대와 하단 그림자를 함께 정한다 */
  position: relative;
  width: 58.4375vw;
  margin: 0 2.34375vw;
  overflow: hidden;
  border-radius: 3.125vw;
  box-shadow:
    2px 3px 15px rgba(0, 0, 0, 0.2),
    1px 2px 8px rgba(0, 0, 0, 0.2);
  transform: translateX(var(--shift)) scale(var(--scale));
  transition: transform var(--dur) cubic-bezier(0.22, 0.61, 0.36, 1);
}

.main-contents .reward .showcase .display .swiper-slide img {
  display: block;
  width: 100%;
  height: 73.4375vw;
  object-fit: cover;
  filter: brightness(calc(1 - var(--off) * 0.38)) blur(calc(var(--off) * 2px));
  transform: scale(calc(1 + var(--off) * 0.12));
  transition:
    transform var(--dur) cubic-bezier(0.22, 0.61, 0.36, 1),
    filter var(--dur) cubic-bezier(0.22, 0.61, 0.36, 1);
}

.main-contents .reward .showcase .display .swiper-slide::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 25vw;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.65),
    rgba(0, 0, 0, 0.35) 45%,
    rgba(0, 0, 0, 0)
  );
  opacity: calc(1 - var(--off));
  pointer-events: none;
  transition: opacity var(--dur) cubic-bezier(0.22, 0.61, 0.36, 1);
}

.main-contents .reward .showcase .display .swiper-slide-active {
  z-index: 2;
}

.main-contents .reward .showcase .display .control {
  position: absolute;
  z-index: 2;
  right: calc(50% - 26.25vw);
  bottom: calc(var(--floor, 0px) + 4.6875vw);
  display: flex;
  align-items: center;
  gap: 1.5625vw;
}

.main-contents .reward .showcase .display .control .nav {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8.28125vw;
  height: 8.28125vw;
  margin: 0;
  padding: 0;
  border: 0;
  background: #412e21;
  cursor: pointer;
}

.main-contents .reward .showcase .display .control .nav svg {
  display: block;
  width: 5.625vw;
  height: 5.625vw;
  fill: #ffffff;
  opacity: 0.85;
}

.main-contents .reward .showcase .display .control .nav.prev svg {
  transform: scaleX(-1);
}

.main-contents .reward .showcase .display .control .count {
  position: static;
  width: 8.75vw;
  font-family: var(--maruburi);
  font-size: 3.4375vw;
  letter-spacing: 0.02em;
  line-height: 1;
  color: #ffffff;
  opacity: 0.85;
  text-align: center;
  transform: rotate(0.03deg);
}

.main-contents .memory {
  position: relative;
  padding: 13.75vw 0 25.3125vw;
}

.main-contents .memory::after {
  content: '';
  position: absolute;
  z-index: -2;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16.25vw;
  background: url(../images/main/qna-bg.png) no-repeat center top / 100% auto;
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.8) 43%,
    #000 73%
  );
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 43%, #000 73%);
}

.main-contents .memory .deco {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
}

.main-contents .memory .deco span {
  animation-duration: 1.4s;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  animation-fill-mode: both;
  animation-play-state: paused;
}

.main-contents .memory .deco .shadow {
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.main-contents .memory .deco .shadow.left {
  left: 0;
  bottom: 66.875vw;
  width: 65vw;
  height: 167.5vw;
  background-image: url(../images/main/memory-shadow_left.png);
}

.main-contents .memory .deco .shadow.right {
  right: 0;
  bottom: 71.5625vw;
  width: 48.59375vw;
  height: 69.6875vw;
  background-image: url(../images/main/memory-shadow_right.png);
}

.main-contents .memory .deco .flower {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -19.0625vw;
  height: 97.03125vw;
  background: url(../images/main/memory-bg.png) no-repeat center bottom / 100% auto;
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 18.125vw, #000 24.375vw);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 18.125vw, #000 24.375vw);
}

.main-contents .memory .deco::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10.15625vw;
  height: 18.75vw;
  background: linear-gradient(
    to bottom,
    rgba(65, 46, 33, 0),
    rgba(65, 46, 33, 0.4) 55%,
    rgba(65, 46, 33, 0)
  );
}

.main-contents .memory .deco .butterfly {
  position: absolute;
  perspective: 34.375vw;
  opacity: 0;
  animation-name: memory_deco_in;
}

.main-contents .memory .deco .butterfly .shade,
.main-contents .memory .deco .butterfly .frame {
  position: absolute;
  inset: 0;
}

.main-contents .memory .deco .butterfly .frame {
  transform-style: preserve-3d;
  animation-name: memory_bf_drift;
  animation-duration: var(--bf-drift);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

.main-contents .memory .deco .butterfly .shade {
  filter: brightness(0) blur(4px);
  opacity: 0.24;
  translate: 8% 12%;
  scale: 0.94;
  animation-name: memory_bf_cast;
  animation-duration: var(--bf-flap);
  animation-delay: var(--bf-phase);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

.main-contents .memory .deco .butterfly .wing {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  will-change: transform;
  animation-duration: var(--bf-flap);
  animation-delay: var(--bf-phase);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

.main-contents .memory.animation .deco .butterfly,
.main-contents .memory.animation .deco .butterfly .shade,
.main-contents .memory.animation .deco .butterfly .frame,
.main-contents .memory.animation .deco .butterfly .wing {
  animation-play-state: running;
}

.main-contents .memory .deco .butterfly.title {
  --bf-flap: 3.4s; /* 날갯짓 한 번 */
  --bf-phase: -1.1s; /* 두 나비가 서로 다른 박자로 접히게 하는 위상 차 */
  --bf-drift: 7.2s; /* 몸이 한 번 오르내리기까지 */
  left: 79.375vw;
  top: 3.4375vw;
  width: 19.375vw;
  aspect-ratio: 159/171;
  perspective-origin: 28% 69%;
}

.main-contents .memory .deco .butterfly.title .wing {
  background-image: url(../images/main/memory-butterfly01.png);
  transform-origin: 28% 69%;
}

.main-contents .memory .deco .butterfly.title .wing.left {
  clip-path: polygon(21.9% -20%, 33.9% 120%, -20% 120%, -20% -20%);
  animation-name: memory_bf_soft_left, memory_bf_dim;
}

.main-contents .memory .deco .butterfly.title .wing.right {
  clip-path: polygon(20.4% -20%, 32.4% 120%, 120% 120%, 120% -20%);
  animation-name: memory_bf_soft_right, memory_bf_lit;
}

.main-contents .memory .deco .butterfly.left {
  --bf-flap: 4.2s; /* 날갯짓 한 번 */
  --bf-phase: -2.4s; /* 두 나비가 서로 다른 박자로 접히게 하는 위상 차 */
  --bf-drift: 8.6s; /* 몸이 한 번 오르내리기까지 */
  left: 3.75vw;
  top: 37.375vw;
  width: 20vw;
  aspect-ratio: 235/203;
  perspective-origin: 55% 67%;
}

.main-contents .memory .deco .butterfly.left .wing {
  background-image: url(../images/main/memory-butterfly02.png);
  transform-origin: 55% 67%;
}

.main-contents .memory .deco .butterfly.left .wing.left {
  clip-path: polygon(47.1% -20%, 59.8% 120%, -20% 120%, -20% -20%);
  animation-name: memory_bf_left, memory_bf_lit;
}

.main-contents .memory .deco .butterfly.left .wing.right {
  clip-path: polygon(45.6% -20%, 58.3% 120%, 120% 120%, 120% -20%);
  animation-name: memory_bf_right, memory_bf_dim;
}

.main-contents .memory .head .title {
  font-family: var(--maruburi);
  font-size: 6.09375vw;
  line-height: 10.9375vw;
  letter-spacing: -0.03em;
  color: #412e21;
  text-align: center;
  transform: rotate(0.03deg);
}

.main-contents .memory .voice {
  position: relative;
  margin-top: 9.0625vw;
}

.main-contents .memory .voice .swiper-container {
  margin: 0 -4.6875vw;
  padding: 0 4.6875vw;
  border-radius: 4.6875vw 0 0 4.6875vw;
  width: auto;
  min-height: 100%;
}

.main-contents .memory .voice .swiper-slide {
  width: calc(100% - 4.375vw);
  margin-right: 4.375vw;
}

.main-contents .memory .voice .item {
  position: relative;
  height: 66.25vw;
  padding: 12.8125vw 5.625vw 0 10.9375vw;
  border-radius: 7.5vw;
  background: url(../images/main/memory-card-bg.png) no-repeat center / 100% 100%;
  box-shadow:
    2px 3px 20px rgba(65, 46, 33, 0.16),
    1px 2px 8px rgba(65, 46, 33, 0.1);
}

.main-contents .memory .voice .item::before,
.main-contents .memory .voice .item::after {
  content: '';
  position: absolute;
  width: 6.71875vw;
  height: 4.0625vw;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.main-contents .memory .voice .item::before {
  left: 5.46875vw;
  top: 7.03125vw;
  background-image: url(../images/main/memory-quotes_top.png);
}

.main-contents .memory .voice .item::after {
  left: 74.0625vw;
  top: 45.625vw;
  background-image: url(../images/main/memory-quotes_bottom.png);
}

.main-contents .memory .voice .item .text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  height: 31.25vw;
  font-family: var(--maruburi);
  font-size: 3.75vw;
  line-height: 6.25vw;
  letter-spacing: -0.02em;
  color: #222222;
  word-break: keep-all;
  transform: rotate(0.03deg);
}

.main-contents .memory .voice .item .name {
  margin-top: 7.8125vw;
  font-family: var(--maruburi);
  font-size: 3.125vw;
  line-height: 4.375vw;
  letter-spacing: -0.02em;
  color: #232323;
  word-break: keep-all;
  transform: rotate(0.03deg);
}

.main-contents .memory .action {
  position: relative;
  margin-top: 10vw;
  display: flex;
  justify-content: center;
}

.main-contents .memory .action .button {
  font-family: var(--maruburi);
  border-radius: 4.6875vw 1.25vw 4.6875vw 1.25vw;
  width: 56.875vw;
  height: 11.25vw;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #412e21;
  color: #ffffff;
  font-size: 4vw;
  letter-spacing: -0.02em;
  box-shadow: 0 2px 6px rgba(65, 46, 33, 0.18);
  transform: rotate(0.03deg);
}

.main-qna {
  margin-top: -16.25vw;
  padding: 32.8125vw 0 21.875vw;
  background: #877257 url(../images/main/qna-bg.png) repeat-y center top / 100% auto;
}

.main-qna .qna-list .qna-item + .qna-item {
  margin-top: 2.5vw;
}

.main-qna .qna-list .qna-item .question {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  width: 100%;
  min-height: 16.875vw;
  padding: 2.3vw 14.375vw 2.3vw 12.5vw;
  border-radius: 5vw;
  background: #3e2f22;
  box-shadow: 0 4px 9px rgba(0, 0, 0, 0.32);
  text-align: left;
  cursor: pointer;
}

.main-qna .qna-list .qna-item .question::before {
  content: '';
  position: absolute;
  left: 1.5625vw;
  top: 33%;
  width: 8.75vw;
  height: 8.75vw;
  margin-top: -4.375vw;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.28) url(../images/main/qna-title-icon.png) no-repeat center / 3.75vw
    auto;
}

.main-qna .qna-list .qna-item .question .num,
.main-qna .qna-list .qna-item .question .text {
  font-family: var(--maruburi);
  font-size: 4.375vw;
  line-height: 6.25vw;
  letter-spacing: -0.02em;
  color: #ffffff;
  word-break: keep-all;
  transform: rotate(0.03deg);
}

.main-qna .qna-list .qna-item .question .num {
  flex-shrink: 0;
  margin-right: 2.5vw;
}

.main-qna .qna-list .qna-item .question .arrow {
  position: absolute;
  right: 4.375vw;
  top: 32%;
  width: 5.625vw;
  height: 2.5vw;
  margin-top: -1.25vw;
  background: url(../images/main/qna-arrow.png) no-repeat center / 100% 100%;
  transform: rotate(180deg);
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.main-qna .qna-list .qna-item.active .question .arrow {
  transform: rotate(0);
}

.main-qna .qna-list .qna-item .fold {
  display: none;
  margin-top: -3.90625vw;
  border-radius: 2.5vw;
}

.main-qna .qna-list .qna-item.active .fold {
  display: block;
}

.main-qna .qna-list .qna-item .answer {
  position: relative;
  padding: 8.75vw 10.625vw 5.625vw 12.5vw;
  background: url(../images/main/qna-item-bg.png) no-repeat center / 100% 100%;
  border-radius: 0 0 2.5vw 2.5vw;
}
.main-qna .qna-list .qna-item .answer::before {
  content: '';
  position: absolute;
  left: 6.25vw;
  top: 8.4375vw;
  width: 12.03125vw;
  height: 13.75vw;
  background: url(../images/main/qna-content-icon.png) no-repeat center / 100% 100%;
}

.main-qna .qna-list .qna-item .answer p {
  position: relative;
  font-family: var(--maruburi);
  font-size: 3.75vw;
  line-height: 6.25vw;
  letter-spacing: -0.03em;
  text-align: justify;
  color: #000000;
  transform: rotate(0.03deg);
}

.main-qna .qna-list .qna-item .answer .reward {
  position: relative;
  width: 100%;
  margin-top: 4.0625vw;
  border-top: 0.3125vw solid #3e2f22;
  border-collapse: collapse;
  table-layout: fixed;
}

.main-qna .qna-list .qna-item .answer .reward th,
.main-qna .qna-list .qna-item .answer .reward td {
  height: 10.625vw;
  padding: 1.5625vw 1.25vw;
  border-bottom: 1px solid rgba(62, 47, 34, 0.24);
  font-family: var(--maruburi);
  font-size: 2.8125vw;
  line-height: 4.375vw;
  letter-spacing: -0.03em;
  color: #3e2f22;
  text-align: center;
  vertical-align: middle;
  word-break: keep-all;
  transform: rotate(0.03deg);
}

.main-qna .qna-list .qna-item .answer .reward tr > *:not(:first-child) {
  border-left: 1px solid rgba(62, 47, 34, 0.24);
}

.main-qna .qna-list .qna-item .answer .reward th:first-child {
  width: 33%;
}

.main-qna .qna-list .qna-item .answer .reward thead th {
  background: rgba(62, 47, 34, 0.06);
  font-weight: 600;
  color: #000000;
}

.main-qna .qna-list .qna-item .answer .reward tbody th {
  font-weight: 400;
}

.main-qna .qna-list .qna-item .answer .reward th strong {
  font-size: inherit;
  line-height: inherit;
  font-weight: 700;
}

.float-area {
  --rise: 0.55s; /* 버튼이 아래에서 올라오는 시간 */
  --bloom: 0.85s; /* 꽃이 아래에서 자라 오르는 시간 */
  --flight: 1.2s; /* 나비가 날아들어 꽃에 앉기까지 */
  --bloom-at: 0.32s; /* 버튼이 오르기 시작한 뒤 꽃이 자라기까지 */
  --flight-at: 0.42s; /* 버튼이 오르기 시작한 뒤 나비가 날아들기까지 */
  --fade: 0.45s; /* 되감길 때 전체가 사라지는 시간 */
  --idle: 6s; /* 앉은 뒤 저절로 날갯짓하는 주기 */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* 등장 가속 곡선 */
  position: fixed;
  left: 4.6875vw;
  right: 4.6875vw;
  bottom: 1.875vw;
  z-index: 100;
  overflow: visible;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--fade) var(--ease),
    visibility 0s linear var(--fade);
}

.float-area.shown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: none;
}

.float-area .deco {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}

.float-area .deco .flower {
  position: absolute;
  right: 4.375vw;
  bottom: 0;
  width: 23.4375vw;
  height: 32.1875vw;
  overflow: hidden;
  transform-origin: 50% 100%;
}

.float-area .deco .butterfly {
  position: absolute;
  right: 22.96875vw;
  bottom: 23.75vw;
  width: 10.15625vw;
}

.float-area .deco .butterfly::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url(../images/main/float-butterfly.png) no-repeat center / 100% 100%;
  opacity: 0.22;
  filter: brightness(0) blur(3px);
  transform: translate(15.4%, 21.5%);
}

.float-area .deco img {
  display: block;
  width: 100%;
}

.float-area .deco .butterfly img {
  position: relative;
  transform-origin: 66% 72%;
}

.float-area .button {
  font-family: var(--maruburi);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 13.75vw;
  padding: 0 30.15625vw 0 0;
  border-radius: 3.125vw;
  background: #412e21;
  color: #ffffff;
  font-size: 4.609375vw;
  letter-spacing: -0.02em;
  transform: rotate(0.03deg);
}

.float-area.shown .button {
  animation: float_rise var(--rise) var(--ease) both;
}

.float-area.shown .deco .flower {
  animation: float_bloom var(--bloom) var(--ease) var(--bloom-at) both;
}

.float-area.shown .deco .butterfly {
  animation: float_fly var(--flight) linear var(--flight-at) both;
}

.float-area.shown .deco .butterfly::before {
  animation: float_shade var(--flight) linear var(--flight-at) both;
}

.float-area.shown .deco .butterfly img {
  animation:
    float_wing var(--flight) ease-in-out var(--flight-at) both,
    float_idle var(--idle) ease-in-out calc(var(--flight-at) + var(--flight)) infinite;
}

.copy-area {
  padding: 4.25vw 0;
  background: #f7f7f7;
}

.copy-area p {
  font-family: 'SpoqaHanSansNeo', 'NanumSquareNeo', sans-serif;
  font-weight: 400;
  font-size: 3.125vw;
  text-align: center;
  color: #000000;
  letter-spacing: -0.03em;
}

.div_sns {
  position: relative;
  padding: 5vw 0;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.div_sns .sns_title {
  margin-right: 5vw;
  font-size: min(3.59375vw, 23px);
  font-family: 'SpoqaHanSansNeo';
  color: #656565;
}

.div_sns .sns-list {
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.div_sns .sns-list a {
  display: flex;
  margin-right: 4%;
  width: 10.9375vw;
  max-width: 70px;
  vertical-align: middle;
}

.div_sns .sns-list a:last-child {
  margin-right: 0;
}

.div_sns .sns-list a img {
  width: 100%;
}

/* -- 인트로 문구 등장 -- */
@keyframes intro_reveal {
  from {
    opacity: 0;
    transform: translateY(0.9375vw);
  }
}
/* -- // 인트로 문구 등장 -- */

/* -- 나비 첫 등장 (페이드 · 진입 이동 · 기울기 · 그림자) -- */
@keyframes bf_in {
  to {
    opacity: 1;
  }
}

@keyframes bf_x {
  0% {
    transform: translateX(11%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes bf_y {
  0% {
    transform: translateY(-15%) scale(0.96);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes bf_tilt {
  0% {
    transform: rotate(-4deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes bf_shade {
  from {
    opacity: 0.08;
    transform: translate(24%, 32%) scale(1.18);
  }
}
/* -- // 나비 첫 등장 (페이드 · 진입 이동 · 기울기 · 그림자) -- */

/* -- 스크롤에 감기는 나비 비행 경로 -- */
@keyframes bf_route_x {
  0% {
    transform: translateX(0);
  }
  1.4% {
    transform: translateX(-17%);
  }
  2.8% {
    transform: translateX(-33%);
  }
  4.2% {
    transform: translateX(-42%);
  }
  5.6% {
    transform: translateX(-50%);
  }
  7% {
    transform: translateX(-64%);
  }
  8.4% {
    transform: translateX(-83%);
  }
  9.8% {
    transform: translateX(-103%);
  }
  11.2% {
    transform: translateX(-130%);
  }
  12.6% {
    transform: translateX(-159%);
  }
  14% {
    transform: translateX(-184%);
  }
  15.4% {
    transform: translateX(-204%);
  }
  16.8% {
    transform: translateX(-218%);
  }
  18.2% {
    transform: translateX(-225%);
  }
  19.6% {
    transform: translateX(-228%);
  }
  21% {
    transform: translateX(-230%);
  }
  22.4% {
    transform: translateX(-232%);
  }
  23.8% {
    transform: translateX(-232%);
  }
  25.2% {
    transform: translateX(-232%);
  }
  26.7% {
    transform: translateX(-230%);
  }
  28.2% {
    transform: translateX(-221%);
  }
  34.7% {
    transform: translateX(-84%);
  }
  39.1% {
    transform: translateX(-6%);
  }
  41.6% {
    transform: translateX(17%);
  }
  43.8% {
    transform: translateX(16%);
  }
  50.4% {
    transform: translateX(-65%);
  }
  54.5% {
    transform: translateX(-141%);
  }
  58% {
    transform: translateX(-217%);
  }
  61% {
    transform: translateX(-227%);
  }
  64% {
    transform: translateX(-231%);
  }
  67% {
    transform: translateX(-232%);
  }
  70% {
    transform: translateX(-232%);
  }
  73.5% {
    transform: translateX(-232%);
  }
  77% {
    transform: translateX(-232%);
  }
  81% {
    transform: translateX(-230%);
  }
  85.5% {
    transform: translateX(-226%);
  }
  90% {
    transform: translateX(-218%);
  }
  95% {
    transform: translateX(-206%);
  }
  100% {
    transform: translateX(-196%);
  }
}

@keyframes bf_route_y {
  0% {
    transform: translateY(0);
  }
  1.4% {
    transform: translateY(24%);
  }
  2.8% {
    transform: translateY(45%);
  }
  4.2% {
    transform: translateY(67%);
  }
  5.6% {
    transform: translateY(88%);
  }
  7% {
    transform: translateY(105%);
  }
  8.4% {
    transform: translateY(119%);
  }
  9.8% {
    transform: translateY(139%);
  }
  11.2% {
    transform: translateY(154%);
  }
  12.6% {
    transform: translateY(166%);
  }
  14% {
    transform: translateY(183%);
  }
  15.4% {
    transform: translateY(201%);
  }
  16.8% {
    transform: translateY(216%);
  }
  18.2% {
    transform: translateY(233%);
  }
  19.6% {
    transform: translateY(250%);
  }
  21% {
    transform: translateY(265%);
  }
  22.4% {
    transform: translateY(280%);
  }
  23.8% {
    transform: translateY(297%);
  }
  25.2% {
    transform: translateY(317%);
  }
  26.7% {
    transform: translateY(338%);
  }
  28.2% {
    transform: translateY(363%);
  }
  34.7% {
    transform: translateY(450%);
  }
  39.1% {
    transform: translateY(508%);
  }
  43.8% {
    transform: translateY(613%);
  }
  50.4% {
    transform: translateY(712%);
  }
  54.5% {
    transform: translateY(759%);
  }
  58% {
    transform: translateY(831%);
  }
  61% {
    transform: translateY(867%);
  }
  64% {
    transform: translateY(901%);
  }
  67% {
    transform: translateY(934%);
  }
  70% {
    transform: translateY(964%);
  }
  73.5% {
    transform: translateY(997%);
  }
  77% {
    transform: translateY(1029%);
  }
  81% {
    transform: translateY(1063%);
  }
  85.5% {
    transform: translateY(1099%);
  }
  90% {
    transform: translateY(1133%);
  }
  95% {
    transform: translateY(1169%);
  }
  100% {
    transform: translateY(1205%);
  }
}

@keyframes bf_route_z {
  0% {
    transform: scale(1);
  }
  1.4% {
    transform: scale(1.02);
  }
  2.8% {
    transform: scale(1.03);
  }
  4.2% {
    transform: scale(1.05);
  }
  5.6% {
    transform: scale(1.08);
  }
  7% {
    transform: scale(1.11);
  }
  8.4% {
    transform: scale(1.08);
  }
  9.8% {
    transform: scale(1.05);
  }
  11.2% {
    transform: scale(1.02);
  }
  12.6% {
    transform: scale(1);
  }
  14% {
    transform: scale(0.98);
  }
  15.4% {
    transform: scale(0.96);
  }
  16.8% {
    transform: scale(0.94);
  }
  18.2% {
    transform: scale(0.92);
  }
  19.6% {
    transform: scale(0.91);
  }
  21% {
    transform: scale(0.89);
  }
  22.4% {
    transform: scale(0.89);
  }
  23.8% {
    transform: scale(0.9);
  }
  25.2% {
    transform: scale(0.93);
  }
  26.7% {
    transform: scale(0.96);
  }
  28.2% {
    transform: scale(1);
  }
  34.7% {
    transform: scale(1.06);
  }
  39.1% {
    transform: scale(1.09);
  }
  43.8% {
    transform: scale(1.05);
  }
  50.4% {
    transform: scale(0.96);
  }
  54.5% {
    transform: scale(0.92);
  }
  58% {
    transform: scale(0.9);
  }
  70% {
    transform: scale(0.94);
  }
  80% {
    transform: scale(0.96);
  }
  90% {
    transform: scale(0.98);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes bf_route_tilt {
  0% {
    transform: rotate(0deg);
  }
  1.4% {
    transform: rotate(-5deg);
  }
  2.8% {
    transform: rotate(-5deg);
  }
  4.2% {
    transform: rotate(-4deg);
  }
  5.6% {
    transform: rotate(0deg);
  }
  7% {
    transform: rotate(6deg);
  }
  8.4% {
    transform: rotate(9deg);
  }
  9.8% {
    transform: rotate(8deg);
  }
  11.2% {
    transform: rotate(4deg);
  }
  12.6% {
    transform: rotate(-1deg);
  }
  14% {
    transform: rotate(-8deg);
  }
  15.4% {
    transform: rotate(-17deg);
  }
  16.8% {
    transform: rotate(-27deg);
  }
  18.2% {
    transform: rotate(-38deg);
  }
  19.6% {
    transform: rotate(-50deg);
  }
  21% {
    transform: rotate(-62deg);
  }
  22.4% {
    transform: rotate(-74deg);
  }
  23.8% {
    transform: rotate(-87deg);
  }
  25.2% {
    transform: rotate(-100deg);
  }
  26.7% {
    transform: rotate(-113deg);
  }
  28.2% {
    transform: rotate(-124deg);
  }
  34.7% {
    transform: rotate(-121deg);
  }
  39.1% {
    transform: rotate(-89deg);
  }
  43.8% {
    transform: rotate(-28deg);
  }
  46% {
    transform: rotate(-18deg);
  }
  49% {
    transform: rotate(-13deg);
  }
  52% {
    transform: rotate(-12deg);
  }
  55% {
    transform: rotate(-15deg);
  }
  58% {
    transform: rotate(-24deg);
  }
  61% {
    transform: rotate(-37deg);
  }
  64% {
    transform: rotate(-47deg);
  }
  67% {
    transform: rotate(-55deg);
  }
  70% {
    transform: rotate(-62deg);
  }
  73% {
    transform: rotate(-69deg);
  }
  76% {
    transform: rotate(-76deg);
  }
  79% {
    transform: rotate(-84deg);
  }
  82% {
    transform: rotate(-90deg);
  }
  85% {
    transform: rotate(-99deg);
  }
  88% {
    transform: rotate(-104deg);
  }
  91% {
    transform: rotate(-113deg);
  }
  94% {
    transform: rotate(-120deg);
  }
  97% {
    transform: rotate(-125deg);
  }
  100% {
    transform: rotate(-128deg);
  }
}

@keyframes bf_route_lean {
  0% {
    transform: rotate3d(0.032, -0.999, 0, 0deg);
  }
  1.4% {
    transform: rotate3d(0.032, -0.999, 0, 8deg);
  }
  2.8% {
    transform: rotate3d(0.032, -0.999, 0, 14deg);
  }
  4.2% {
    transform: rotate3d(0.032, -0.999, 0, 19deg);
  }
  5.6% {
    transform: rotate3d(0.032, -0.999, 0, 24deg);
  }
  7% {
    transform: rotate3d(0.032, -0.999, 0, 29deg);
  }
  8.4% {
    transform: rotate3d(0.032, -0.999, 0, 33deg);
  }
  9.8% {
    transform: rotate3d(0.032, -0.999, 0, 36deg);
  }
  11.2% {
    transform: rotate3d(0.032, -0.999, 0, 38deg);
  }
  12.6% {
    transform: rotate3d(0.032, -0.999, 0, 40deg);
  }
  14% {
    transform: rotate3d(0.032, -0.999, 0, 41deg);
  }
  15.4% {
    transform: rotate3d(0.032, -0.999, 0, 42deg);
  }
  16.8% {
    transform: rotate3d(0.032, -0.999, 0, 43deg);
  }
  18.2% {
    transform: rotate3d(0.032, -0.999, 0, 44deg);
  }
  19.6% {
    transform: rotate3d(0.032, -0.999, 0, 45deg);
  }
  21% {
    transform: rotate3d(0.032, -0.999, 0, 45deg);
  }
  22.4% {
    transform: rotate3d(0.032, -0.999, 0, 46deg);
  }
  23.8% {
    transform: rotate3d(0.032, -0.999, 0, 45deg);
  }
  25.2% {
    transform: rotate3d(0.032, -0.999, 0, 43deg);
  }
  26.7% {
    transform: rotate3d(0.032, -0.999, 0, 40deg);
  }
  28.2% {
    transform: rotate3d(0.032, -0.999, 0, 38deg);
  }
  34.7% {
    transform: rotate3d(0.032, -0.999, 0, 40deg);
  }
  39.1% {
    transform: rotate3d(0.032, -0.999, 0, 44deg);
  }
  43.8% {
    transform: rotate3d(0.032, -0.999, 0, 40deg);
  }
  50.4% {
    transform: rotate3d(0.032, -0.999, 0, 36deg);
  }
  54.5% {
    transform: rotate3d(0.032, -0.999, 0, 34deg);
  }
  58% {
    transform: rotate3d(0.032, -0.999, 0, 32deg);
  }
  70% {
    transform: rotate3d(0.032, -0.999, 0, 25deg);
  }
  80% {
    transform: rotate3d(0.032, -0.999, 0, 15deg);
  }
  90% {
    transform: rotate3d(0.032, -0.999, 0, 5deg);
  }
  100% {
    transform: rotate3d(0.032, -0.999, 0, 0deg);
  }
}
/* -- // 스크롤에 감기는 나비 비행 경로 -- */

/* -- 나비 날갯짓 (등장 직후 잦아듦 · 비행 중 반복) -- */
@keyframes bf_flap_left {
  0% {
    transform: rotate3d(0.908, -0.419, 0, 0deg);
  }
  8% {
    transform: rotate3d(0.908, -0.419, 0, 58deg);
  }
  17% {
    transform: rotate3d(0.908, -0.419, 0, 0deg);
  }
  26% {
    transform: rotate3d(0.908, -0.419, 0, 45deg);
  }
  35% {
    transform: rotate3d(0.908, -0.419, 0, 1deg);
  }
  45% {
    transform: rotate3d(0.908, -0.419, 0, 32deg);
  }
  55% {
    transform: rotate3d(0.908, -0.419, 0, 2deg);
  }
  65% {
    transform: rotate3d(0.908, -0.419, 0, 21deg);
  }
  75% {
    transform: rotate3d(0.908, -0.419, 0, 3deg);
  }
  85% {
    transform: rotate3d(0.908, -0.419, 0, 11deg);
  }
  93% {
    transform: rotate3d(0.908, -0.419, 0, 3deg);
  }
  100% {
    transform: rotate3d(0.908, -0.419, 0, 0deg);
  }
}

@keyframes bf_flap_right {
  0% {
    transform: rotate3d(0.908, -0.419, 0, 0deg);
  }
  8% {
    transform: rotate3d(0.908, -0.419, 0, -58deg);
  }
  17% {
    transform: rotate3d(0.908, -0.419, 0, 0deg);
  }
  26% {
    transform: rotate3d(0.908, -0.419, 0, -45deg);
  }
  35% {
    transform: rotate3d(0.908, -0.419, 0, -1deg);
  }
  45% {
    transform: rotate3d(0.908, -0.419, 0, -32deg);
  }
  55% {
    transform: rotate3d(0.908, -0.419, 0, -2deg);
  }
  65% {
    transform: rotate3d(0.908, -0.419, 0, -21deg);
  }
  75% {
    transform: rotate3d(0.908, -0.419, 0, -3deg);
  }
  85% {
    transform: rotate3d(0.908, -0.419, 0, -11deg);
  }
  93% {
    transform: rotate3d(0.908, -0.419, 0, -3deg);
  }
  100% {
    transform: rotate3d(0.908, -0.419, 0, 0deg);
  }
}

@keyframes bf_wing_left {
  0%,
  100% {
    transform: rotate3d(0.908, -0.419, 0, -8deg);
  }
  50% {
    transform: rotate3d(0.908, -0.419, 0, 52deg);
  }
}

@keyframes bf_wing_right {
  0%,
  100% {
    transform: rotate3d(0.908, -0.419, 0, 8deg);
  }
  50% {
    transform: rotate3d(0.908, -0.419, 0, -52deg);
  }
}
/* -- // 나비 날갯짓 (등장 직후 잦아듦 · 비행 중 반복) -- */

/* -- 내려앉은 나비 (날개 접기 · 주기적 날갯짓) -- */
@keyframes bf_rest_left {
  0% {
    transform: rotate3d(0.908, -0.419, 0, -8deg);
  }
  45% {
    transform: rotate3d(0.908, -0.419, 0, 18deg);
  }
  100% {
    transform: rotate3d(0.908, -0.419, 0, 0deg);
  }
}

@keyframes bf_rest_right {
  0% {
    transform: rotate3d(0.908, -0.419, 0, 8deg);
  }
  45% {
    transform: rotate3d(0.908, -0.419, 0, -18deg);
  }
  100% {
    transform: rotate3d(0.908, -0.419, 0, 0deg);
  }
}

@keyframes bf_idle_left {
  0% {
    transform: rotate3d(0.908, -0.419, 0, 0deg);
  }
  3% {
    transform: rotate3d(0.908, -0.419, 0, 34deg);
  }
  6.5% {
    transform: rotate3d(0.908, -0.419, 0, 3deg);
  }
  10% {
    transform: rotate3d(0.908, -0.419, 0, 22deg);
  }
  13.5%,
  100% {
    transform: rotate3d(0.908, -0.419, 0, 0deg);
  }
}

@keyframes bf_idle_right {
  0% {
    transform: rotate3d(0.908, -0.419, 0, 0deg);
  }
  3% {
    transform: rotate3d(0.908, -0.419, 0, -34deg);
  }
  6.5% {
    transform: rotate3d(0.908, -0.419, 0, -3deg);
  }
  10% {
    transform: rotate3d(0.908, -0.419, 0, -22deg);
  }
  13.5%,
  100% {
    transform: rotate3d(0.908, -0.419, 0, 0deg);
  }
}
/* -- // 내려앉은 나비 (날개 접기 · 주기적 날갯짓) -- */

/* -- 기부 버튼 위 나비 (착석 · 날갯짓 · 주기적 날갯짓) -- */
@keyframes bf_seat {
  0% {
    opacity: 0;
    transform: translate(3.646vw, -2.604vw) rotate(4deg);
    filter: drop-shadow(18px 23px 8px rgba(48, 33, 23, 0.14));
  }
  30% {
    opacity: 1;
  }
  36% {
    transform: translate(1.953vw, -1.432vw) rotate(3deg);
    filter: drop-shadow(12px 15px 6px rgba(48, 33, 23, 0.28));
  }
  60% {
    transform: translate(1.042vw, -0.781vw) rotate(2deg);
    filter: drop-shadow(8px 11px 4px rgba(48, 33, 23, 0.38));
  }
  80% {
    transform: translate(0.391vw, -0.26vw) rotate(1deg);
    filter: drop-shadow(6px 8px 3px rgba(48, 33, 23, 0.46));
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
    filter: drop-shadow(5px 7px 3px rgba(48, 33, 23, 0.5));
  }
}

@keyframes bf_seat_wing {
  0% {
    transform: rotate(32deg) scaleY(1) rotate(-32deg);
  }
  9% {
    transform: rotate(32deg) scaleY(0.62) rotate(-32deg);
  }
  20% {
    transform: rotate(32deg) scaleY(1) rotate(-32deg);
  }
  32% {
    transform: rotate(32deg) scaleY(0.71) rotate(-32deg);
  }
  44% {
    transform: rotate(32deg) scaleY(1) rotate(-32deg);
  }
  56% {
    transform: rotate(32deg) scaleY(0.8) rotate(-32deg);
  }
  68% {
    transform: rotate(32deg) scaleY(1) rotate(-32deg);
  }
  80% {
    transform: rotate(32deg) scaleY(0.88) rotate(-32deg);
  }
  90% {
    transform: rotate(32deg) scaleY(1) rotate(-32deg);
  }
  97% {
    transform: rotate(32deg) scaleY(0.95) rotate(-32deg);
  }
  100% {
    transform: rotate(32deg) scaleY(1) rotate(-32deg);
  }
}

@keyframes bf_seat_idle {
  0%,
  26% {
    transform: rotate(32deg) scaleY(1) rotate(-32deg);
  }
  29% {
    transform: rotate(32deg) scaleY(0.64) rotate(-32deg);
  }
  32% {
    transform: rotate(32deg) scaleY(1) rotate(-32deg);
  }
  35% {
    transform: rotate(32deg) scaleY(0.72) rotate(-32deg);
  }
  38% {
    transform: rotate(32deg) scaleY(1) rotate(-32deg);
  }
  41% {
    transform: rotate(32deg) scaleY(0.84) rotate(-32deg);
  }
  44%,
  100% {
    transform: rotate(32deg) scaleY(1) rotate(-32deg);
  }
}
/* -- // 기부 버튼 위 나비 (착석 · 날갯짓 · 주기적 날갯짓) -- */

/* -- 스토리 본문 글자 또렷해짐 -- */
@keyframes ink_focus {
  from {
    opacity: 0.15;
    filter: blur(4px);
  }
}
/* -- // 스토리 본문 글자 또렷해짐 -- */

/* -- 보상 안내 등장 (장식 조각 · 좌우 진입) -- */
@keyframes reward_bit_a {
  from {
    opacity: 0;
    transform: translate(-1.171875vw, -0.9375vw) rotate(-7deg);
  }
  66% {
    opacity: 1;
    transform: translate(0.15625vw, 0.15625vw) rotate(1deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes reward_bit_b {
  from {
    opacity: 0;
    transform: translate(1.09375vw, -0.78125vw) rotate(6deg);
  }
  66% {
    opacity: 1;
    transform: translate(-0.15625vw, 0.15625vw) rotate(-1deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes reward_bit_c {
  from {
    opacity: 0;
    transform: translate(-0.9375vw, 1.09375vw) rotate(5deg);
  }
  66% {
    opacity: 1;
    transform: translate(0.15625vw, -0.15625vw) rotate(-1deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes reward_bit_d {
  from {
    opacity: 0;
    transform: translate(1.09375vw, 0.9375vw) rotate(-5deg);
  }
  66% {
    opacity: 1;
    transform: translate(-0.15625vw, -0.15625vw) rotate(1deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes reward_in_left {
  from {
    opacity: 0;
    transform: translateX(-1.25vw);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes reward_in_right {
  from {
    opacity: 0;
    transform: translateX(1.25vw);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* -- // 보상 안내 등장 (장식 조각 · 좌우 진입) -- */

/* -- 추모 공간 장식 등장 -- */
@keyframes memory_deco_in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* -- // 추모 공간 장식 등장 -- */

/* -- 추모 공간 나비 (날개 접기 · 명암 · 그림자 · 부유) -- */
@keyframes memory_bf_left {
  0%,
  100% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(32deg);
  }
}

@keyframes memory_bf_right {
  0%,
  100% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(-32deg);
  }
}

@keyframes memory_bf_soft_left {
  0%,
  100% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(20deg);
  }
}

@keyframes memory_bf_soft_right {
  0%,
  100% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(-20deg);
  }
}

@keyframes memory_bf_lit {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.05);
  }
}

@keyframes memory_bf_dim {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(0.87);
  }
}

@keyframes memory_bf_cast {
  0%,
  100% {
    translate: 8% 12%;
    opacity: 0.24;
  }
  50% {
    translate: 12% 17%;
    opacity: 0.17;
  }
}

@keyframes memory_bf_drift {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -0.46875vw;
  }
}
/* -- // 추모 공간 나비 (날개 접기 · 명암 · 그림자 · 부유) -- */

/* -- 붓글씨 획 순차 드로잉 (k0~k164) -- */
@keyframes k0 {
  0% {
    stroke-dashoffset: 100.6;
  }
  0.264%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k1 {
  0%,
  0.264% {
    stroke-dashoffset: 100.6;
  }
  0.563%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k2 {
  0%,
  0.551% {
    stroke-dashoffset: 100.6;
  }
  0.85%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k3 {
  0%,
  0.85% {
    stroke-dashoffset: 100.6;
  }
  1.149%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k4 {
  0%,
  1.137% {
    stroke-dashoffset: 100.6;
  }
  1.436%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k5 {
  0%,
  1.436% {
    stroke-dashoffset: 100.6;
  }
  1.723%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k6 {
  0%,
  1.723% {
    stroke-dashoffset: 100.6;
  }
  2.01%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k7 {
  0%,
  2.021% {
    stroke-dashoffset: 100.6;
  }
  2.308%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k8 {
  0%,
  2.308% {
    stroke-dashoffset: 100.6;
  }
  2.607%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k9 {
  0%,
  2.607% {
    stroke-dashoffset: 100.6;
  }
  2.906%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k10 {
  0%,
  2.894% {
    stroke-dashoffset: 100.6;
  }
  3.193%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k11 {
  0%,
  3.204% {
    stroke-dashoffset: 100.6;
  }
  3.503%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k12 {
  0%,
  3.491% {
    stroke-dashoffset: 100.6;
  }
  3.652%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k13 {
  0%,
  4.801% {
    stroke-dashoffset: 100.6;
  }
  5.065%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k14 {
  0%,
  5.053% {
    stroke-dashoffset: 100.6;
  }
  5.352%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k15 {
  0%,
  5.364% {
    stroke-dashoffset: 100.6;
  }
  5.651%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k16 {
  0%,
  5.639% {
    stroke-dashoffset: 100.6;
  }
  5.915%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k17 {
  0%,
  5.915% {
    stroke-dashoffset: 100.6;
  }
  6.202%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k18 {
  0%,
  6.202% {
    stroke-dashoffset: 100.6;
  }
  6.489%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k19 {
  0%,
  6.501% {
    stroke-dashoffset: 100.6;
  }
  6.788%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k20 {
  0%,
  6.788% {
    stroke-dashoffset: 100.6;
  }
  7.075%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k21 {
  0%,
  7.075% {
    stroke-dashoffset: 100.6;
  }
  7.373%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k22 {
  0%,
  7.373% {
    stroke-dashoffset: 100.6;
  }
  7.661%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k23 {
  0%,
  7.661% {
    stroke-dashoffset: 100.6;
  }
  7.948%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k24 {
  0%,
  7.959% {
    stroke-dashoffset: 100.6;
  }
  8.235%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k25 {
  0%,
  8.223% {
    stroke-dashoffset: 100.6;
  }
  8.464%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k26 {
  0%,
  8.464% {
    stroke-dashoffset: 100.6;
  }
  8.763%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k27 {
  0%,
  8.775% {
    stroke-dashoffset: 100.6;
  }
  9.073%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k28 {
  0%,
  9.073% {
    stroke-dashoffset: 100.6;
  }
  9.372%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k29 {
  0%,
  9.36% {
    stroke-dashoffset: 100.6;
  }
  9.67%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k30 {
  0%,
  9.67% {
    stroke-dashoffset: 100.6;
  }
  9.854%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k31 {
  0%,
  12.611% {
    stroke-dashoffset: 100.6;
  }
  12.875%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k32 {
  0%,
  12.875% {
    stroke-dashoffset: 100.6;
  }
  13.15%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k33 {
  0%,
  13.162% {
    stroke-dashoffset: 100.6;
  }
  13.449%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k34 {
  0%,
  13.449% {
    stroke-dashoffset: 100.6;
  }
  13.736%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k35 {
  0%,
  13.748% {
    stroke-dashoffset: 100.6;
  }
  14.0%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k36 {
  0%,
  13.989% {
    stroke-dashoffset: 100.6;
  }
  14.23%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k37 {
  0%,
  14.23% {
    stroke-dashoffset: 100.6;
  }
  14.483%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k38 {
  0%,
  14.483% {
    stroke-dashoffset: 100.6;
  }
  14.781%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k39 {
  0%,
  14.781% {
    stroke-dashoffset: 100.6;
  }
  15.057%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k40 {
  0%,
  15.057% {
    stroke-dashoffset: 100.6;
  }
  15.31%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k41 {
  0%,
  15.298% {
    stroke-dashoffset: 100.6;
  }
  15.585%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k42 {
  0%,
  15.597% {
    stroke-dashoffset: 100.6;
  }
  15.884%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k43 {
  0%,
  15.884% {
    stroke-dashoffset: 100.6;
  }
  16.148%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k44 {
  0%,
  17.296% {
    stroke-dashoffset: 100.6;
  }
  17.572%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k45 {
  0%,
  17.572% {
    stroke-dashoffset: 100.6;
  }
  17.882%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k46 {
  0%,
  17.882% {
    stroke-dashoffset: 100.6;
  }
  18.192%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k47 {
  0%,
  18.192% {
    stroke-dashoffset: 100.6;
  }
  18.422%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k48 {
  0%,
  18.422% {
    stroke-dashoffset: 100.6;
  }
  18.721%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k49 {
  0%,
  18.732% {
    stroke-dashoffset: 100.6;
  }
  19.031%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k50 {
  0%,
  19.031% {
    stroke-dashoffset: 100.6;
  }
  19.168%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k51 {
  0%,
  21.81% {
    stroke-dashoffset: 100.6;
  }
  22.086%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k52 {
  0%,
  22.086% {
    stroke-dashoffset: 100.6;
  }
  22.384%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k53 {
  0%,
  22.384% {
    stroke-dashoffset: 100.6;
  }
  22.648%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k54 {
  0%,
  22.648% {
    stroke-dashoffset: 100.6;
  }
  22.947%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k55 {
  0%,
  22.947% {
    stroke-dashoffset: 100.6;
  }
  23.085%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k56 {
  0%,
  24.233% {
    stroke-dashoffset: 100.6;
  }
  24.509%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k57 {
  0%,
  24.498% {
    stroke-dashoffset: 100.6;
  }
  24.808%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k58 {
  0%,
  24.808% {
    stroke-dashoffset: 100.6;
  }
  25.106%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k59 {
  0%,
  25.106% {
    stroke-dashoffset: 100.6;
  }
  25.382%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k60 {
  0%,
  25.393% {
    stroke-dashoffset: 100.6;
  }
  25.703%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k61 {
  0%,
  25.703% {
    stroke-dashoffset: 100.6;
  }
  25.899%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k62 {
  0%,
  27.036% {
    stroke-dashoffset: 100.6;
  }
  27.311%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k63 {
  0%,
  27.323% {
    stroke-dashoffset: 100.6;
  }
  27.598%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k64 {
  0%,
  27.587% {
    stroke-dashoffset: 100.6;
  }
  27.886%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k65 {
  0%,
  27.897% {
    stroke-dashoffset: 100.6;
  }
  28.196%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k66 {
  0%,
  28.184% {
    stroke-dashoffset: 100.6;
  }
  28.483%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k67 {
  0%,
  28.483% {
    stroke-dashoffset: 100.6;
  }
  28.667%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k68 {
  0%,
  29.815% {
    stroke-dashoffset: 100.6;
  }
  30.079%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k69 {
  0%,
  30.079% {
    stroke-dashoffset: 100.6;
  }
  30.378%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k70 {
  0%,
  30.378% {
    stroke-dashoffset: 100.6;
  }
  30.688%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k71 {
  0%,
  30.699% {
    stroke-dashoffset: 100.6;
  }
  30.975%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k72 {
  0%,
  30.964% {
    stroke-dashoffset: 100.6;
  }
  31.262%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k73 {
  0%,
  31.262% {
    stroke-dashoffset: 100.6;
  }
  31.515%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k74 {
  0%,
  31.515% {
    stroke-dashoffset: 100.6;
  }
  31.791%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k75 {
  0%,
  31.802% {
    stroke-dashoffset: 100.6;
  }
  32.112%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k76 {
  0%,
  32.101% {
    stroke-dashoffset: 100.6;
  }
  32.273%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k77 {
  0%,
  35.029% {
    stroke-dashoffset: 100.6;
  }
  35.316%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k78 {
  0%,
  35.328% {
    stroke-dashoffset: 100.6;
  }
  35.695%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k79 {
  0%,
  35.695% {
    stroke-dashoffset: 100.6;
  }
  36.006%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k80 {
  0%,
  35.994% {
    stroke-dashoffset: 100.6;
  }
  36.155%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k81 {
  0%,
  37.303% {
    stroke-dashoffset: 100.6;
  }
  37.567%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k82 {
  0%,
  37.567% {
    stroke-dashoffset: 100.6;
  }
  37.866%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k83 {
  0%,
  37.866% {
    stroke-dashoffset: 100.6;
  }
  38.165%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k84 {
  0%,
  38.153% {
    stroke-dashoffset: 100.6;
  }
  38.452%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k85 {
  0%,
  38.463% {
    stroke-dashoffset: 100.6;
  }
  38.75%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k86 {
  0%,
  38.75% {
    stroke-dashoffset: 100.6;
  }
  39.038%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k87 {
  0%,
  39.038% {
    stroke-dashoffset: 100.6;
  }
  39.336%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k88 {
  0%,
  39.336% {
    stroke-dashoffset: 100.6;
  }
  39.612%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k89 {
  0%,
  39.612% {
    stroke-dashoffset: 100.6;
  }
  39.899%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k90 {
  0%,
  39.899% {
    stroke-dashoffset: 100.6;
  }
  40.198%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k91 {
  0%,
  40.198% {
    stroke-dashoffset: 100.6;
  }
  40.485%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k92 {
  0%,
  40.496% {
    stroke-dashoffset: 100.6;
  }
  40.795%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k93 {
  0%,
  40.783% {
    stroke-dashoffset: 100.6;
  }
  41.001%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k94 {
  0%,
  43.758% {
    stroke-dashoffset: 100.6;
  }
  44.022%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k95 {
  0%,
  44.022% {
    stroke-dashoffset: 100.6;
  }
  44.298%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k96 {
  0%,
  44.298% {
    stroke-dashoffset: 100.6;
  }
  44.573%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k97 {
  0%,
  44.573% {
    stroke-dashoffset: 100.6;
  }
  44.86%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k98 {
  0%,
  44.872% {
    stroke-dashoffset: 100.6;
  }
  45.079%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k99 {
  0%,
  45.079% {
    stroke-dashoffset: 100.6;
  }
  45.366%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k100 {
  0%,
  45.354% {
    stroke-dashoffset: 100.6;
  }
  45.618%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k101 {
  0%,
  45.618% {
    stroke-dashoffset: 100.6;
  }
  45.906%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k102 {
  0%,
  45.906% {
    stroke-dashoffset: 100.6;
  }
  46.17%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k103 {
  0%,
  46.17% {
    stroke-dashoffset: 100.6;
  }
  46.491%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k104 {
  0%,
  46.491% {
    stroke-dashoffset: 100.6;
  }
  46.721%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k105 {
  0%,
  46.721% {
    stroke-dashoffset: 100.6;
  }
  47.02%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k106 {
  0%,
  47.02% {
    stroke-dashoffset: 100.6;
  }
  47.203%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k107 {
  0%,
  48.352% {
    stroke-dashoffset: 100.6;
  }
  48.639%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k108 {
  0%,
  48.639% {
    stroke-dashoffset: 100.6;
  }
  48.926%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k109 {
  0%,
  48.926% {
    stroke-dashoffset: 100.6;
  }
  49.179%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k110 {
  0%,
  49.179% {
    stroke-dashoffset: 100.6;
  }
  49.489%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k111 {
  0%,
  49.489% {
    stroke-dashoffset: 100.6;
  }
  49.788%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k112 {
  0%,
  49.788% {
    stroke-dashoffset: 100.6;
  }
  50.017%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k113 {
  0%,
  50.017% {
    stroke-dashoffset: 100.6;
  }
  50.327%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k114 {
  0%,
  50.339% {
    stroke-dashoffset: 100.6;
  }
  50.523%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k115 {
  0%,
  51.671% {
    stroke-dashoffset: 100.6;
  }
  51.947%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k116 {
  0%,
  51.947% {
    stroke-dashoffset: 100.6;
  }
  52.268%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k117 {
  0%,
  52.268% {
    stroke-dashoffset: 100.6;
  }
  52.544%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k118 {
  0%,
  52.544% {
    stroke-dashoffset: 100.6;
  }
  52.682%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k119 {
  0%,
  53.704% {
    stroke-dashoffset: 100.6;
  }
  53.968%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k120 {
  0%,
  53.968% {
    stroke-dashoffset: 100.6;
  }
  54.244%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k121 {
  0%,
  54.255% {
    stroke-dashoffset: 100.6;
  }
  54.519%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k122 {
  0%,
  54.519% {
    stroke-dashoffset: 100.6;
  }
  54.806%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k123 {
  0%,
  54.806% {
    stroke-dashoffset: 100.6;
  }
  55.071%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k124 {
  0%,
  55.071% {
    stroke-dashoffset: 100.6;
  }
  55.358%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k125 {
  0%,
  55.369% {
    stroke-dashoffset: 100.6;
  }
  55.656%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k126 {
  0%,
  55.656% {
    stroke-dashoffset: 100.6;
  }
  55.909%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k127 {
  0%,
  55.898% {
    stroke-dashoffset: 100.6;
  }
  56.185%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k128 {
  0%,
  56.196% {
    stroke-dashoffset: 100.6;
  }
  56.334%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k129 {
  0%,
  59.079% {
    stroke-dashoffset: 100.6;
  }
  59.446%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k130 {
  0%,
  59.458% {
    stroke-dashoffset: 100.6;
  }
  59.596%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k131 {
  0%,
  60.71% {
    stroke-dashoffset: 100.6;
  }
  60.974%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k132 {
  0%,
  60.974% {
    stroke-dashoffset: 100.6;
  }
  61.261%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k133 {
  0%,
  61.273% {
    stroke-dashoffset: 100.6;
  }
  61.56%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k134 {
  0%,
  61.56% {
    stroke-dashoffset: 100.6;
  }
  61.847%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k135 {
  0%,
  61.858% {
    stroke-dashoffset: 100.6;
  }
  62.157%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k136 {
  0%,
  62.145% {
    stroke-dashoffset: 100.6;
  }
  62.444%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k137 {
  0%,
  62.444% {
    stroke-dashoffset: 100.6;
  }
  62.616%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k138 {
  0%,
  65.384% {
    stroke-dashoffset: 100.6;
  }
  65.568%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k139 {
  0%,
  65.568% {
    stroke-dashoffset: 100.6;
  }
  65.855%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k140 {
  0%,
  65.855% {
    stroke-dashoffset: 100.6;
  }
  66.131%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k141 {
  0%,
  66.131% {
    stroke-dashoffset: 100.6;
  }
  66.269%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k142 {
  0%,
  67.406% {
    stroke-dashoffset: 100.6;
  }
  67.658%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k143 {
  0%,
  67.67% {
    stroke-dashoffset: 100.6;
  }
  67.957%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k144 {
  0%,
  67.957% {
    stroke-dashoffset: 100.6;
  }
  68.209%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k145 {
  0%,
  68.209% {
    stroke-dashoffset: 100.6;
  }
  68.508%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k146 {
  0%,
  68.508% {
    stroke-dashoffset: 100.6;
  }
  68.772%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k147 {
  0%,
  68.772% {
    stroke-dashoffset: 100.6;
  }
  69.025%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k148 {
  0%,
  69.036% {
    stroke-dashoffset: 100.6;
  }
  69.335%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k149 {
  0%,
  69.335% {
    stroke-dashoffset: 100.6;
  }
  69.588%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k150 {
  0%,
  69.576% {
    stroke-dashoffset: 100.6;
  }
  69.714%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k151 {
  0%,
  70.771% {
    stroke-dashoffset: 100.6;
  }
  71.046%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k152 {
  0%,
  71.046% {
    stroke-dashoffset: 100.6;
  }
  71.356%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k153 {
  0%,
  71.356% {
    stroke-dashoffset: 100.6;
  }
  71.644%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k154 {
  0%,
  71.644% {
    stroke-dashoffset: 100.6;
  }
  71.954%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k155 {
  0%,
  71.954% {
    stroke-dashoffset: 100.6;
  }
  72.252%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k156 {
  0%,
  72.252% {
    stroke-dashoffset: 100.6;
  }
  72.539%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k157 {
  0%,
  72.539% {
    stroke-dashoffset: 100.6;
  }
  72.826%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k158 {
  0%,
  72.838% {
    stroke-dashoffset: 100.6;
  }
  73.137%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k159 {
  0%,
  73.125% {
    stroke-dashoffset: 100.6;
  }
  73.366%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k160 {
  0%,
  73.378% {
    stroke-dashoffset: 100.6;
  }
  73.642%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k161 {
  0%,
  73.642% {
    stroke-dashoffset: 100.6;
  }
  73.918%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k162 {
  0%,
  73.918% {
    stroke-dashoffset: 100.6;
  }
  74.193%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k163 {
  0%,
  74.193% {
    stroke-dashoffset: 100.6;
  }
  74.48%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes k164 {
  0%,
  74.48% {
    stroke-dashoffset: 100.6;
  }
  74.733%,
  100% {
    stroke-dashoffset: 0;
  }
}
/* -- // 붓글씨 획 순차 드로잉 (k0~k164) -- */

/* -- 모션 최소화 설정에서 애니메이션 정지 -- */
@media (prefers-reduced-motion: reduce) {
  .path {
    animation: none;
    stroke-dashoffset: 0;
  }
  .main-visual .intro .desc,
  .main-visual .intro .action {
    animation: none;
  }
  .main-visual .intro .action .button .line::before {
    animation: none;
    width: 100%;
  }
  .main-visual .intro .action .button .line::after {
    animation: none;
    transform: rotate(45deg) scaleX(1);
  }
  .main-visual .intro .texture .butterfly {
    animation: none;
    opacity: 1;
  }
  .main-visual .intro .texture .butterfly .route-x,
  .main-visual .intro .texture .butterfly .route-y,
  .main-visual .intro .texture .butterfly .route-z,
  .main-visual .intro .texture .butterfly .route-tilt,
  .main-visual .intro .texture .butterfly .fly-x,
  .main-visual .intro .texture .butterfly .fly-y,
  .main-visual .intro .texture .butterfly .tilt,
  .main-visual .intro .texture .butterfly .lean,
  .main-visual .intro .texture .butterfly .wing {
    animation: none;
    transform: none;
    filter: none;
  }
  .main-visual .intro .texture .butterfly .shade {
    animation: none;
  }
  .main-visual .story .story-item .content p {
    animation: none;
  }
  .main-visual .message .action .butterfly,
  .main-visual .message .action .butterfly img,
  .main-visual .message .action.settled .butterfly,
  .main-visual .message .action.settled .butterfly img {
    animation: none;
    transform: none;
  }
  .main-visual .message .action.settled .butterfly {
    opacity: 1;
  }
  .main-contents .reward .showcase .deco .leaf,
  .main-contents .reward .showcase .log-list .log-item .sprig,
  .main-contents .reward .showcase .log-list .log-item .doc,
  .main-contents .reward .showcase .log-list .log-item .flower {
    animation: none;
    opacity: 1;
  }
  .main-contents .memory .deco .butterfly {
    animation: none;
    opacity: 1;
  }
  .main-contents .memory .deco span {
    animation: none;
    transform: none;
  }
  .float-area.shown .button,
  .float-area.shown .deco .flower,
  .float-area.shown .deco .butterfly,
  .float-area.shown .deco .butterfly::before,
  .float-area.shown .deco .butterfly img {
    animation: none;
  }
}
/* -- // 모션 최소화 설정에서 애니메이션 정지 -- */

/* -- CTA 버튼 밑줄과 화살촉 -- */
@keyframes line_body {
  0% {
    width: 0;
  }
  60%,
  100% {
    width: 100%;
  }
}

@keyframes line_head {
  0%,
  60% {
    transform: rotate(45deg) scaleX(0);
  }
  100% {
    transform: rotate(45deg) scaleX(1);
  }
}
/* -- // CTA 버튼 밑줄과 화살촉 -- */

/* -- 플로팅 버튼 (버튼 · 꽃 · 나비 · 날갯짓) -- */
@keyframes float_rise {
  from {
    opacity: 0;
    translate: 0 52%;
  }
  to {
    opacity: 1;
    translate: none;
  }
}

@keyframes float_bloom {
  0% {
    opacity: 0;
    transform: scale(0.55, 0.12);
  }
  45% {
    opacity: 1;
  }
  72% {
    transform: scale(1.05, 1.04);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes float_fly {
  0% {
    opacity: 0;
    transform: translate(-23.2%, -28.1%) rotate(-4deg);
  }
  30% {
    opacity: 1;
  }
  40% {
    transform: translate(-16.1%, -19.3%) rotate(-3deg);
  }
  62% {
    transform: translate(-10.7%, -19.3%) rotate(-2deg);
  }
  82% {
    transform: translate(-3.6%, -8.8%) rotate(-1deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes float_wing {
  0% {
    transform: rotate(-32deg) scaleY(1) rotate(32deg);
  }
  9% {
    transform: rotate(-32deg) scaleY(0.62) rotate(32deg);
  }
  20% {
    transform: rotate(-32deg) scaleY(1) rotate(32deg);
  }
  32% {
    transform: rotate(-32deg) scaleY(0.71) rotate(32deg);
  }
  44% {
    transform: rotate(-32deg) scaleY(1) rotate(32deg);
  }
  56% {
    transform: rotate(-32deg) scaleY(0.8) rotate(32deg);
  }
  68% {
    transform: rotate(-32deg) scaleY(1) rotate(32deg);
  }
  80% {
    transform: rotate(-32deg) scaleY(0.88) rotate(32deg);
  }
  90% {
    transform: rotate(-32deg) scaleY(1) rotate(32deg);
  }
  97% {
    transform: rotate(-32deg) scaleY(0.95) rotate(32deg);
  }
  100% {
    transform: none;
  }
}

@keyframes float_shade {
  from {
    opacity: 0.06;
    transform: translate(55.4%, 70.8%) scale(1.1);
  }
}

@keyframes float_idle {
  0%,
  26% {
    transform: rotate(-32deg) scaleY(1) rotate(32deg);
  }
  29% {
    transform: rotate(-32deg) scaleY(0.64) rotate(32deg);
  }
  32% {
    transform: rotate(-32deg) scaleY(1) rotate(32deg);
  }
  35% {
    transform: rotate(-32deg) scaleY(0.72) rotate(32deg);
  }
  38% {
    transform: rotate(-32deg) scaleY(1) rotate(32deg);
  }
  41% {
    transform: rotate(-32deg) scaleY(0.84) rotate(32deg);
  }
  44%,
  100% {
    transform: rotate(-32deg) scaleY(1) rotate(32deg);
  }
}
/* -- // 플로팅 버튼 (버튼 · 꽃 · 나비 · 날갯짓) -- */