/* home.css — 홈(index.html) 전용 스타일.
 * 히어로 · 히어로 스크롤 스테이지 · 공감 · 방식 · 다른 점 · 맞는 분 · 미니 진단 티저.
 * 공통 뼈대(네비·버튼·푸터 등)는 base.css 참고.
 */

/* ── 히어로 ───────────────────────────────────── */
.hero { padding-block: clamp(6.5rem, 12vh, 8rem) var(--space-3xl); }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-2xl);
  align-items: center;
}

.hero h1 {
  font-size: var(--text-display);
  font-weight: 600;
  line-height: 1.22;
}

.hero__highlight {
  color: var(--color-accent);
}

.hero__slogan {
  margin-block-start: var(--space-lg);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-ink-2);
}

.mark-word {
  font-style: normal;
  font-weight: 700;
  color: var(--color-accent-deep);
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 0.125rem;
}

.hero__lede {
  margin-block-start: var(--space-md);
  max-width: 34rem;
  color: var(--color-muted);
}

.hero__cta {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-block-start: var(--space-xl);
  flex-wrap: wrap;
}

/* 히어로 등장 — 페이지 로드 시 1회 */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  animation: reveal var(--dur-long) var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}

@keyframes reveal { to { opacity: 1; transform: none; } }

/* 스크롤 등장 — JS가 .js-reveal을 켰을 때만 숨김(없으면 항상 보임) */
.js-reveal .reveal-on-scroll {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-long) var(--ease-out),
              transform var(--dur-long) var(--ease-out);
}
.js-reveal .reveal-on-scroll.is-visible { opacity: 1; transform: none; }

/* 새로디 심볼 — 네이비 호가 감싼 코럴빛 3D 다이아몬드 */
.diamond-art { width: min(100%, 23rem); margin-inline: auto; }

.diamond-art__svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;               /* 글로우가 잘리지 않게 */
}

/* 감싸는 네이비 호 — 정적 프레임 */
.dm-arc { fill: var(--color-ink); }

/* 코럴 다이아몬드 — 이 그룹만 움직임 (호는 고정) */
.dm-gem {
  transform-box: fill-box;
  transform-origin: center;
  animation: dm-live 6s var(--ease-in-out) infinite;
}

/* 빛 훑기 — 표면을 스치는 하이라이트 밴드 */
.dm-sheen {
  transform-box: fill-box;
  transform-origin: center;
  animation: dm-sweep 3.6s var(--ease-in-out) infinite;
}

/* dm-live @keyframes → base.css로 이동 (공유) */

/* 빛 훑기(C) — 끝에서 잠깐 멈췄다 반복 (오프-젬 위치라 튐 없음) */
@keyframes dm-sweep {
  0%       { transform: rotate(14deg) translateX(-320px); }
  55%, 100% { transform: rotate(14deg) translateX(320px); }
}

/* ── 히어로 스크롤 몰입 스테이지 (아이보리→코럴→네이비→아이보리) ── */
.hero-pin {
  --coral: 0; --navy: 0; --scaleAmt: 0;
  --gemFade: 0; --arcFade: 0; --detailFade: 0; --textFade: 0;
  --hint: 0;
}
.hero-stage__bg { display: none; }
.diamond-scale { transform-origin: center; }
/* 스크롤 힌트 — 기본 숨김(효과 활성 시에만 노출) */
.hero-hint { display: none; }

/* 효과는 데스크톱 폭 + JS 활성(.js-scrub)일 때만. 그 외(모바일·JS없음·모션축소)엔 정적 히어로 그대로 */
@media (min-width: 760px) {
  .js-scrub .hero-stage { height: 220vh; }
  .js-scrub .hero-pin {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
  }
  .js-scrub .hero-pin .hero { position: relative; z-index: 1; width: 100%; padding-block: 0; }

  /* 배경: 아이보리→코럴(--coral)→네이비(--navy)→아이보리 */
  .js-scrub .hero-stage__bg {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    background: color-mix(in oklch,
      color-mix(in oklch, var(--color-paper), var(--color-accent) calc(var(--coral) * 100%)),
      var(--color-deep) calc(var(--navy) * 100%));
  }

  /* 가운데 코럴 젬만 확대 → 진주로 안착 (호·하이라이트·빛훑기는 확대에서 제외) */
  .js-scrub .dm-grow {
    transform-box: view-box;
    transform-origin: center;
    transform: scale(calc(1 + var(--scaleAmt) * 15));
    will-change: transform;
  }
  /* 부상 때 진주 페이드아웃 → 아이보리로 열림 */
  .js-scrub .dm-gem { opacity: calc(1 - var(--gemFade)); }
  /* 네이비 호는 스케일되지 않고 스크롤 시작하면 빠르게 사라짐 */
  .js-scrub .dm-arcs { opacity: calc(1 - var(--arcFade)); }
  /* 빛훑기는 확대 중 이음새 방지 위해 아주 빠르게 사라짐 */
  .js-scrub .dm-sheen { opacity: calc(1 - var(--detailFade)); }
  /* 히어로 텍스트는 위로 물러나며 사라짐 */
  .js-scrub .hero__text {
    opacity: calc(1 - var(--textFade) * 1.6);
    transform: translateY(calc(var(--textFade) * -44px));
    will-change: opacity, transform;
  }

  /* 맨 처음 스크롤 힌트 — ABOUT의 'Scroll' 인디케이터 재사용, 위치·페이드만 얹음 */
  .js-scrub .hero-hint {
    display: block;
    position: absolute;
    bottom: clamp(1.5rem, 5vh, 3rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    opacity: var(--hint);
    pointer-events: none;
  }
  .js-scrub .hero-hint .sea-hero__scroll { margin-block-start: 0; }
}

/* ── 공감 — 고객의 말 ─────────────────────────── */
.minds { padding-block: var(--space-section) var(--space-2xl); }

.minds__body {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
  margin-block-start: var(--space-xl);
}

.minds__quotes {
  flex: 1;
  display: grid;
  gap: var(--space-md);
  max-width: 40rem;
}

.minds__quotes blockquote {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-ink-2);
  background: var(--color-paper-2);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  width: fit-content;
}

/* 균일함 깨기 — 들여쓰기를 어긋나게 */
.minds__quotes blockquote:nth-child(2) { margin-inline-start: var(--space-xl); }
.minds__quotes blockquote:nth-child(3) { margin-inline-start: var(--space-sm); }
.minds__quotes blockquote:nth-child(4) { margin-inline-start: var(--space-2xl); }

.minds__turn {
  flex-shrink: 0;
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.45;
  max-width: 30ch;
}

.minds__arrow {
  flex-shrink: 0;
  font-size: var(--text-2xl);
  color: var(--color-accent);
}

.minds__turn strong { color: var(--color-accent-deep); }

.minds__after { margin-block-start: var(--space-sm); color: var(--color-muted); max-width: 34rem; }

/* ── 방식 — 홈 전용 ─────────────────────────────── */
/* .way, .way__steps, .stage, .way__tag, .way-icon__gem → base.css로 이동 (공유) */

/* 홈 way 섹션 아이콘 위상 어긋나게 */
.way__steps li:nth-child(2) .way-icon__gem { animation-delay: -2s; }
.way__steps li:nth-child(3) .way-icon__gem { animation-delay: -4s; }

.section-more { margin-block-start: var(--space-xl); }

/* ── 다른 점 — 장부형 행 ──────────────────────── */
.different { padding-block: var(--space-2xl) var(--space-section); }

.different__rows { margin-block-start: var(--space-xl); max-width: 44rem; display: grid; }

.different__row {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-lg);
  border-block-start: var(--rule-hair) solid var(--color-rule);
  color: var(--color-muted);
}

.different__row dt { font-weight: 700; color: var(--color-ink-2); }
.different__row dd { margin: 0; }

.different__row--us {
  margin-block-start: var(--space-md);
  margin-inline: calc(var(--space-md) * -1);
  border: none;
  background: var(--color-paper-2);
  border-radius: var(--radius-md);
  padding-block: var(--space-lg);
  padding-inline: var(--space-md);
  color: var(--color-ink-2);
}

.different__row--us dt { color: var(--color-accent); font-weight: 800; }
.different__row--us dd strong { color: var(--color-ink); }

/* ── 맞는 분 / 아닌 분 ────────────────────────── */
.fit { padding-block: var(--space-2xl) var(--space-section); }

.fit__cols {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-2xl);
  margin-block-start: var(--space-xl);
}

.fit__cols h3 { font-size: var(--text-md); font-weight: 800; }

.fit__list { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: grid; gap: var(--space-sm); }

.fit__list li { position: relative; padding-inline-start: 1.5rem; }

.fit__list--yes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 3px solid var(--color-accent);
}

.fit__list--no li { color: var(--color-muted); }

.fit__list--no li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 10px;
  height: 2px;
  background: var(--color-rule);
}

.fit__note { margin-block-start: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }

/* ── 홈 · 미니 진단 티저 — 네이비 카드 (배지 로고의 반전 순간) ── */
.tease { padding-block: var(--space-2xl); }

.tease__card {
  background: var(--color-ink);
  color: var(--color-paper);
  border-radius: var(--radius-md);
  padding: clamp(var(--space-xl), 5vw, var(--space-2xl));
  display: grid;
  gap: var(--space-md);
  justify-items: start;
}

.tease__card h2 { font-size: var(--text-xl); max-width: 18ch; line-height: 1.4; }

.tease__card > p {
  max-width: 34rem;
  color: color-mix(in oklch, var(--color-paper) 82%, var(--color-ink));
}

.tease__reasons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.tease__reasons li {
  border: var(--rule-hair) solid color-mix(in oklch, var(--color-paper) 30%, transparent);
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.85rem;
  font-size: var(--text-sm);
  color: color-mix(in oklch, var(--color-paper) 88%, var(--color-ink));
}

.tease__card .btn { margin-block-start: var(--space-xs); }

.tease__soft { font-size: var(--text-sm); color: color-mix(in oklch, var(--color-paper) 65%, var(--color-ink)); }

/* ── 반응형 (홈) ── */
@media (max-width: 60rem) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .core-art { width: min(58%, 18rem); margin-inline: 0; }
  .fit__cols { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
}

@media (max-width: 40rem) {
  .hero { padding-block-start: 8rem; }
  .minds__body { flex-direction: column; }
  .minds__arrow { display: none; }
  .minds__quotes blockquote { margin-inline-start: 0 !important; }
  .different__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
}

/* ── 모션 축소 (홈 히어로) ── */
@media (prefers-reduced-motion: reduce) {
  .dm-gem, .dm-sheen { animation: none; }
  .dm-gem { transform: none; filter: drop-shadow(0 8px 16px color-mix(in oklch, var(--color-accent) 22%, transparent)); }
  .dm-sheen { display: none; }
}