/*
 * WEB-00 홈(/) — design/project/Main.dc.html(데스크톱 1280) · HomePhone.dc.html(폰 390) +
 * HOME-2(옛 사이트 nabiplay-web 랜딩 히어로 구조 참고 재배치).
 * 순서: 히어로(다크) → 이렇게 봅니다 → 갈래별 가로 스크롤 작품 목록 → 두 날개가 필요합니다 →
 *       서포터 프로젝트 → 더 알아보기 → 사전가입.
 * 색은 전부 tokens.css 의 var(--…) 만 씁니다.
 */

.home-page.layout-full-width {
  max-width: 1280px;
  padding: 0;
  /* 히어로가 50vw 계산으로 화면 끝까지 늘어나는데, 세로 스크롤 막대가 있는 브라우저에서는 그 폭(약 16px)만큼
     오른쪽으로 삐져나와 가로 스크롤이 생깁니다. 본문 밖으로 나간 부분은 잘라 냅니다(2026-10-08). */
  overflow-x: clip;
}

.home-how,
.home-category-section,
.home-wings,
.home-portals {
  padding: 0 var(--space-8);
  margin-bottom: 96px;
}

/* ── 히어로(HOME-3 · 좌우로 넘기는 3장) ─────────────────────────── */
/* 배경은 화면 전체 폭(full-bleed)으로 깔고, 안쪽 내용은 최대 폭(1280) · 여백(--space-8)에 맞춥니다.
   margin 을 뷰포트 절반만큼 끌어당겨 배경을 끝까지 채우고, 장 안쪽 padding 으로 내용 시작 위치를
   .home-page.layout-full-width(max-width 1280 · 가운데 정렬)와 맞춥니다. */
.home-slides {
  --home-slides-gutter: calc(50vw - min(50vw, 640px) + var(--space-8));
  position: relative;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: var(--space-20);
  background:
    radial-gradient(60% 80% at 76% 44%, color-mix(in srgb, var(--color-primary) 13%, transparent), transparent 72%),
    linear-gradient(180deg, var(--color-grey-50), var(--color-background));
  overflow: hidden;
}

/* 트랙 — 한 장이 화면 폭을 꽉 채우고, 밀면 한 장씩 딱 멈춥니다(scroll-snap). 스크롤 막대는 숨깁니다. */
.home-slides__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.home-slides__track::-webkit-scrollbar {
  display: none;
}

/* 한 장 — 왼쪽 글, 오른쪽 그림. 아래쪽 여백은 제자리에 있는 단추 · 점 단추(footer)가 들어갈 자리입니다.
   글 칸(auto)은 가장 긴 줄에 맞춰 넓어지고 그림이 남은 자리를 씁니다 — 정해진 줄이 중간에 꺾이지 않게. */
.home-slides__slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-12);
  min-height: clamp(560px, 78vh, 720px);
  padding: var(--space-16) var(--home-slides-gutter) 212px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* 글은 그림과 세로 가운데를 맞춰 나란히 놓습니다(전에는 아래쪽에 붙어 그림과 높이가 어긋났습니다). */
.home-slides__copy {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.home-slides__count {
  margin: 0;
  color: var(--color-primary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.08em;
}

.home-slides__count-total {
  color: var(--color-grey-600);
}

/* 제목 — 2 · 3장은 h2 라서 테마의 `.theme-cinema main h2`(작은 글씨)에 밀립니다.
   앞에 .home-slides 를 붙여 우선순위를 올려 세 장 모두 1장(h1)과 같은 크기로 그립니다. */
.home-slides .home-slides__title {
  margin: 0;
  color: var(--color-grey-900);
  font-size: clamp(34px, 4.6vw, 64px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.04em;
}

/* 한 줄씩 정해진 문구라 PC · 태블릿에서는 줄 중간에서 꺾이지 않게 합니다(폰에서는 아래에서 풀어 줍니다). */
.home-slides__line {
  display: block;
  white-space: nowrap;
}

.home-slides__line--accent {
  color: var(--color-primary);
}

/* 장마다 다른 단추(3장 [나비클럽 다운로드]) — 제목 바로 아래, 왼쪽 맞춤. */
.home-slides__cta {
  margin: var(--space-4) 0 0;
}

.home-slides__art {
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-slides__image {
  width: 100%;
  max-width: 600px;
  height: auto;
}

/* 단추 · 넘김 단추 — 장을 넘겨도 왼쪽 아래 제자리에 있습니다. */
.home-slides__footer {
  position: absolute;
  left: var(--home-slides-gutter);
  right: var(--home-slides-gutter);
  bottom: var(--space-12);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
  pointer-events: none;
}

.home-slides__actions,
.home-slides__controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  pointer-events: auto;
}

.home-slides__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--button-height);
  min-width: 148px;
  padding: 0 var(--space-8);
  border-radius: var(--radius-card);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.12s ease, background-color 0.15s ease;
}

.home-slides__button:active {
  transform: scale(0.98);
}

.home-slides__button--primary {
  background: var(--color-primary-pressed);
  color: var(--color-background);
}

.home-slides__button--primary:hover {
  background: var(--color-primary);
}

.home-slides__button--ghost {
  background: color-mix(in srgb, var(--color-grey-900) 14%, transparent);
  color: var(--color-grey-900);
}

.home-slides__button--ghost:hover {
  background: color-mix(in srgb, var(--color-grey-900) 22%, transparent);
}

.home-slides__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  border: 1px solid var(--color-grey-300);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-grey-900);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.home-slides__nav:hover:not(:disabled) {
  border-color: var(--color-grey-600);
  background: var(--color-grey-200);
}

.home-slides__nav:disabled {
  color: var(--color-grey-500);
  cursor: default;
}

.home-slides__nav--prev svg {
  transform: rotate(180deg);
}

.home-slides__dots {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* 점 단추 — 누르는 자리는 44px, 보이는 것은 가는 막대입니다. 지금 장은 길고 강조색입니다. */
.home-slides__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: var(--touch-target-min);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.home-slides__dot::before {
  content: "";
  width: 28px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-grey-400);
  transition: width 0.2s ease, background-color 0.2s ease;
}

.home-slides__dot[aria-current="true"] {
  min-width: 56px;
}

.home-slides__dot[aria-current="true"]::before {
  width: 48px;
  background: var(--color-primary);
}

/* 오른쪽 나비 심볼 아트(옛 사이트 Symbol size 485 dark tight 참고 · 순수 장식이라 aria-hidden) */


/* ── 이렇게 봅니다(4단계) ─────────────────────────────────────── */
.home-how__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  max-width: 640px;
}

.home-how__heading {
  margin: 0;
  font-size: var(--font-size-title-md);
}

.home-how__description {
  margin: 0;
  color: var(--color-text-muted);
}

.home-how__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-how__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
  border-radius: var(--space-4);
  background: var(--color-surface);
}

.home-how__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--space-3);
  background: var(--color-background);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

.home-how__step-label {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary-pressed);
}

.home-how__step-title {
  margin: 0;
  font-size: var(--font-size-code);
  font-weight: var(--font-weight-bold);
}

.home-how__step-description {
  margin: 0;
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}

/* ── 갈래별 가로 스크롤 작품 목록(HOME-2) ─────────────────────── */
.home-category-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.home-category-section__heading {
  margin: 0;
  font-size: var(--font-size-title-md);
}

.home-category-section__more-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-primary-pressed);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  white-space: nowrap;
}

.home-track {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.home-track__list {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  list-style: none;
  margin: 0;
  padding: var(--space-1) 0;
  flex: 1 1 auto;
  min-width: 0;
}

.home-track__item {
  flex: 0 0 calc((100% - 5 * var(--space-4)) / 6);
  scroll-snap-align: start;
}

.home-track__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  border-radius: 50%;
  border: 1px solid var(--color-line);
  background: var(--color-background);
  color: var(--color-text);
}

/* chevron 아이콘은 오른쪽을 가리키므로, 이전 단추만 180도 돌려 왼쪽을 가리키게 한다 */
.home-track__nav--prev svg {
  transform: rotate(180deg);
}

.home-track__more {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-card);
  background: var(--color-surface);
  color: var(--color-primary-pressed);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-caption);
  text-decoration: none;
  text-align: center;
}

.home-track__more-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-background);
  color: var(--color-primary-pressed);
}

/* ── 두 날개가 필요합니다 ─────────────────────────────────────── */
.home-wings__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  max-width: 640px;
}

.home-wings__heading {
  margin: 0;
  font-size: var(--font-size-title-md);
}

.home-wings__description {
  margin: 0;
  color: var(--color-text-muted);
}

.home-wings__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-wings__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  border: 1px solid var(--color-line);
  border-radius: var(--space-4);
}

.home-wings__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--space-3);
  background: var(--color-indigo-50);
  color: var(--color-primary-pressed);
  margin-bottom: var(--space-2);
}

.home-wings__title {
  margin: 0;
  font-size: var(--font-size-code);
  font-weight: var(--font-weight-bold);
}

.home-wings__description-text {
  margin: 0;
  flex: 1 1 auto;
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}

.home-wings__link-group {
  display: flex;
  gap: var(--space-4);
}

.home-wings__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  color: var(--color-primary-pressed);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

/* ── 진행 중인 서포터 프로젝트(미스트 구역) ───────────────────── */
.home-projects {
  padding: var(--space-12) var(--space-8);
  background: var(--color-surface);
  margin-left: calc(var(--space-8) * -1);
  margin-right: calc(var(--space-8) * -1);
  box-sizing: border-box;
}

.home-projects__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.home-projects__heading {
  margin: 0;
  font-size: var(--font-size-title-md);
}

.home-projects__description {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
}

.home-projects__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-projects__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--space-5);
  border: 1px solid var(--color-surface);
  background: var(--color-background);
}

.home-projects__card-head {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

.home-projects__card-head-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.home-projects__thumb {
  width: 64px;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-card);
  background: var(--tint-3);
  flex-shrink: 0;
}

.home-projects__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-card);
}

.home-projects__title {
  margin: 0;
  font-size: var(--font-size-code);
  font-weight: var(--font-weight-bold);
}

.home-projects__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0;
}

.home-projects__meta-label {
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}

.home-projects__meta-number {
  font-size: var(--font-size-title-md);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
}

.home-projects__progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.home-projects__progress-foot {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}

.home-projects__bar {
  height: 8px;
  border-radius: var(--radius-sheet);
  background: var(--color-surface);
  overflow: hidden;
}

.home-projects__bar-fill {
  height: 100%;
  border-radius: var(--radius-sheet);
  background: var(--color-primary);
}

.home-projects__percent {
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-pressed);
}

.home-projects__pick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-card);
  background: var(--color-indigo-50);
  color: var(--color-primary-pressed);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.home-projects__pick--disabled {
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* ── 더 알아보기(셀 2개) ─────────────────────────────────────── */
.home-portals__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-portals__link {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--space-4);
  border: 1px solid var(--color-surface);
  background: var(--color-background);
  color: var(--color-text);
  text-decoration: none;
}

.home-portals__link--disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.home-portals__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--space-4);
  background: var(--color-indigo-50);
  color: var(--color-primary-pressed);
}

.home-portals__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-grow: 1;
  min-width: 0;
}

.home-portals__label {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
}

.home-portals__description {
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
  line-height: 1.45;
}

.home-portals__chevron {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* ── 사전가입(잉크 배경 카드) ─────────────────────────────────── */
.home-prelaunch {
  padding: 0 var(--space-8);
  margin-bottom: var(--space-16);
}

.home-prelaunch__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-8);
  border-radius: var(--radius-sheet);
  background: var(--color-text);
  color: var(--color-background);
}

@media (min-width: 900px) {
  .home-prelaunch__panel {
    grid-template-columns: minmax(0, 1fr) 440px;
  }
}

.home-prelaunch__heading {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-title-lg);
  color: var(--color-background);
}

.home-prelaunch__description {
  margin: 0;
  color: var(--color-ink-muted);
}

.home-prelaunch__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.home-prelaunch__form .form-field {
  gap: var(--space-2);
}

.home-prelaunch__form label {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-ink-muted);
}

.home-prelaunch__form input {
  height: 52px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-ink-3);
  border-radius: var(--space-3);
  background: var(--color-ink-2);
  color: var(--color-background);
  font-size: var(--font-size-code);
  font-family: inherit;
}

/* 역할 라디오 카드(HOME-2) — fieldset/legend + 카드 3장, 하나만 고를 수 있다 */
.home-prelaunch__role-fieldset {
  margin: 0;
  padding: 0;
  border: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.home-prelaunch__role-legend {
  padding: 0;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-ink-muted);
}

.home-prelaunch__role-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.home-prelaunch__role-card {
  position: relative;
  display: block;
}

/* 네이티브 라디오는 화면에서 감추지만(시각적으로) 없애지 않는다 — 화살표 키 이동·스크린리더가 그대로 쓴다 */
.home-prelaunch__role-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.home-prelaunch__role-label {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
  padding: var(--space-4);
  box-sizing: border-box;
  border-radius: var(--space-3);
  border: 1px solid var(--color-ink-3);
  background: var(--color-ink-2);
  color: var(--color-background);
  cursor: pointer;
}

.home-prelaunch__role-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--space-2);
  background: var(--color-ink-3);
  color: var(--color-primary-dark);
}

.home-prelaunch__role-title {
  display: block;
  font-weight: var(--font-weight-bold);
}

.home-prelaunch__role-description {
  display: block;
  margin-top: 2px;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-regular);
  color: var(--color-ink-muted);
}

.home-prelaunch__role-check {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-primary-dark);
  color: var(--color-background-dark);
}

.home-prelaunch__role-input:checked + .home-prelaunch__role-label {
  border-color: var(--color-primary-dark);
  background: color-mix(in srgb, var(--color-primary-dark) 20%, var(--color-ink-2));
}

.home-prelaunch__role-input:checked + .home-prelaunch__role-label .home-prelaunch__role-check {
  display: inline-flex;
}

.home-prelaunch__role-input:focus-visible + .home-prelaunch__role-label {
  outline: 2px solid var(--color-primary-dark);
  outline-offset: 2px;
}

.home-prelaunch__submit {
  height: var(--button-height);
  margin-top: var(--space-1);
  padding: 0 var(--space-6);
  border: none;
  border-radius: var(--radius-card);
  background: var(--color-primary);
  color: var(--color-background);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
}

.home-prelaunch__thanks {
  color: var(--color-primary-dark);
  font-weight: var(--font-weight-bold);
}

/* ── 더 알아보기 아래 포털(임시 링크) ─────────────────────────── */
.home-portals + .home-prelaunch {
  margin-top: 0;
}

/* ── 반응형: 1024 이하(태블릿) ────────────────────────────────── */
@media (max-width: 1024px) {
  .home-slides {
    --home-slides-gutter: var(--space-4);
    margin-bottom: var(--space-16);
  }

  .home-slides__slide {
    gap: var(--space-6);
  }

  .home-how,
  .home-category-section,
  .home-wings,
  .home-portals,
  .home-prelaunch {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    margin-bottom: var(--space-16);
  }

  /* 홈 본문(.home-page)은 좌우 여백이 0 이라 음수 여백을 주면 화면 밖으로 32px 삐져나와
     가로 스크롤이 생겼습니다(2026-10-08). 여백 없이 화면 폭에 꼭 맞춥니다. */
  .home-projects {
    margin-left: 0;
    margin-right: 0;
    padding: var(--space-8) var(--space-4);
  }


  .home-how__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-wings__grid,
  .home-projects__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 한 화면에 카드 3.5장 정도 보이게(데스크톱 6장 · 폰 2.5장 사이) */
  .home-track__item {
    flex-basis: calc((100% - 2 * var(--space-4)) / 3.5);
  }
}

/* ── 반응형: 폰(390, HomePhone.dc.html) ───────────────────────── */
@media (max-width: 640px) {
  /* 폰 — 그림을 위에, 글을 아래에 쌓습니다. 단추는 화면 폭에 맞춰 나란히 놓습니다. */
  .home-slides__slide {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    min-height: 0;
    padding-top: var(--space-6);
    padding-bottom: 196px;
  }

  .home-slides__art {
    order: -1;
  }

  /* 폰에서는 글(번호 · 제목 · 3장 단추)을 가운데 정렬합니다(2026-10-08). */
  .home-slides__copy {
    align-items: center;
    text-align: center;
  }

  .home-slides__image {
    max-width: 300px;
  }

  .home-slides .home-slides__title {
    font-size: clamp(28px, 8.4vw, 36px);
  }

  /* 폰은 폭이 좁아 긴 줄은 꺾여도 됩니다. */
  .home-slides__line {
    white-space: normal;
  }

  .home-slides__footer {
    bottom: var(--space-6);
    gap: var(--space-4);
    align-items: stretch;
  }

  .home-slides__button {
    flex: 1;
    min-width: 0;
    padding: 0 var(--space-4);
  }


  .home-how__grid,
  .home-wings__grid,
  .home-projects__grid,
  .home-portals__list {
    grid-template-columns: 1fr;
  }

  .home-prelaunch__role-grid {
    grid-template-columns: 1fr;
  }

  /* 갈래별 작품 목록 — 폰은 2.5장 보이게(HomePhone.dc.html) */
  .home-track__item {
    flex-basis: 40%;
  }

  .home-track__nav {
    width: 36px;
    height: 36px;
  }

  .home-prelaunch__panel {
    padding: var(--space-6);
  }
}