.discovery-atlas {
  --font-family: 'Outfit', 'Noto Sans JP', 'Noto Sans KR', sans-serif;
  --font-mono: 'Outfit', 'Noto Sans JP', 'Noto Sans KR', sans-serif;
  --atlas-card-ratio: 1.85;
  margin: 0;
  color: var(--foreground);
  background: var(--background);
  font-family: var(--font-family);
}
.discovery-atlas :lang(ko) { font-family: 'Outfit', 'Noto Sans KR', sans-serif; }
.discovery-atlas :lang(en) { font-family: 'Outfit', sans-serif; }
.atlas-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-1); }
.atlas-tile { position: relative; min-width: 0; background: var(--surface); }
.atlas-tile-link { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-width: 0; aspect-ratio: var(--atlas-card-ratio); padding: var(--space-5); color: var(--foreground); text-decoration: none; overflow: hidden; isolation: isolate; }
.atlas-tile-link:focus-visible { outline: 3px solid var(--ring); outline-offset: -3px; }
.atlas-tile-link img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.atlas-tile-link.has-photo { color: #fff; }
.atlas-tile-link.has-photo::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgb(0 0 0 / 56%); transition: background-color var(--transition-fast); }
.atlas-tile-link.has-photo:hover::before { background: rgb(0 0 0 / 65%); }
.atlas-credits { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-5) var(--space-6); border-block: 1px solid var(--border); font-size: var(--fs-xs); color: var(--muted-foreground); }
.atlas-credits p { margin: 0; }
@media (min-width: 1800px) { .atlas-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 641px) and (max-width: 1024px) { .atlas-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .atlas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .atlas-tile-link { padding: var(--space-4); } .atlas-credits { padding-inline: var(--space-4); } }
@media (prefers-reduced-motion: reduce) { .atlas-tile-link::before { transition: none; } }