:root {
  --poster-sky: #7ebc8a;
  --poster-ink: #111;
  --poster-mute: #2c3a44;
  --poster-red: #e31c24;
  --poster-star: #f5c400;
  --poster-card: #fff;
  --font-display: "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-ui: "Noto Sans KR", "Malgun Gothic", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

.poster-body {
  min-height: 100vh;
  background: var(--poster-sky);
  color: var(--poster-ink);
  font-family: var(--font-ui);
  --card-w: 164px;
  --photo-w: 50px;
  --photo-h: 46px;
  --photo-name: 10px;
  --church-name: 12px;
  --church-region: 9px;
  --people-gap: 4px;
  --photo-radius: 7px;
}

.poster {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(900px, 100%);
  margin: 0 auto;
  min-height: 100vh;
  overflow-x: hidden;
  --card-w: 164px;
  --photo-w: 50px;
  --photo-h: 46px;
  --photo-name: 10px;
  --church-name: 12px;
  --church-region: 9px;
  --people-gap: 4px;
  --photo-radius: 7px;
}

.poster__title {
  position: relative;
  z-index: 6;
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  padding: 24px 20px 20px;
  text-align: center;
  pointer-events: none;
}

.poster__title h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 3.5vw, 34px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.poster__stage {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
}

.poster__svg {
  display: block;
  width: 100%;
  height: auto;
}

.korea-extrude path {
  fill: #9aa7b3;
  stroke: #9aa7b3;
  stroke-width: 0.9;
  stroke-linejoin: round;
}

.korea-regions path {
  fill: #f3f5f7;
  stroke: #c3ccd4;
  stroke-width: 0.42;
  stroke-linejoin: round;
}

.korea-outline path {
  fill: none;
  stroke: #fff;
  stroke-width: 0.55;
  stroke-linejoin: round;
  pointer-events: none;
}

.poster__cards {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}

.church-card {
  position: absolute;
  width: var(--card-w);
  pointer-events: none;
  text-align: center;
}

.church-card__name {
  display: inline-block;
  width: auto;
  max-width: 100%;
  margin: 0 0 5px;
  overflow-wrap: anywhere;
  word-break: break-word;
  pointer-events: auto;
  cursor: pointer;
  vertical-align: top;
  font-size: var(--church-name);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.church-card__people {
  pointer-events: none;
}

.church-card .person {
  pointer-events: auto;
  cursor: pointer;
}

.person {
  flex: 0 0 var(--photo-w);
  width: var(--photo-w);
  min-width: var(--photo-w);
  max-width: var(--photo-w);
  margin: 0;
  cursor: pointer;
  text-align: center;
  background: #fff;
  border: 3px solid #fff;
  border-radius: var(--photo-radius);
  box-shadow: 0 0 0 1.5px #1a1a1a, 0 1px 4px rgb(0 0 0 / 0.18);
  overflow: hidden;
}

.church-card.is-left {
  text-align: right;
}

.church-card.is-right {
  text-align: left;
}

.church-card__people {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--people-gap);
}

.church-card.is-left .church-card__people {
  justify-content: flex-end;
}

.church-card.is-right .church-card__people {
  justify-content: flex-start;
}

.church-card.is-center .church-card__people,
.church-card.is-bottom .church-card__people {
  justify-content: center;
}

.church-card.is-bottom {
  text-align: center;
}

.person img,
.person__ph {
  display: block;
  width: 100%;
  height: var(--photo-h);
  min-width: 0;
  min-height: var(--photo-h);
  max-width: 100%;
  max-height: var(--photo-h);
  object-fit: cover;
  object-position: center;
  image-orientation: from-image;
  background: #d4ead9;
  border: 0;
  border-radius: 6px 6px 0 0;
}

.person__ph {
  display: grid;
  place-items: center;
  color: #5a7a62;
  font-size: 9px;
}

.person figcaption {
  margin: 0;
  padding: 3px 2px 4px;
  font-size: var(--photo-name);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.04em;
  text-align: center;
  background: #fff;
}

.poster__brand {
  position: absolute;
  right: 28px;
  bottom: 22px;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #1d5238;
}

.poster__empty {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 10px 16px;
  background: rgb(255 255 255 / 0.72);
  font-size: 14px;
}

.poster__nav {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin: 0;
  padding: 16px;
  background: var(--poster-sky);
  font-size: 13px;
}

.poster__nav a {
  color: #16402a;
}

.poster-static .church-card,
.poster-static .person,
.poster-static .map-dot,
.poster-static .map-star,
.poster-static .map-host-label {
  cursor: default;
  pointer-events: none;
}

.poster-static {
  --font-display: "Noto Serif KR", "Batang", serif;
}

.poster-static .poster__title h1 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.4;
}

.poster-static .poster {
  min-height: 0;
}

.map-dot {
  fill: var(--poster-red);
  stroke: #fff;
  stroke-width: 2;
  cursor: pointer;
}

.map-line {
  stroke: rgb(40 40 40 / 0.38);
  stroke-width: 1.5;
  fill: none;
}

.map-star {
  fill: var(--poster-star);
  stroke: #111;
  stroke-width: 1.2;
  cursor: pointer;
}

.map-host-label {
  position: absolute;
  z-index: 4;
  margin: 0;
  pointer-events: auto;
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.15;
  color: #c79200;
  white-space: nowrap;
  cursor: pointer;
  text-shadow:
    -1px 0 0 #1a1a1a,
    1px 0 0 #1a1a1a,
    0 -1px 0 #1a1a1a,
    0 1px 0 #1a1a1a,
    0 0 6px #fff;
}

.map-pop {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgb(16 40 26 / 0);
  cursor: pointer;
  overflow: hidden;
}

.map-pop[hidden] {
  display: none;
}

.map-pop.is-on {
  background: rgb(16 40 26 / 0.55);
  transition: background-color 1.15s ease;
}

.map-pop.is-leaving {
  background: rgb(16 40 26 / 0);
  transition: background-color 0.38s ease;
}

.map-pop__panel {
  position: relative;
  z-index: 1;
  max-width: min(720px, 94vw);
  padding: 44px 48px 36px;
  color: var(--poster-ink);
  text-align: center;
  background:
    radial-gradient(120% 80% at 50% 0%, rgb(255 252 244 / 0.95), transparent 55%),
    linear-gradient(180deg, #fffaf1 0%, #f3ead8 100%);
  border: 2.5px solid #1c1c1c;
  border-radius: 3px;
  box-shadow:
    0 0 0 6px #fffaf1,
    0 0 0 8px #1c1c1c,
    0 22px 44px rgb(16 36 22 / 0.34);
  transform: translate(var(--pop-x, 0px), var(--pop-y, 0px)) scale(0.08) rotate(-10deg);
  transform-origin: center center;
  opacity: 0;
}

.map-pop__panel::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1.5px solid rgb(201 154 28 / 0.72);
  pointer-events: none;
}

.map-pop__panel::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 64px;
  height: 8px;
  transform: translate(-50%, -50%);
  background: var(--poster-star);
  box-shadow:
    0 0 0 2px #1c1c1c,
    inset 0 -1px 0 rgb(0 0 0 / 0.12);
  pointer-events: none;
}

.map-pop.is-on .map-pop__panel {
  animation: pop-panel-in 1.55s cubic-bezier(0.18, 1.18, 0.28, 1) both;
}

.map-pop.is-leaving .map-pop__panel {
  animation: pop-panel-out 0.42s cubic-bezier(0.55, 0.06, 0.9, 0.35) both;
}

.map-pop__head {
  position: relative;
  z-index: 1;
  padding: 0 12px 18px;
}

.map-pop__head::after {
  content: "";
  display: block;
  width: min(220px, 62%);
  height: 3px;
  margin: 16px auto 0;
  background:
    linear-gradient(90deg, transparent, var(--poster-red) 12%, var(--poster-star) 50%, var(--poster-red) 88%, transparent);
}

.map-pop__name {
  margin: 0;
  font-size: clamp(26px, 4.2vw, 36px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.25;
}

.map-pop.is-on .map-pop__name {
  animation: pop-copy-in 1s 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.map-pop__region {
  display: inline-block;
  margin: 10px 0 0;
  padding: 3px 11px 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #2d4a34;
  background: rgb(126 188 138 / 0.28);
  border: 1px solid rgb(45 74 52 / 0.18);
  border-radius: 999px;
}

.map-pop.is-on .map-pop__region {
  animation: pop-copy-in 0.95s 0.48s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.map-pop__people {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 22px;
  margin: 8px 0 0;
  padding-top: 8px;
}

.map-pop .person {
  --photo-w: 168px;
  --photo-h: 190px;
  --photo-radius: 14px;
  --photo-name: 17px;
  flex: 0 0 168px;
  width: 168px;
  min-width: 168px;
  max-width: 168px;
  border-width: 4px;
  border-radius: 14px;
}

.map-pop.is-on .person {
  animation: pop-person-in 1s cubic-bezier(0.22, 1, 0.32, 1) both;
}

.map-pop.is-on .person:nth-child(1) { animation-delay: 0.4s; }
.map-pop.is-on .person:nth-child(2) { animation-delay: 0.58s; }
.map-pop.is-on .person:nth-child(3) { animation-delay: 0.76s; }
.map-pop.is-on .person:nth-child(4) { animation-delay: 0.94s; }
.map-pop.is-on .person:nth-child(5) { animation-delay: 1.12s; }
.map-pop.is-on .person:nth-child(6) { animation-delay: 1.3s; }

.map-pop .person img,
.map-pop .person__ph {
  display: block;
  width: 168px;
  height: 190px;
  min-width: 168px;
  min-height: 190px;
  max-width: 168px;
  max-height: 190px;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
  border: 0;
  border-radius: 10px 10px 0 0;
}

.map-pop .person figcaption {
  font-size: 17px;
  padding: 8px 8px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes pop-panel-in {
  0% {
    transform: translate(var(--pop-x, 0px), var(--pop-y, 0px)) scale(0.08) rotate(-10deg);
    opacity: 0.15;
    box-shadow:
      0 0 0 6px #fffaf1,
      0 0 0 8px #1c1c1c,
      0 8px 18px rgb(16 36 22 / 0.12);
    filter: blur(10px);
  }
  58% {
    transform: scale(1.08) rotate(1.4deg);
    opacity: 1;
    filter: blur(0);
    box-shadow:
      0 0 0 6px #fffaf1,
      0 0 0 8px #1c1c1c,
      0 28px 56px rgb(16 36 22 / 0.3);
  }
  78% {
    transform: scale(0.97) rotate(-0.5deg);
  }
  100% {
    transform: none;
    opacity: 1;
    filter: none;
    box-shadow:
      0 0 0 6px #fffaf1,
      0 0 0 8px #1c1c1c,
      0 22px 44px rgb(16 36 22 / 0.34);
  }
}

@keyframes pop-panel-out {
  0% {
    transform: none;
    opacity: 1;
    filter: none;
  }
  100% {
    transform: translate(var(--pop-x, 0px), var(--pop-y, 0px)) scale(0.08) rotate(8deg);
    opacity: 0;
    filter: blur(8px);
  }
}

@keyframes pop-copy-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.92);
    letter-spacing: 0.08em;
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: none;
    letter-spacing: -0.04em;
    filter: none;
  }
}

@keyframes pop-person-in {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .map-pop,
  .map-pop__panel,
  .map-pop.is-on .map-pop__name,
  .map-pop.is-on .map-pop__region,
  .map-pop.is-on .person {
    animation: none !important;
    transition: opacity 0.2s ease, background-color 0.2s ease;
    filter: none;
  }

  .map-pop.is-on .map-pop__panel {
    transform: none;
    opacity: 1;
  }

  .map-pop.is-leaving .map-pop__panel {
    opacity: 0;
  }
}

@media (max-width: 720px) {
  .poster {
    overflow-x: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .poster__svg,
  .poster__cards {
    min-width: 720px;
  }

  .poster__title {
    padding: 14px 12px 12px;
  }

  .poster__title h1 {
    font-size: 18px;
  }

  .poster-static .poster__title h1 {
    white-space: normal;
    font-size: clamp(16px, 4.6vw, 22px);
    line-height: 1.35;
  }

  .poster-static .poster {
    padding-bottom: env(safe-area-inset-bottom);
  }
}