@charset "utf-8";
/* 히어로 메인 비주얼. 1920x910 기준으로 만들고 화면 폭에 맞춰 크기를 줄인다. */

.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(180deg, #2f2f2f 8.989%, #000 86.33%);
}

/* 배경 태극기와 왼쪽을 어둡게 덮는 오버레이 */
.hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero__flag {
  position: absolute; inset: 0;
  background: url("../images/hero-taegukgi.webp") #000 0px 0px / 100% 130% no-repeat;
  filter: blur(5px);
  opacity: 0.70;
}
.hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(78deg, #000 19.17%, rgba(0,0,0,0) 49.63%);
}

/* 디자인 스테이지. 실제 크기는 JS 가 scale 로 맞춘다. */
.hero__stage {
  position: relative;
  width: 1920px;
  height: 910px;
  transform-origin: top left;
  z-index: 1;
}

/* 인물. 가로 중앙에 두고 좌우 이동은 JS 가 담당한다. */
.person {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 910px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: 2;
  pointer-events: none;
  transition: transform 1.2s cubic-bezier(0.76, 0, 0.24, 1), opacity 1s ease;
  will-change: transform, opacity;
  -webkit-mask-image: linear-gradient(180deg, #000 88%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(180deg, #000 88%, rgba(0,0,0,0) 100%);
}
.person picture { display: contents; }
.person img {
  height: 100%;
  width: auto;
  max-width: none;
  display: block;
}

/* 처음엔 남자만 희미하게, 여자는 오른쪽 밖에서 대기. is-loaded 로 남자가 밝아진다. */
.person--man   { transform: translateX(0); opacity: 0.1; }
.person--woman { transform: translateX(1500px); }
.hero__stage.is-loaded .person--man { opacity: 1; }

/* 큰 영문. I GOT 는 인물 앞, YOUR 와 BACK 은 인물 뒤에 둔다. */
.d-word {
  position: absolute;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 200px;
  line-height: normal;
  text-align: center;
  color: var(--c-green);
  white-space: nowrap;
}
.d-igot { left: 320px;  top: 204px; z-index: 3; }
.d-your { left: 1083px; top: 204px; z-index: 1; }
.d-back { left: 1098px; top: 388px; z-index: 1; }

/* 왼쪽 한글 소제목. 인물 앞에 둔다. */
.hero__sub {
  position: absolute;
  left: 330px;
  top: 456px;
  width: 476px;
  z-index: 3;
  font-family: var(--f-body);
  font-weight: 800;
  font-size: 33px;
  line-height: 44px;
  color: var(--c-green);
}

/* 아래쪽 버튼 */
.hero__cta {
  position: absolute;
  left: 589px;
  top: 688px;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.hero__cta-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 373px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 24px 70px;
  font-family: var(--f-btn);
  font-weight: 800;
  font-size: 32px;
  line-height: 44px;
  white-space: nowrap;
  border: 1px solid;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn--green { background: var(--c-green); color: var(--c-black); border-color: var(--c-black); }
.btn--dark  { width: 100%; background: var(--c-black); color: var(--c-green); border-color: var(--c-olive); }
.hero__note {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  color: var(--c-white);
  text-align: center;
}

/* 인트로. 영문은 좌우에서 가운데로 모이고 버튼은 서서히 나타난다. */
.d-igot,
.hero__sub { transform: translateX(-820px); opacity: 0; }
.d-your,
.d-back    { transform: translateX(820px);  opacity: 0; }
.hero__cta { opacity: 0; }

.d-igot, .hero__sub, .d-your, .d-back {
  transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 1.8s ease;
}
.hero__cta { transition: opacity 1.8s ease 0.3s; }

.hero__stage.is-intro .d-igot,
.hero__stage.is-intro .hero__sub,
.hero__stage.is-intro .d-your,
.hero__stage.is-intro .d-back { transform: translateX(0); opacity: 1; }
.hero__stage.is-intro .hero__cta { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .person { transition: none; }
}

/* 제복 근무자 소개 섹션 */
.squad {
  position: relative;
  width: 100%;
  background: #000;
  padding-bottom: calc(100vw * 200 / 1920);
}

/* 위쪽 제목, 문구, 양옆 사진. 1920 기준 좌표를 vw 로 환산한다. */
.squad__intro {
  position: relative;
  height: calc(100vw * 1097 / 1920);
}
.squad__title {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100vw * 200 / 1920);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Paperlogy", sans-serif;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}
.squad__title-sm { font-size: calc(100vw * 60 / 1920);  color: var(--c-white); }
.squad__title-lg { font-size: calc(100vw * 100 / 1920); color: var(--c-green); }

.squad__photo {
  position: absolute;
  top: calc(100vw * 489 / 1920);
  width: calc(100vw * 532 / 1920);
  height: calc(100vw * 528 / 1920);
  overflow: hidden;
}
.squad__photo--l { left: calc(100vw * 80 / 1920); }
.squad__photo--r { left: calc(100vw * 1308 / 1920); }
.squad__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.squad__desc {
  position: absolute;
  left: calc(100vw * 548 / 1920);
  top: calc(100vw * 561 / 1920);
  width: calc(100vw * 824 / 1920);
  text-align: center;
}
.squad__desc-body {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: calc(100vw * 26 / 1920);
  line-height: calc(100vw * 36 / 1920);
  color: #f2efe9;
}
.squad__desc-strong {
  margin-top: calc(100vw * 40 / 1920);
  font-family: var(--f-body);
  font-weight: 700;
  font-size: calc(100vw * 40 / 1920);
  color: var(--c-green);
}

/* 아래쪽 소방관 와이드 사진.
   창을 화면 중앙에 잠깐 고정하고, 그 구간 동안 이미지를 위에서 아래까지 팬 한다. */
.squad__reveal {
  position: relative;
  height: calc(100vw * 528 / 1920 + 100vh);
}
.squad__fire {
  position: sticky;
  top: calc((100vh - (100vw * 528 / 1920)) / 2);
  width: calc(100vw * 1760 / 1920);
  height: calc(100vw * 528 / 1920);
  margin: 0 auto;
  overflow: hidden;
}
.squad__fire-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  display: block;
  will-change: object-position;
}

/* 캠페인 티셔츠 소개 섹션 */
.wear {
  position: relative;
  width: 100%;
  height: calc(100vw * 2134 / 1920);
  /* 그라데이션 위에 노이즈 그레인이 얹힌 피그마 배경 SVG */
  background: url("../images/wear-bg-grain.svg") repeat;
  overflow: hidden;
}

/* 하단 흐릿한 군중 이미지 */
.wear__crowd {
  position: absolute;
  left: 0;
  top: calc(100vw * 1592 / 1920);
  width: 100%;
  height: calc(100vw * 542 / 1920);
  object-fit: cover;
  object-position: center bottom;
  opacity: 0.5;
  pointer-events: none;
}

/* 제목과 문구 */
.wear__paragraph {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100vw * 200 / 1920);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(100vw * 40 / 1920);
  text-align: center;
}
.wear__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Paperlogy", sans-serif;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}
.wear__title-sm { font-size: calc(100vw * 60 / 1920);  color: var(--c-white); }
.wear__title-lg { font-size: calc(100vw * 100 / 1920); color: var(--c-green); }
.wear__desc {
  width: calc(100vw * 824 / 1920);
  font-family: var(--f-body);
  font-weight: 500;
  font-size: calc(100vw * 26 / 1920);
  line-height: calc(100vw * 36 / 1920);
  color: #f2efe9;
}

/* 티셔츠 사진 2장. 뒷면이 앞면 위로 겹친다. */
.wear__shirt {
  position: absolute;
  top: calc(100vw * 754 / 1920);
  width: calc(100vw * 840 / 1920);
  height: calc(100vw * 890 / 1920);
  overflow: hidden;
}
.wear__shirt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wear__shirt--front { left: calc(100vw * 760 / 1920); z-index: 1; }
.wear__shirt--back  { left: calc(100vw * 320 / 1920); z-index: 2; }

/* 하단 안내문과 버튼 */
.wear__bottom {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100vw * 1686 / 1920);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(100vw * 56 / 1920);
}
.wear__note {
  width: calc(100vw * 824 / 1920);
  font-family: var(--f-body);
  font-weight: 700;
  font-size: calc(100vw * 22 / 1920);
  line-height: calc(100vw * 32 / 1920);
  color: var(--c-white);
  text-align: center;
}
.wear__buy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(100vw * 12 / 1920);
  width: calc(100vw * 373 / 1920);
}
.wear__buy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: calc(100vw * 24 / 1920) calc(100vw * 70 / 1920);
  background: var(--c-black);
  border: 1px solid var(--c-olive);
  color: var(--c-green);
  font-family: "Paperlogy", sans-serif;
  font-weight: 800;
  font-size: calc(100vw * 32 / 1920);
  line-height: calc(100vw * 44 / 1920);
  white-space: nowrap;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.wear__buy-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
.wear__buy-note {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: calc(100vw * 18 / 1920);
  line-height: calc(100vw * 24 / 1920);
  color: var(--c-white);
  text-align: center;
}

/* 함께하는 방법 섹션 */
.join {
  position: relative;
  width: 100%;
  height: calc(100vw * 1532 / 1920);
  background: #000;
  overflow: hidden;
}

/* 제목 */
.join__head {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100vw * 200 / 1920);
  z-index: 2;
  display: flex;
  justify-content: center;
}
.join__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Paperlogy", sans-serif;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}
.join__title-sm { font-size: calc(100vw * 60 / 1920);  color: var(--c-white); }
.join__title-lg { font-size: calc(100vw * 100 / 1920); color: var(--c-green); }

/* 3개 카드 */
.join__cards {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100vw * 469 / 1920);
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: calc(100vw * 55 / 1920);
}
.join__card {
  box-sizing: border-box;
  width: calc(100vw * 390 / 1920);
  height: calc(100vw * 356 / 1920);
  padding-top: calc(100vw * 50 / 1920);
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #303030;
  border: 1px solid var(--c-green);
}
.join__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100vw * 88 / 1920);
  height: calc(100vw * 88 / 1920);
  margin-bottom: calc(100vw * 20 / 1920);
  background: #000;
}
.join__card-icon img {
  width: calc(100vw * 48 / 1920);
  height: calc(100vw * 48 / 1920);
  display: block;
}
.join__card-title {
  margin-bottom: calc(100vw * 8 / 1920);
  font-family: var(--f-body);
  font-weight: 700;
  font-size: calc(100vw * 32 / 1920);
  line-height: calc(100vw * 44 / 1920);
  color: var(--c-white);
}
.join__card-desc {
  width: calc(100vw * 320 / 1920);
  font-family: var(--f-body);
  font-weight: 500;
  font-size: calc(100vw * 22 / 1920);
  line-height: calc(100vw * 32 / 1920);
  color: #d8d8d8;
  text-align: center;
}

/* 하단 가로 무한 흐름 (좌에서 우로, 호버 시 정지) */
.join__flow {
  position: absolute;
  left: 0;
  top: calc(100vw * 985 / 1920);
  width: 100%;
  height: calc(100vw * 547 / 1920);
  overflow: hidden;
}
.join__flow-track {
  display: flex;
  align-items: flex-end;
  width: max-content;
  height: 100%;
  animation: join-flow 30s linear infinite;
  animation-play-state: paused;
}
/* 화면에 들어오면 흐르고, 호버하면 멈춘다 */
.join__flow.is-active .join__flow-track { animation-play-state: running; }
.join__flow-item {
  flex: 0 0 auto;
  width: calc(100vw * 410 / 1920);
  margin-right: calc(100vw * 30 / 1920);
  overflow: hidden;
}
.join__flow-item.h1 { height: calc(100vw * 547 / 1920); }
.join__flow-item.h2 { height: calc(100vw * 467 / 1920); }
.join__flow-item.h3 { height: calc(100vw * 373 / 1920); }
.join__flow-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 두 벌 복제 후 0 에서 -50% 로 이동 = 우에서 좌로 흐름 */
@keyframes join-flow {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* 장식 이모지 */
.join__emoji { position: absolute; z-index: 3; pointer-events: none; }
.join__emoji--1 {
  left: calc(100vw * 116 / 1920);
  top: calc(100vw * 199 / 1920);
  width: calc(100vw * 300 / 1920);
  transform: rotate(-20deg);
}
.join__emoji--2 {
  left: calc(100vw * 1478 / 1920);
  top: calc(100vw * 149 / 1920);
  width: calc(100vw * 160 / 1920);
  transform: rotate(20deg);
}
.join__emoji--3 {
  left: calc(100vw * 1176 / 1920);
  top: calc(100vw * 854 / 1920);
  width: calc(100vw * 205 / 1920);
  transform: rotate(20deg);
}

/* 후원금 사용처 섹션 */
.give {
  position: relative;
  width: 100%;
  height: calc(100vw * 1705 / 1920);
  background: #000;
  overflow: hidden;
}
.give__head {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100vw * 200 / 1920);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(100vw * 40 / 1920);
  text-align: center;
}
.give__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Paperlogy", sans-serif;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}
.give__title-sm { font-size: calc(100vw * 60 / 1920);  color: var(--c-white); }
.give__title-lg { font-size: calc(100vw * 100 / 1920); color: var(--c-green); }
.give__desc {
  width: calc(100vw * 824 / 1920);
  font-family: var(--f-body);
  font-weight: 500;
  font-size: calc(100vw * 26 / 1920);
  line-height: calc(100vw * 36 / 1920);
  color: #f2efe9;
}

/* 3개 행. 세로로 쌓고, 가로 위치는 JS 가 스크롤에 따라 옮긴다. */
.give__rows {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100vw * 637 / 1920);
}
.give__row {
  position: absolute;
  left: 0;
  width: 100%;
  height: calc(100vw * 356 / 1920);
  overflow: hidden;
  will-change: transform;
  /* 섹션 진입 시 바깥에서 안으로 미끄러져 들어온다 (순차 슬라이드) */
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.give__row-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.give__row::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0) 34%, rgba(0,0,0,0.8) 60%);
}
.give__row-text {
  position: absolute;
  left: calc(100vw * 1081 / 1920);
  top: calc(100vw * 116 / 1920);
  width: calc(100vw * 520 / 1920);
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: calc(100vw * 16 / 1920);
  color: var(--c-white);
}
.give__row-title {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: calc(100vw * 32 / 1920);
  line-height: calc(100vw * 44 / 1920);
}
.give__row-desc {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: calc(100vw * 22 / 1920);
  line-height: calc(100vw * 32 / 1920);
}

/* 초기 상태: 좌우로 흩어져 반쯤 걸침. 스크롤하면 JS 가 가운데로 모은다. */
/* 초기: 화면 바깥에서 대기. 좌 / 우 / 좌 번갈아. 진입 시 차례대로 밀려 들어온다. */
.give__row--1 { top: 0;                          transform: translateX(-110%); transition-delay: 0s;   }
.give__row--2 { top: calc(100vw * 356 / 1920);   transform: translateX(110%);  transition-delay: 0.7s; }
.give__row--3 { top: calc(100vw * 712 / 1920);   transform: translateX(-110%); transition-delay: 1.4s; }

/* 섹션이 보이면 세 배너가 차례대로 가운데(0)로 슬라이드된다 */
.give.is-converged .give__row--1,
.give.is-converged .give__row--2,
.give.is-converged .give__row--3 { transform: translateX(0); }

.give__row--1 .give__row-img { object-position: center calc(100vw * -200 / 1920); }
.give__row--2 .give__row-img { object-position: center calc(100vw * -200 / 1920); }
.give__row--3 .give__row-img { object-position: center calc(100vw * -200 / 1920); }

/* 마무리 CTA 섹션 */
.closing {
  position: relative;
  width: 100%;
  height: calc(100vw * 1037 / 1920);
  background: url("../images/wear-bg-grain.svg") repeat;
  overflow: hidden;
}
.closing__lead {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100vw * 200 / 1920);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(100vw * 12 / 1920);
  text-align: center;
}
.closing__lead-title {
  font-family: "Paperlogy", sans-serif;
  font-weight: 700;
  font-size: calc(100vw * 40 / 1920);
  color: var(--c-green);
}
.closing__lead-desc {
  width: calc(100vw * 824 / 1920);
  font-family: var(--f-body);
  font-weight: 500;
  font-size: calc(100vw * 26 / 1920);
  line-height: calc(100vw * 36 / 1920);
  color: #f2efe9;
}
.closing__title {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100vw * 420 / 1920);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Paperlogy", sans-serif;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}
.closing__title-sm { font-size: calc(100vw * 60 / 1920);  color: var(--c-white); }
.closing__title-lg { font-size: calc(100vw * 100 / 1920); color: var(--c-green); }
.closing__cta {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100vw * 709 / 1920);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: calc(100vw * 24 / 1920);
}
.closing__cta-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(100vw * 12 / 1920);
  width: calc(100vw * 373 / 1920);
}
.closing__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(100vw * 24 / 1920) calc(100vw * 70 / 1920);
  font-family: "Paperlogy", sans-serif;
  font-weight: 800;
  font-size: calc(100vw * 32 / 1920);
  line-height: calc(100vw * 44 / 1920);
  white-space: nowrap;
  border: 1px solid;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.closing__btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.closing__btn--green { background: var(--c-green); color: var(--c-black); border-color: var(--c-black); }
.closing__btn--dark  { width: 100%; background: var(--c-black); color: var(--c-green); border-color: var(--c-olive); }
.closing__note {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: calc(100vw * 18 / 1920);
  line-height: calc(100vw * 24 / 1920);
  color: var(--c-white);
  text-align: center;
}

/* 캐러셀 닷은 모바일에서만 표시 */
.give__dots { display: none; }

/* 모바일 전용 줄바꿈 (PC 에서는 숨김) */
.br-m { display: none; }

/* 월드투게더 x 헤세드코리아 사이의 작은 x 마크 */
.x-mark {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin: 0 0.18em;
  vertical-align: middle;
}

/* 로딩 스피너 (WORLD TOGETHER 원형 텍스트 + 초록 아크) */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: #000;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader__box { position: relative; width: 190px; height: 190px; }
.loader__text {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: loader-spin 9s linear infinite;
}
.loader__text text {
  fill: var(--c-green);
  font-family: var(--f-display), sans-serif;
  font-size: 20px;
  letter-spacing: 1px;
}
.loader__arc {
  position: absolute;
  inset: 55px;
  border-radius: 50%;
  border: 3px solid rgba(193, 255, 0, 0.18);
  border-top-color: var(--c-green);
  animation: loader-spin 0.9s linear infinite;
}
@keyframes loader-spin { to { transform: rotate(360deg); } }