/* 한붕선 소개 페이지 아래쪽: 그림과 글 구역, 실제 화면 줄, 마지막 권유, 바닥글, 넓은 화면 배치. landing.css 다음에 읽는다. */
section {
  padding: 56px 0;
}
h2 {
  margin: 0 0 8px;
  font-size: clamp(24px, 5.2vw, 32px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.sub {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 16px;
  text-wrap: pretty;
}
p {
  text-wrap: pretty;
}

/* A picture beside its words; on a phone the picture comes first. */
.feature .wrap {
  display: grid;
  gap: 28px;
  align-items: center;
}
.feature p {
  margin: 0 0 12px;
  color: #eadcc6;
  font-size: 17px;
}
.art {
  width: 100%;
  border-radius: 22px;
  box-shadow: 0 18px 48px #000a;
}
.screen {
  width: min(250px, 62vw);
  margin: 0 auto;
  border-radius: 28px;
  box-shadow:
    0 18px 48px #000a,
    0 0 0 1px #ffffff1a;
}
.fish {
  width: min(400px, 100%);
  margin: 0 auto;
}
.note {
  width: min(440px, 92%);
  margin: 0 auto;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 16px 24px #000c);
  transform: rotate(-3deg);
}
.points {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.points li {
  display: grid;
  gap: 2px;
}
.points b {
  font-size: 18px;
  font-weight: 700;
  color: var(--gold);
}
.points span {
  color: var(--muted);
  font-size: 16px;
  text-wrap: pretty;
}
.band {
  background: linear-gradient(180deg, var(--sky-mid), var(--sky-low));
}

/* Real store pictures in a row that slides on a phone. */
.shots {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(62vw, 230px);
  gap: 14px;
  margin: 0;
  padding: 4px 16px 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.shots::-webkit-scrollbar {
  display: none;
}
.shots img {
  width: 100%;
  border-radius: 20px;
  scroll-snap-align: center;
  box-shadow: 0 10px 30px #0008;
}

.last {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: 0;
  text-align: center;
  background: radial-gradient(70% 60% at 50% 0%, #ff9a3c40, transparent 75%), var(--sky-low);
}
.last .wrap {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding-top: 44px;
}
.last h2 {
  margin: 0;
}

.foot {
  padding: 28px 0 max(36px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: #161424;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}
.foot nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin-bottom: 12px;
}
.foot a {
  color: var(--text);
}
.foot p {
  margin: 0 auto 10px;
  max-width: 40em;
}

@media (min-width: 860px) {
  .hero .wrap {
    padding-top: 56px;
  }
  section {
    padding: 80px 0;
  }
  .feature .wrap {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }
  .feature.flip .wrap > :first-child {
    order: 2;
  }
  .shots {
    justify-content: center;
    grid-auto-columns: 200px;
    overflow: visible;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .hero::before,
  .last::before {
    animation: snow 22s linear infinite;
  }
  @keyframes snow {
    to {
      background-position:
        40px 240px,
        -30px 240px,
        20px 240px,
        -20px 240px,
        30px 240px;
    }
  }
}