/* V27 content readiness only. No real controls, illustrations or engines are styled.
   Source geometry: V26 tokens.css, shared-brand-v5.css, insights-cards-v6.css,
   atlas-list-v25.css and style.css. Keep these rules scoped to this loading shell. */
.content-frame-v27 {
  --content-ghost-surface-v27: var(--surface, #f0f0ec);
  --content-ghost-soft-v27: #f4f4f0;
  min-block-size: calc(100vh - var(--content-header-v27, 88px));
}

@supports (height: 100svh) {
  .content-frame-v27 {
    min-block-size: calc(100svh - var(--content-header-v27, 88px));
  }
}

@supports (background: color-mix(in srgb, white, black)) {
  .content-frame-v27 {
    --content-ghost-soft-v27: color-mix(in srgb, var(--surface, #f0f0ec) 60%, var(--canvas, #fafaf8));
  }
}

.content-ghost-v27 {
  display: none;
  box-sizing: border-box;
  inline-size: min(var(--container, 1120px), calc(100% - var(--gutter, 48px) * 2));
  min-inline-size: 0;
  margin-inline: auto;
  padding-block-end: 64px;
  pointer-events: none;
  user-select: none;
}

.content-ghost-v27 *,
.content-ghost-v27 *::before,
.content-ghost-v27 *::after {
  box-sizing: border-box;
}

/* HTML marks the current hash route before the asynchronous module graph loads.
   Missing/unknown route metadata falls back to the list, never two ghosts. */
html:not([data-content-route-v27="detail"]) .content-frame-v27[data-content-state="loading"] > .content-ghost-v27[data-ghost-view="list"],
html[data-content-route-v27="detail"] .content-frame-v27[data-content-state="loading"] > .content-ghost-v27[data-ghost-view="detail"] {
  display: block;
}

.content-frame-v27[data-content-state="ready"] > .content-ghost-v27,
.content-frame-v27[data-content-state="error"] > .content-ghost-v27,
.content-ghost-v27[hidden] {
  display: none !important;
}

.content-ghost-v27 :is(.ghost-eyebrow-v27, .ghost-title-v27, .ghost-description-v27, .ghost-heading-v27, .ghost-art-v27, .ghost-meta-v27, .ghost-name-v27, .ghost-line-v27, .ghost-save-v27, .ghost-demo-v27) {
  display: block;
  min-inline-size: 0;
  max-inline-size: 100%;
  margin: 0;
  border: 0;
  border-radius: 6px;
  background: var(--content-ghost-surface-v27, var(--surface, #f0f0ec));
}

.content-ghost-v27 .ghost-eyebrow-v27 {
  inline-size: 88px;
  block-size: 12px;
}

.content-ghost-v27 .ghost-line-v27 {
  inline-size: 100%;
  block-size: 12px;
  background: var(--content-ghost-soft-v27, #f4f4f0);
}

.content-ghost-v27 .ghost-hero-v27 {
  padding-block: 72px 64px;
}

.content-ghost-v27 .ghost-hero-v27 > .ghost-eyebrow-v27 {
  margin-inline: auto;
}

.content-ghost-v27 .ghost-hero-v27 > .ghost-title-v27 {
  inline-size: min(640px, 86%);
  block-size: 44px;
  margin-block-start: 20px;
  margin-inline: auto;
}

.content-ghost-v27 .ghost-hero-v27 > .ghost-title-v27 + .ghost-title-v27 {
  inline-size: min(420px, 64%);
  margin-block-start: 12px;
}

.content-ghost-v27 .ghost-hero-v27 > .ghost-description-v27 {
  inline-size: min(520px, 90%);
  block-size: 16px;
  margin-block-start: 24px;
  margin-inline: auto;
  background: var(--content-ghost-soft-v27, #f4f4f0);
}

.content-ghost-v27 .ghost-search-v27 {
  inline-size: min(680px, 100%);
  block-size: 64px;
  margin-inline: auto;
  margin-block-end: 48px;
  border-radius: 32px;
  background: var(--content-ghost-surface-v27, var(--surface, #f0f0ec));
}

.content-ghost-v27 .ghost-heading-v27 {
  inline-size: 168px;
  block-size: 32px;
  margin-block-end: 24px;
}

.content-ghost-v27 .ghost-chips-v27 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-inline-size: 0;
  margin-block-end: 24px;
}

.content-ghost-v27 .ghost-chips-v27 > span {
  display: block;
  inline-size: 92px;
  block-size: 44px;
  max-inline-size: 100%;
  border-radius: 24px;
  background: var(--content-ghost-surface-v27, var(--surface, #f0f0ec));
}

.content-ghost-v27 .ghost-chips-v27 > span:nth-child(2n) {
  inline-size: 112px;
}

.content-ghost-v27 .ghost-tools-v27 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-inline-size: 0;
  margin-block-end: 24px;
}

.content-ghost-v27 .ghost-tools-v27 > span {
  display: block;
  inline-size: 120px;
  block-size: 48px;
  max-inline-size: 100%;
  border-radius: 6px;
  background: var(--content-ghost-soft-v27, #f4f4f0);
}

.content-ghost-v27 .ghost-cards-v27 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px 24px;
  min-inline-size: 0;
}

.content-ghost-v27 .ghost-card-v27 {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.content-ghost-v27 .ghost-art-v27 {
  inline-size: 100%;
  aspect-ratio: 1.85;
  border-radius: 18px;
}

.content-ghost-v27 .ghost-meta-v27 {
  inline-size: 88px;
  block-size: 12px;
  margin-block-start: 18px;
  background: var(--content-ghost-soft-v27, #f4f4f0);
}

.content-ghost-v27 .ghost-name-v27 {
  inline-size: 68%;
  block-size: 24px;
  margin-block-start: 16px;
}

.content-ghost-v27 .ghost-card-v27 > .ghost-line-v27 {
  margin-block-start: 12px;
}

.content-ghost-v27 .ghost-card-v27 > .ghost-line-v27:last-child {
  inline-size: 78%;
  margin-block-start: 8px;
}

.content-ghost-v27 .ghost-breadcrumb-v27 {
  display: flex;
  align-items: center;
  gap: 24px;
  min-inline-size: 0;
  padding-block-start: 28px;
}

.content-ghost-v27 .ghost-breadcrumb-v27 > span {
  display: block;
  inline-size: 88px;
  block-size: 12px;
  max-inline-size: 28%;
  border-radius: 6px;
  background: var(--content-ghost-soft-v27, #f4f4f0);
}

.content-ghost-v27 .ghost-detail-heading-v27 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-inline-size: 0;
  margin-block-start: 24px;
}

.content-ghost-v27 .ghost-detail-heading-v27 > div {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.content-ghost-v27 .ghost-detail-heading-v27 .ghost-name-v27 {
  inline-size: min(480px, 90%);
  block-size: 56px;
  margin-block-start: 12px;
}

.content-ghost-v27 .ghost-detail-heading-v27 :is(.ghost-ko-v27, .ghost-line-v27) {
  display: block;
  inline-size: min(180px, 64%);
  block-size: 22px;
  margin-block-start: 10px;
  border-radius: 6px;
  background: var(--content-ghost-soft-v27, #f4f4f0);
}

.content-ghost-v27 .ghost-save-v27 {
  flex: 0 0 108px;
  inline-size: 108px;
  block-size: 44px;
  border-radius: 24px;
}

.content-ghost-v27[data-ghost-view="detail"] > .ghost-description-v27 {
  inline-size: min(720px, 100%);
  block-size: 18px;
  margin-block: 20px 28px;
  background: var(--content-ghost-soft-v27, #f4f4f0);
}

.content-ghost-v27 .ghost-detail-layout-v27 {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: start;
  gap: 48px;
  min-inline-size: 0;
}

.content-ghost-v27 .ghost-demo-v27 {
  inline-size: 100%;
  min-block-size: 220px;
  aspect-ratio: 5 / 3;
  border-radius: 18px;
}

.content-ghost-v27 .ghost-facts-v27 {
  min-inline-size: 0;
  padding-block-start: 4px;
}

.content-ghost-v27 .ghost-facts-v27 > .ghost-heading-v27 {
  inline-size: 144px;
  block-size: 18px;
  margin-block-end: 16px;
}

.content-ghost-v27 .ghost-facts-v27 > .ghost-line-v27 + .ghost-line-v27 {
  margin-block-start: 12px;
}

.content-ghost-v27 .ghost-facts-v27 > .ghost-line-v27:last-child {
  inline-size: 70%;
}

.content-ghost-v27 .ghost-detail-body-v27 {
  display: grid;
  gap: 16px;
  max-inline-size: 720px;
  min-inline-size: 0;
  margin-block-start: 72px;
  padding-block-start: 48px;
}

.content-ghost-v27 .ghost-detail-body-v27 > .ghost-line-v27:last-child {
  inline-size: 72%;
}

.content-load-status-v27 {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.content-load-error-v27 {
  box-sizing: border-box;
  inline-size: min(var(--container, 1120px), calc(100% - var(--gutter, 48px) * 2));
  margin-inline: auto;
  padding-block: 80px;
  color: var(--ink, #232426);
  font-family: var(--brand-font, 'Outfit', 'Pretendard', sans-serif);
  letter-spacing: normal;
  text-align: center;
  overflow-wrap: anywhere;
}

.content-load-error-v27 > :is(h1, h2) {
  margin: 0;
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.02em;
}

.content-load-error-v27 > p {
  margin: 16px 0 24px;
  color: var(--muted, #61636a);
  line-height: 1.7;
}

.content-load-error-v27 :is(button, .content-load-retry-v27) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 44px;
  min-block-size: 44px;
  max-inline-size: 100%;
  padding: 12px 20px;
  border: 0;
  border-radius: 24px;
  background: var(--surface, #f0f0ec);
  color: var(--ink, #232426);
  font: 400 14px/1.5 var(--brand-font, 'Outfit', 'Pretendard', sans-serif);
  letter-spacing: normal;
  text-decoration: none;
  cursor: pointer;
}

.content-load-error-v27 :is(button, .content-load-retry-v27):hover {
  background: #e4e4df;
}

.content-load-error-v27 :is(button, .content-load-retry-v27):focus-visible {
  outline: 2px solid var(--ink, #232426);
  outline-offset: 3px;
}

@media (max-width: 1000px) and (min-width: 761px) {
  .content-ghost-v27 .ghost-cards-v27 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .content-ghost-v27 .ghost-detail-layout-v27 {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 32px;
  }
}

@media (max-width: 760px) {
  .content-frame-v27 {
    --content-header-v27: 76px;
  }

  .content-ghost-v27,
  .content-load-error-v27 {
    inline-size: min(var(--container, 1120px), calc(100% - var(--gutter, 24px) * 2));
  }

  .content-ghost-v27 {
    padding-block-end: 40px;
  }

  .content-ghost-v27 .ghost-hero-v27 {
    padding-block: 48px 40px;
  }

  .content-ghost-v27 .ghost-hero-v27 > .ghost-eyebrow-v27 {
    block-size: 10px;
  }

  .content-ghost-v27 .ghost-hero-v27 > .ghost-title-v27 {
    inline-size: 90%;
    block-size: 36px;
    margin-block-start: 16px;
  }

  .content-ghost-v27 .ghost-hero-v27 > .ghost-title-v27 + .ghost-title-v27 {
    inline-size: 72%;
    margin-block-start: 8px;
  }

  .content-ghost-v27 .ghost-hero-v27 > .ghost-description-v27 {
    inline-size: 94%;
    block-size: 15px;
    margin-block-start: 20px;
  }

  .content-ghost-v27 .ghost-search-v27 {
    block-size: 58px;
    margin-block-end: 32px;
    border-radius: 28px;
  }

  .content-ghost-v27 .ghost-heading-v27 {
    block-size: 27px;
    margin-block-end: 20px;
  }

  .content-ghost-v27 .ghost-chips-v27 {
    margin-block-end: 16px;
  }

  .content-ghost-v27 .ghost-chips-v27 > span {
    inline-size: 84px;
  }

  .content-ghost-v27 .ghost-chips-v27 > span:nth-child(2n) {
    inline-size: 100px;
  }

  .content-ghost-v27 .ghost-cards-v27 {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .content-ghost-v27 .ghost-art-v27,
  .content-ghost-v27 .ghost-demo-v27 {
    border-radius: 16px;
  }

  .content-ghost-v27 .ghost-meta-v27 {
    margin-block-start: 16px;
  }

  .content-ghost-v27 .ghost-breadcrumb-v27 {
    gap: 12px;
  }

  .content-ghost-v27 .ghost-detail-heading-v27 {
    align-items: start;
    gap: 8px;
    margin-block-start: 28px;
  }

  .content-ghost-v27 .ghost-detail-heading-v27 .ghost-name-v27 {
    block-size: 44px;
  }

  .content-ghost-v27 .ghost-detail-heading-v27 :is(.ghost-ko-v27, .ghost-line-v27) {
    block-size: 20px;
  }

  .content-ghost-v27 .ghost-save-v27 {
    flex-basis: 44px;
    inline-size: 44px;
    margin-block-start: 30px;
  }

  .content-ghost-v27[data-ghost-view="detail"] > .ghost-description-v27 {
    block-size: 34px;
    margin-block: 24px 28px;
  }

  .content-ghost-v27 .ghost-detail-layout-v27 {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .content-ghost-v27 .ghost-demo-v27 {
    aspect-ratio: 100 / 86;
  }

  .content-ghost-v27 .ghost-facts-v27 > .ghost-heading-v27 {
    block-size: 18px;
    margin-block-end: 16px;
  }

  .content-ghost-v27 .ghost-detail-body-v27 {
    margin-block-start: 40px;
    padding-block-start: 32px;
  }

  .content-load-error-v27 {
    padding-block: 56px;
  }
}

@keyframes content-ghost-opacity-v27 {
  0%, 100% { opacity: 1; }
  50% { opacity: .72; }
}

@media (prefers-reduced-motion: no-preference) {
  .content-frame-v27[data-content-state="loading"] > .content-ghost-v27 {
    animation: content-ghost-opacity-v27 1.8s ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .content-ghost-v27 {
    animation: none !important;
    opacity: 1;
  }
}

@media (forced-colors: active) {
  .content-ghost-v27 :is(.ghost-eyebrow-v27, .ghost-title-v27, .ghost-description-v27, .ghost-heading-v27, .ghost-search-v27, .ghost-art-v27, .ghost-meta-v27, .ghost-name-v27, .ghost-ko-v27, .ghost-line-v27, .ghost-save-v27, .ghost-demo-v27),
  .content-ghost-v27 :is(.ghost-chips-v27, .ghost-tools-v27, .ghost-breadcrumb-v27) > span {
    background: Canvas;
    border: 1px solid GrayText;
  }
}

/* Insights retains real SSR geometry during the same initial readiness phase.
   Do not use display:none: archive row measurement and direct-child CSS survive. */
main.content-frame-v27[data-content-area-v27="insights"] { position:relative; }
main.content-frame-v27[data-content-area-v27="insights"][data-content-state="loading"] > .content-real-v27 { visibility:hidden; opacity:0; pointer-events:none; }
main.content-frame-v27[data-content-area-v27="insights"] > .content-ghost-v27 { position:absolute; inset-block-start:0; inset-inline-start:0; inline-size:100%; }
.content-ghost-v27 .ghost-featured-v27 { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:48px; margin-block-end:40px; }
.content-ghost-v27 .ghost-featured-copy-v27 > span { margin-block-end:20px; }
.content-ghost-v27 .ghost-featured-copy-v27 .ghost-name-v27 { inline-size:94%; }
.content-ghost-v27 .ghost-featured-art-v27 { min-block-size:288px; border-radius:32px; }
.content-ghost-v27[data-ghost-area="insights"] .ghost-cards-v27 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.content-ghost-v27[data-ghost-area="insights"][data-ghost-view="detail"] > .ghost-art-v27 { aspect-ratio:auto; block-size:220px; margin-block:24px 40px; }
.content-ghost-v27[data-ghost-area="support"] > .ghost-detail-heading-v27 { margin-block-start:64px; }
.content-ghost-v27[data-ghost-area="support"] .ghost-detail-body-v27 { max-inline-size:800px; }
main.content-frame-v27 img.content-media-ghost-v27[data-media-pending-v27="true"] { background-color:var(--content-ghost-surface-v27,var(--surface,#f0f0ec)); }
@media(max-width:760px) {
 .content-ghost-v27 .ghost-featured-v27 { grid-template-columns:1fr; gap:24px; }
 .content-ghost-v27 .ghost-featured-art-v27 { order:-1; min-block-size:220px; border-radius:24px; }
 .content-ghost-v27[data-ghost-area="insights"] .ghost-cards-v27 { grid-template-columns:1fr; }
 .content-ghost-v27[data-ghost-area="insights"][data-ghost-view="detail"] > .ghost-art-v27 { block-size:200px; }
}

/* Shared reveal grace affects only placeholder appearance, never content readiness. */
main.content-frame-v27 > .content-ghost-v27 { visibility:hidden; }
main.content-frame-v27[data-content-state="loading"][data-loading-visible-v27="true"] > .content-ghost-v27 { visibility:visible; }