@charset "utf-8";
/* 모바일 (<=767px). 375 기준 vw 로 재배치. PC 자산 그대로 재사용. */

/* 제목이 길면 줄바꿈되도록 (PC 는 nowrap) */
.squad__title, .wear__title, .join__title, .give__title, .closing__title { white-space: normal; }

/* ============ 히어로 ============ */
.hero {
  height: calc(100vw * 783 / 375);
}
.hero__stage { width: 100% !important; height: 100% !important; transform: none !important; 
background: linear-gradient(73deg, #000 21.11%, rgba(0, 0, 0, 0.00) 50.91%);
}
/* 모바일 태극기는 상단에만. 아래로 페이드아웃해서 하단 경계선이 안 생기게 */
.hero__flag {
  background: url("../images/hero-taegukgi-m.webp") #000 center calc(100vw / 375) / 100% auto no-repeat;
  opacity: 1;
  filter: brightness(1.32);
  /* 이미지 하단(≈57%)에서 검게 끝나도록 페이드 (하드 엣지 방지) */
  -webkit-mask-image: linear-gradient(180deg, #000 42%, rgba(0,0,0,0) 57%);
          mask-image: linear-gradient(180deg, #000 42%, rgba(0,0,0,0) 57%);
}
/* 모바일은 stage 그라데이션이 오버레이 역할을 하므로 기존 오버레이는 숨김 */
.hero__overlay { display: none; }

.person {
  top: calc(100vw * 118 / 375);
  left: 50%;
  margin-left: calc(100vw * -145 / 375);
  width: calc(100vw * 290 / 375);
  height: calc(100vw * 390 / 375);
  display: block;
  overflow: hidden;
  z-index: 5;   /* 모바일은 인물이 글씨보다 앞 */
}
.person img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

.d-word { font-size: calc(100vw * 62 / 375); }
.d-igot { left: calc(100vw * 26 / 375);  top: calc(100vw * 36 / 375); z-index: 3; }
.d-your { left: calc(100vw * 188 / 375); top: calc(100vw * 36 / 375); z-index: 3; }
.d-back { left: calc(100vw * 193 / 375); top: calc(100vw * 82 / 375); z-index: 3; }

/* 모바일 인트로: 좌우 슬라이드 없이 페이드만 */
.d-igot, .d-your, .d-back, .hero__sub { transform: none; }
.hero__stage.is-intro .d-igot,
.hero__stage.is-intro .d-your,
.hero__stage.is-intro .d-back { transform: none; }

.hero__sub {
  left: 0; right: 0; width: auto;
  top: calc(100vw * 528 / 375);
  font-size: calc(100vw * 19 / 375);
  line-height: calc(100vw * 28 / 375);
  text-align: center;
}
.hero__cta {
  left: 0; right: 0;
  top: calc(100vw * 604 / 375);
  flex-direction: column;
  align-items: center;
  gap: calc(100vw * 12 / 375);
}
.hero__cta-col { width: calc(100vw * 323 / 375); align-items: center; gap: calc(100vw * 12 / 375); }
.btn {
  width: calc(100vw * 323 / 375);
  padding: calc(100vw * 16 / 375) calc(100vw * 50 / 375);
  font-size: calc(100vw * 22 / 375);
  line-height: calc(100vw * 32 / 375);
}
.hero__note { font-size: calc(100vw * 16 / 375); line-height: calc(100vw * 24 / 375); white-space: normal; }

/* ============ 제복 근무자 소개 ============ */
.squad { padding-bottom: calc(100vw * 120 / 375); }
.squad__intro { height: calc(100vw * 828 / 375); }
.squad__title { top: calc(100vw * 120 / 375); }
.squad__title-sm { font-size: calc(100vw * 24 / 375); }
.squad__title-lg { font-size: calc(100vw * 36 / 375); }

.squad__desc {
  left: calc(100vw * 26 / 375);
  right: auto;
  width: calc(100vw * 323 / 375);
  top: calc(100vw * 230 / 375);
}
.squad__desc-body { font-size: calc(100vw * 19 / 375); line-height: calc(100vw * 28 / 375); }
.squad__desc-strong { margin-top: calc(100vw * 24 / 375); font-size: calc(100vw * 28 / 375); line-height: 40px; }

.squad__photo { top: calc(100vw * 662 / 375); width: calc(100vw * 156 / 375); height: calc(100vw * 155 / 375); }
.squad__photo--l { left: calc(100vw * 26 / 375); }
.squad__photo--r { left: calc(100vw * 193 / 375); }

.squad__reveal { height: auto; }
.squad__fire {
  position: static;
  top: auto;
  width: calc(100vw * 323 / 375);
  height: calc(100vw * 184 / 375);
  margin: 0 auto;
}
.squad__fire-img { object-position: center; }

/* ============ 캠페인 티셔츠 ============ */
.wear { height: calc(100vw * 1146 / 375); }
.wear__paragraph { top: calc(100vw * 120 / 375); gap: calc(100vw * 40 / 375); }
.wear__title-sm { font-size: calc(100vw * 24 / 375); }
.wear__title-lg { font-size: calc(100vw * 36 / 375); }
.wear__desc { width: calc(100vw * 345 / 375); font-size: calc(100vw * 19 / 375); line-height: calc(100vw * 28 / 375); letter-spacing: calc(100vw * -0.76 / 375); }

.wear__shirt { top: calc(100vw * 590 / 375); width: calc(100vw * 225 / 375); height: calc(100vw * 238 / 375); }
.wear__shirt--front { left: calc(100vw * 134 / 375); }
.wear__shirt--back  { left: calc(100vw * 16 / 375); }
.wear__crowd { top: calc(100vw * 1040 / 375); height: calc(100vw * 106 / 375); }

.wear__bottom { top: calc(100vw * 860 / 375); gap: calc(100vw * 44 / 375); }
.wear__note { width: calc(100vw * 295 / 375); font-size: calc(100vw * 16 / 375); line-height: calc(100vw * 24 / 375); }
.wear__buy { width: calc(100vw * 323 / 375); }
.wear__buy-btn {
  padding: calc(100vw * 16 / 375) calc(100vw * 50 / 375);
  font-size: calc(100vw * 22 / 375);
  line-height: calc(100vw * 32 / 375);
}
.wear__buy-note { font-size: calc(100vw * 16 / 375); line-height: calc(100vw * 24 / 375); }

/* ============ 함께하는 방법 ============ */
.join { height: calc(100vw * 1036 / 375); }
.join__head { top: calc(100vw * 120 / 375); }
.join__title-sm { font-size: calc(100vw * 24 / 375); }
.join__title-lg { font-size: calc(100vw * 36 / 375); }

.join__cards {
  top: calc(100vw * 230 / 375);
  left: calc(100vw * 26 / 375);
  right: calc(100vw * 26 / 375);
  flex-direction: column;
  gap: calc(100vw * 12 / 375);
}
.join__card {
  width: 100%;
  height: auto;
  min-height: calc(100vw * 184 / 375);
  padding: calc(100vw * 30 / 375) calc(100vw * 25 / 375);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "title icon" "desc desc";
  align-items: center;
  row-gap: calc(100vw * 12 / 375);
}
.join__card-icon {
  grid-area: icon;
  width: calc(100vw * 56 / 375);
  height: calc(100vw * 56 / 375);
  margin: 0;
}
.join__card-icon img { width: calc(100vw * 31 / 375); height: calc(100vw * 31 / 375); }
.join__card-title {
  grid-area: title;
  margin: 0;
  font-size: calc(100vw * 22 / 375);
  line-height: calc(100vw * 32 / 375);
  text-align: left;
}
.join__card-desc {
  grid-area: desc;
  width: auto;
  font-size: calc(100vw * 18 / 375);
  line-height: calc(100vw * 28 / 375);
  text-align: left;
}

.join__flow { top: calc(100vw * 871 / 375); height: calc(100vw * 165 / 375); }
/* 모바일은 항목이 뷰포트 대비 넓어 느리게 느껴져 속도를 올린다 */
.join__flow-track { animation-duration: 15s; }
.join__flow-item { width: calc(100vw * 124 / 375); margin-right: calc(100vw * 8 / 375); }
.join__flow-item.h1 { height: calc(100vw * 165 / 375); }
.join__flow-item.h2 { height: calc(100vw * 141 / 375); }
.join__flow-item.h3 { height: calc(100vw * 113 / 375); }

.join__emoji--1 { left: calc(100vw * 18 / 375);  top: calc(100vw * 52 / 375);  width: calc(100vw * 90 / 375); }
.join__emoji--2 { left: calc(100vw * 310 / 375); top: calc(100vw * 29 / 375);  width: calc(100vw * 59 / 375); }
.join__emoji--3 { left: calc(100vw * 283 / 375); top: calc(100vw * 804 / 375); width: calc(100vw * 74 / 375); }

/* ============ 후원금 사용처 (모바일: 캐러셀) ============ */
.give { height: calc(100vw * 1000 / 375); }
.give__head { top: calc(100vw * 120 / 375); 
    gap: calc(100vw * 200 / 1920);
}
.give__title-sm { font-size: calc(100vw * 24 / 375); }
.give__title-lg { font-size: calc(100vw * 36 / 375); }
.give__desc { width: calc(100vw * 345 / 375); font-size: calc(100vw * 19 / 375); line-height: calc(100vw * 28 / 375); letter-spacing: calc(100vw * -0.76 / 375); }

.give__rows {
  top: calc(100vw * 452 / 375);
  left: 0; right: 0;
  height: calc(100vw * 548 / 375);
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.give__rows::-webkit-scrollbar { display: none; }
.give__row {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  flex: 0 0 100vw;
  width: 100vw;
  height: 100%;
  transform: none !important;
  scroll-snap-align: center;
}
.give__row::after { background: linear-gradient(180deg, rgba(0,0,0,0) 34%, rgba(0,0,0,0.8) 95%); }
.give__row-text {
  left: calc(100vw * 26 / 375);
  top: auto;
  bottom: calc(100vw * 60 / 375);
  width: calc(100vw * 323 / 375);
  gap: calc(100vw * 12 / 375);
}
.give__row-title { font-size: calc(100vw * 24 / 375); line-height: calc(100vw * 34 / 375); }
.give__row-desc { font-size: calc(100vw * 16 / 375); line-height: calc(100vw * 24 / 375); }

.give__dots {
  display: flex;
  position: absolute;
  left: 0; right: 0;
  top: calc(100vw * 970 / 375);
  z-index: 2;
  justify-content: center;
  gap: calc(100vw * 10 / 375);
}
/* 비활성: 흰색 테두리 링 / 활성: 흰색 꽉 찬 원 */
.give__dots span {
  box-sizing: border-box;
  width: calc(100vw * 10 / 375);
  height: calc(100vw * 10 / 375);
  border-radius: 50%;
  background: transparent;
  border: calc(100vw * 2 / 375) solid #fff;
}
.give__dots span.is-on { background: #fff; }

/* ============ 마무리 CTA (모바일: 겹침 방지 위해 flow 로) ============ */
.closing {
  height: auto;
  padding: calc(100vw * 120 / 375) 0 calc(100vw * 120 / 375);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(100vw * 40 / 375);
}
.closing__lead,
.closing__title,
.closing__cta { position: static; left: auto; right: auto; top: auto; }
.closing__lead { gap: calc(100vw * 8 / 375); }
.closing__lead-title { font-size: calc(100vw * 24 / 375); line-height: 30px;}
.closing__lead-desc { width: calc(100vw * 345 / 375); font-size: calc(100vw * 19 / 375); line-height: calc(100vw * 28 / 375); letter-spacing: calc(100vw * -0.76 / 375); }
.closing__title-sm { font-size: calc(100vw * 24 / 375); }
.closing__title-lg { font-size: calc(100vw * 36 / 375); }
.closing__cta {
  flex-direction: column;
  align-items: center;
  gap: calc(100vw * 12 / 375);
}
.closing__cta-col { width: calc(100vw * 323 / 375); }
.closing__btn {
  width: calc(100vw * 323 / 375);
  padding: calc(100vw * 16 / 375) calc(100vw * 50 / 375);
  font-size: calc(100vw * 22 / 375);
  line-height: calc(100vw * 32 / 375);
}
.closing__note { font-size: calc(100vw * 16 / 375); line-height: calc(100vw * 44 / 375); }

/* 모바일 전용 줄바꿈 표시 */
.br-m { display: inline; }