/* 꿈가게 제품 페이지 전용 - ki.css 다음에 로드한다.
 *
 * ── 왜 페이지 전체를 다크로 두지 않았나 ──────────────────
 *
 * AGENTS.md 의 "깊은 검은 우주와 행성은 성역" 규칙은 **앱 화면**에 대한
 * 것이다. 랜딩은 편집 surface 라 그 규칙을 그대로 확장하면 과적용이고,
 * 실제로 허브·가이드(밝음) → 제품(다크) 경계에서 다른 사이트로 읽혔다.
 *
 * 그래서 사이트 chrome 은 밝게 통일하고, 행성의 다크 정체성은
 * **페이지 안 아트블록(.art-space) 안에서** 그대로 유지한다.
 * 배경을 바꾸는 게 아니라 액자를 씌우는 방식 - 하늘 천체 때와 같은 판단이다.
 * (2026-08-07 결정 로그: "바꾸기가 안 되면 더하기가 남는다")
 */

/* ── 우주 아트블록 ────────────────────────────────────── */
.art-space {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 420px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 42%, #171a2e 0%, #0b0d16 62%);
  color: #cfd8ff;
}

/* 별 - 이미지 없이 radial-gradient 점 세 겹. 애니메이션 없음(정지 이미지처럼) */
.art-space::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.55;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 78% 16%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 34% 76%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 88% 68%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 62% 40%, #fff, transparent),
    radial-gradient(1px 1px at 22% 55%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 50% 12%, #fff, transparent),
    radial-gradient(1px 1px at 8% 82%, #fff, transparent);
}

.planet {
  position: relative;
  width: 210px;
  height: 210px;
  display: grid;
  place-items: center;
}

.planet__glow {
  position: absolute;
  inset: -46px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(120, 150, 255, 0.34) 0%, transparent 66%);
}

/* 매트한 표면이 이 행성의 정체성이다 - 광택(하이라이트)을 넣지 말 것.
 * 앱에서 roughness 를 낮췄다가 "너무 반질거린다"로 기각된 이력이 있다. */
.planet__core {
  position: relative;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, #6f8ae8 0%, #4a5fae 46%, #2c3670 100%);
  box-shadow: 0 0 44px rgba(110, 140, 240, 0.42);
}

.planet__ring {
  position: absolute;
  width: 268px;
  height: 268px;
  border-radius: 50%;
  border: 1px solid rgba(180, 200, 255, 0.28);
  transform: rotate(-18deg) scaleY(0.34);
}

.art-space .art-caption { color: #8f9dd4; }

/* ── 여섯 도메인 ──────────────────────────────────────── */
.domain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.domain {
  border: 1px solid var(--border);
  background: var(--card);
  padding: 24px 22px;
}

.domain__emoji { display: block; font-size: 26px; line-height: 1; margin-bottom: 14px; }

.domain__title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.domain__desc {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 14px;
  line-height: 1.7;
}

/* ── 인용 ─────────────────────────────────────────────── */
.quote-box {
  border-top: 2px solid var(--foreground);
  border-bottom: 1px solid var(--border);
  padding: 34px 0;
  max-width: 820px;
}

.quote-box p {
  margin: 0 0 18px;
  font-size: clamp(21px, 2.8vw, 30px);
  line-height: 1.5;
  letter-spacing: -0.025em;
  font-weight: 700;
}

.quote-box .sub {
  color: var(--muted-foreground);
  font-size: 15px;
  line-height: 1.7;
}

/* ── 하단 CTA ─────────────────────────────────────────── */
.cta-section {
  border: 1px solid var(--border);
  background: var(--card);
  padding: 52px 44px;
  margin-bottom: 70px;
}

.cta-section h2 {
  margin: 0 0 14px;
  font-size: clamp(26px, 3.6vw, 40px);
  line-height: 1.22;
  letter-spacing: -0.03em;
  font-weight: 800;
}

.cta-section p { margin: 0 0 26px; color: var(--muted-foreground); font-size: 17px; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 900px) {
  .domain-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .art-space { min-height: 320px; }
  .planet { width: 160px; height: 160px; }
  .planet__core { width: 128px; height: 128px; }
  .planet__ring { width: 206px; height: 206px; }
  .domain-grid { grid-template-columns: 1fr; }
  .quote-box { padding: 26px 0; }
  .cta-section { padding: 32px 24px; }
}