/* 리소스 제공 (/resources) — 단일 히어로와 보호 다운로드 진입점 */

.resources-body {
  --resources-keyline: var(--keyline-x, var(--space-6));
  background: var(--background);
  color: var(--foreground);
}

.resources-page {
  position: relative;
  z-index: 1;
  min-block-size: 100svh;
}

/* 히어로 배경: 정지 수채 워시(구름 덩어리 포함) + 미세 입자 캔버스.
   움직임은 전부 캔버스가 담당한다. 배경 레이어를 애니메이션하면 전체 화면 래스터가
   매 프레임 반복되어 초기 진입 프레임까지 밀린다. */
.resources-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.resources-atmosphere::before,
.resources-atmosphere::after {
  content: "";
  position: absolute;
  inset: -10%;
}

.resources-atmosphere::before {
  background:
    radial-gradient(30% 26% at 30% 24%, rgba(255, 255, 255, 0.66) 0%, rgba(255, 255, 255, 0) 72%),
    radial-gradient(26% 22% at 66% 16%, rgba(255, 250, 224, 0.54) 0%, rgba(255, 250, 224, 0) 74%),
    radial-gradient(34% 26% at 84% 60%, rgba(255, 255, 255, 0.46) 0%, rgba(255, 255, 255, 0) 76%),
    radial-gradient(28% 24% at 16% 70%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 74%),
    radial-gradient(30% 26% at 52% 48%, rgba(255, 255, 255, 0.44) 0%, rgba(255, 255, 255, 0) 74%),
    radial-gradient(28% 24% at 76% 88%, rgba(214, 236, 236, 0.42) 0%, rgba(214, 236, 236, 0) 76%),
    radial-gradient(58% 46% at 24% 16%, rgba(250, 240, 186, 0.92) 0%, rgba(250, 240, 186, 0) 68%),
    radial-gradient(46% 40% at 60% 34%, rgba(255, 253, 244, 0.96) 0%, rgba(255, 253, 244, 0) 72%),
    radial-gradient(52% 48% at 96% 30%, rgba(96, 166, 208, 0.82) 0%, rgba(96, 166, 208, 0) 66%),
    radial-gradient(44% 42% at 88% 78%, rgba(112, 190, 198, 0.72) 0%, rgba(112, 190, 198, 0) 68%),
    radial-gradient(56% 46% at 12% 88%, rgba(168, 208, 126, 0.78) 0%, rgba(168, 208, 126, 0) 70%),
    radial-gradient(42% 38% at 46% 96%, rgba(198, 220, 152, 0.7) 0%, rgba(198, 220, 152, 0) 72%),
    radial-gradient(38% 34% at 8% 46%, rgba(246, 231, 208, 0.7) 0%, rgba(246, 231, 208, 0) 74%),
    linear-gradient(128deg, #fdf7e4 0%, #fbfaf1 38%, #eef6f3 64%, #dcecf4 100%);
  z-index: 0;
}

/* 수채 종이의 미세한 결. 정지 레이어로만 두어 매 프레임 합성 비용이 생기지 않게 한다.
   (soft-light 블렌드는 전체 화면 재합성을 유발해 초기 렌더를 늦추므로 쓰지 않는다.) */
.resources-atmosphere::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  z-index: 1;
  opacity: 0.05;
}

.resources-particles {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.resources-body .block-app-header .header-inner {
  max-width: none;
  padding-inline: var(--resources-keyline);
}

/* 히어로 워시가 헤더 밑까지 이어지도록 공용 헤더 표면을 이 페이지에서만 비운다. */
.resources-body .block-nav-header,
.resources-body .block-nav-header.is-surface {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.resources-content {
  display: grid;
  align-content: center;
  justify-items: center;
  box-sizing: border-box;
  width: 100%;
  min-block-size: 100svh;
  max-width: none;
  margin-inline: 0;
  padding: calc(var(--main-header-height, 48px) + var(--space-10)) var(--resources-keyline) var(--space-12);
}

.resources-hero {
  display: grid;
  gap: var(--space-6);
  justify-items: center;
  min-width: 0;
  text-align: center;
}

.resources-title {
  max-inline-size: min(100%, 18ch);
  margin: 0;
  font-size: var(--fs-display-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--lh-display-xl);
  word-break: keep-all;
}

.resources-download-action {
  display: grid;
  min-block-size: var(--control-h-l);
}

.resources-download-stack {
  display: grid;
  gap: var(--space-2);
  justify-items: center;
  max-inline-size: 100%;
}

.resources-download-notes {
  display: grid;
  gap: var(--space-1);
  justify-items: center;
}

.resources-version-note,
.resources-quota-status {
  margin: 0;
  color: var(--muted-foreground);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
}

.resources-download-action .btn {
  justify-content: center;
  min-inline-size: 12rem;
}

.resources-download-action .btn[aria-disabled="true"] {
  cursor: not-allowed;
}

.resources-download-action .btn:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .resources-content {
    padding-top: calc(var(--main-header-height, 48px) + var(--space-8));
    padding-bottom: var(--space-8);
  }

  .resources-title {
    font-size: var(--fs-display-lg);
    line-height: var(--lh-display-lg);
  }

  .resources-download-stack,
  .resources-download-action,
  .resources-download-action .btn {
    width: 100%;
  }
}