.library-shell {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.library-shell:has(> .debug-colors-toggle) { padding-block-end: 0; }

.library-page {
  min-height: 0;
  padding-block: 0;
}

.library-page > .category-bar { flex: none; }

.library-page > .category-content {
  flex: 1;
  min-height: 0;
  padding-block: 0;
  overflow: visible;
}

.library-page--overview > .library-overview {
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
  justify-items: center;
  gap: var(--space-3xl);
  min-height: calc(100dvh - var(--header-block-size) - var(--category-bar-block-size));
  padding-block: calc(var(--content-padding-block) * 2);
}

@property --library-overview-light-color {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --library-overview-accent-color {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

.library-overview {
  --library-overview-color-start: var(--color-primary-start);
  --library-overview-color-end: var(--color-primary-end);
  --library-overview-light-color: rgb(var(--library-overview-color-start) / var(--library-overview-light-opacity));
  --library-overview-accent-color: rgb(var(--library-overview-color-end) / var(--library-overview-accent-opacity));
  position: relative;
  isolation: isolate;
  color: rgb(var(--color-gray-100));
}

.library-overview:has(.library-category-card--ambassador:focus-visible) {
  --library-overview-color-start: var(--color-library-ambassador-start);
  --library-overview-color-end: var(--color-library-ambassador-end);
}

.library-overview:has(.library-category-card--illustella:focus-visible) {
  --library-overview-color-start: var(--color-library-illustella-start);
  --library-overview-color-end: var(--color-library-illustella-end);
}

@media (hover: hover) {
.library-overview:has(.library-category-card--ambassador:hover) {
    --library-overview-color-start: var(--color-library-ambassador-start);
    --library-overview-color-end: var(--color-library-ambassador-end);
  }

.library-overview:has(.library-category-card--official:hover) {
    --library-overview-color-start: var(--color-primary-start);
    --library-overview-color-end: var(--color-primary-end);
  }

.library-overview:has(.library-category-card--illustella:hover) {
    --library-overview-color-start: var(--color-library-illustella-start);
    --library-overview-color-end: var(--color-library-illustella-end);
  }
}

.library-overview-atmosphere {
  position: absolute;
  z-index: var(--z-index-background);
  inset-block: 0;
  inset-inline-start: 50%;
  width: 100cqw;
  translate: -50% 0;
  overflow: clip;
  pointer-events: none;
  background: rgb(var(--color-gray-900));
}

.library-overview-atmosphere::before,
.library-overview-atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  /* 블러 경계를 화면 밖으로 밀어 상단에 검은 띠가 생기지 않게 한다. */
  inset-block-start: calc(var(--blur-backdrop) * -4);
  transform-origin: var(--library-overview-light-origin);
  transform: var(--runtime-library-overview-light-transform, none);
  filter: blur(var(--blur-backdrop));
  pointer-events: none;
}

.library-overview-atmosphere::before {
  background: conic-gradient(
    from calc(var(--library-overview-light-direction-angle) - var(--library-overview-light-spread-angle) / 2) at var(--library-overview-light-origin),
    transparent 0deg,
    var(--library-overview-accent-color) calc(var(--library-overview-light-spread-angle) * 0.14),
    var(--library-overview-light-color) calc(var(--library-overview-light-spread-angle) / 2),
    var(--library-overview-accent-color) calc(var(--library-overview-light-spread-angle) * 0.86),
    transparent var(--library-overview-light-spread-angle));
  mask-image: linear-gradient(to bottom, rgb(var(--color-white)), rgb(var(--color-white)) 35%, transparent 95%);
}

.library-overview-atmosphere::after {
  background: conic-gradient(
    from calc(var(--library-overview-light-direction-angle) - var(--library-overview-light-spread-angle) * 0.64) at var(--library-overview-light-origin),
    transparent 0deg,
    var(--library-overview-accent-color) calc(var(--library-overview-light-spread-angle) * 0.64),
    transparent calc(var(--library-overview-light-spread-angle) * 1.28));
  mask-image: radial-gradient(ellipse 85% 140% at var(--library-overview-light-origin), rgb(var(--color-white)), transparent 70%);
}

@media (prefers-reduced-motion: no-preference) {
.library-overview {
    transition: --library-overview-light-color var(--library-overview-color-transition-duration) var(--easing-default),
      --library-overview-accent-color var(--library-overview-color-transition-duration) var(--easing-default);
  }

.library-overview-atmosphere::before,
.library-overview-atmosphere::after {
    transition: transform var(--runtime-library-overview-light-duration, var(--library-overview-light-duration-max)) var(--library-overview-light-easing);
  }

.library-category-card {
    animation: library-overview-card-enter var(--library-overview-entry-duration) var(--easing-out) backwards;
  }

.library-category-card--official { animation-delay: var(--library-overview-entry-stagger-delay); }

.library-category-card--illustella { animation-delay: calc(var(--library-overview-entry-stagger-delay) * 2); }
}

@keyframes library-overview-card-enter {
  0% {
    translate: 0 var(--library-overview-entry-distance) calc(var(--library-overview-entry-depth) * -1);
    rotate: x var(--library-overview-entry-tilt-angle);
    scale: var(--library-overview-entry-scale-start);
    opacity: 0;
  }
  35% { opacity: 1; }
  70% {
    translate: 0 calc(var(--space-xs) * -1) var(--space-2xs);
    rotate: none;
    scale: var(--library-overview-entry-scale-overshoot);
    opacity: 1;
  }
  100% { translate: none; rotate: none; scale: 1; opacity: 1; }
}

.library-overview-heading {
  display: grid;
  justify-items: center;
  gap: var(--space-md);
  width: 100%;
  text-align: center;
}

.library-overview-title {
  max-width: 100%;
  margin: 0;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-line-height-2xl);
  text-align: center;
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.library-overview-description {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  color: rgb(var(--color-gray-50));
  font-size: var(--font-size-md);
  line-height: var(--font-line-height-md);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.library-category-cards {
  display: grid;
  align-self: end;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: center;
  gap: var(--space-2xl);
  width: min(100%, calc(var(--library-category-card-inline-size) * 3 + var(--space-2xl) * 2));
  perspective: var(--library-category-perspective);
}

.library-category-card {
  --inner-glow-color-start: rgb(var(--library-overview-color-start));
  --inner-glow-color-end: rgb(var(--library-overview-color-end));
  display: flex;
  flex-direction: column;
  justify-content: end;
  gap: var(--space-xs);
  min-width: 0;
  width: 100%;
  min-height: var(--library-category-card-block-size-min);
  aspect-ratio: var(--library-carousel-card-aspect-ratio);
  padding: var(--space-xl);
  border: var(--line-width-default) solid rgb(var(--color-gray-500));
  border-radius: var(--radius-squircle-md);
  corner-shape: var(--corner-shape-squircle);
  background: rgb(var(--color-gray-900));
  box-shadow: var(--library-overview-card-shadow);
  color: rgb(var(--color-gray-100));
  text-align: center;
  text-decoration: none;
  transform-style: preserve-3d;
}

.library-category-card h3 {
  align-self: center;
  max-width: 100%;
  font-size: var(--font-size-xl);
  line-height: var(--font-line-height-xl);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.library-category-card p {
  align-self: center;
  max-width: 100%;
  color: rgb(var(--color-gray-300));
  font-size: var(--font-size-sm);
  line-height: var(--font-line-height-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.library-category-card--ambassador {
  transform-origin: right center;
  transform: rotateY(var(--library-category-side-angle));
}

.library-category-card--illustella {
  transform-origin: left center;
  transform: rotateY(calc(var(--library-category-side-angle) * -1));
}

.library-category-card:is(:hover, :focus-visible) {
  translate: 0 calc(var(--space-sm) * -1);
}

@media (prefers-reduced-motion: no-preference) {
.library-category-card { transition: translate var(--library-overview-hover-duration) var(--library-overview-hover-easing); }
}

@media (max-width: 40rem) {
.library-category-cards { gap: var(--space-xs); }

.library-category-card { padding: var(--space-xs); }

.library-category-card h3 { font-size: var(--font-size-md); line-height: var(--font-line-height-md); }
}

.library-carousel {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  isolation: isolate;
  color: rgb(var(--color-white));
}

.library-carousel::before,
.library-carousel::after {
  content: "";
  position: absolute;
  z-index: var(--z-index-background);
  inset-block: 0;
  inset-inline-start: 50%;
  width: 100cqw;
  translate: -50% 0;
  pointer-events: none;
}

.library-carousel::before {
  background-image: var(--runtime-library-character-background, none), var(--runtime-library-background, var(--gradient-library-phocaccia));
  background-position: 55% center, center;
  background-size: auto 100%, cover;
  background-repeat: no-repeat;
}

.library-carousel::after {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  background: rgb(var(--color-gray-900) / var(--library-overlay-opacity));
}

.library-stage {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: var(--space-2xs) minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--space-2xl);
  min-width: 0;
  min-height: 0;
  padding-block: var(--content-padding-block);
}

.library-description {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  display: grid;
  gap: 0;
  min-width: 0;
  max-height: 100%;
  overflow-y: auto;
  text-align: left;
  font-size: var(--font-size-md);
  line-height: var(--font-line-height-md);
  overflow-wrap: anywhere;
}

.library-progress {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  min-height: 0;
}

.library-progress::before,
.library-progress::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--space-2xs);
  border-radius: var(--radius-full);
  pointer-events: none;
}

.library-progress::before { background: rgb(var(--color-gray-300)); }

.library-progress::after {
  background: var(--gradient-primary-vertical);
  inset-block-end: auto;
  height: calc(var(--runtime-library-progress-ratio, 0) * 100%);
}

.library-name {
  font-size: var(--font-size-2xl);
  line-height: var(--library-name-line-height);
  font-weight: var(--font-weight-bold);
}

.library-character-details {
  display: grid;
  gap: var(--space-xs);
  margin-block-start: var(--library-description-section-gap);
}

.library-story { white-space: pre-line; margin-block-start: var(--library-description-section-gap); }

.library-video {
  margin-block-start: var(--space-xs);
  width: 100%;
  aspect-ratio: var(--media-video-aspect-ratio);
  border: 0;
  border-radius: var(--radius-squircle-md);
  overflow: hidden;
}

.library-video-empty { margin-block-start: var(--space-xs); color: rgb(var(--color-gray-200)); }

.library-carousel-controls {
  grid-column: 3;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
}

.library-carousel-track {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  align-items: flex-end;
  gap: var(--space-md);
  min-width: 0;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}

.library-carousel-track::-webkit-scrollbar { display: none; }

.library-carousel-card {
  --library-carousel-card-inline-size-rendered: min(var(--library-carousel-card-inline-size), var(--library-carousel-card-inline-size-max));
  flex: 0 0 var(--library-carousel-card-inline-size-rendered);
  min-width: 0;
  aspect-ratio: var(--library-carousel-card-aspect-ratio);
  height: auto;
  max-height: 100%;
  border-radius: var(--radius-squircle-md);
  background: rgb(var(--debug-color));
  scroll-snap-align: center;
  transform: scale(var(--library-carousel-card-inactive-scale));
  transform-origin: center bottom;
}

.library-carousel-card:first-child { margin-inline-start: calc((100% - var(--library-carousel-card-inline-size-rendered)) / 2); }

.library-carousel-card:last-child { margin-inline-end: calc((100% - var(--library-carousel-card-inline-size-rendered)) / 2); }

.library-carousel-card[aria-pressed="true"] { transform: scale(1); }

.library-carousel-card:focus-visible {
  outline: var(--line-width-default) solid rgb(var(--color-white));
  outline-offset: var(--line-width-default);
}

@media (prefers-reduced-motion: no-preference) {
.library-carousel-card { transition: transform var(--library-carousel-transition-duration) var(--easing-standard); }

.library-progress::after { transition: height var(--library-carousel-transition-duration) var(--easing-standard); }
}

.library-carousel-arrow {
  position: relative;
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  display: grid;
  place-items: center;
  width: var(--size-control-md);
  height: var(--size-control-md);
  padding: 0;
  color: rgb(var(--color-white));
}

.library-carousel-arrow::before {
  content: "";
  width: var(--size-icon-md);
  height: var(--size-icon-md);
  background: currentColor;
}

.library-carousel-arrow--previous { justify-self: start; }

.library-carousel-arrow--next { justify-self: end; }

.library-carousel-arrow--previous::before { mask: url("/assets/icons/chevron-left.svg") center / contain no-repeat; }

.library-carousel-arrow--next::before { mask: url("/assets/icons/chevron-right.svg") center / contain no-repeat; }

.library-carousel-arrow:disabled { opacity: var(--opacity-disabled); }

.library-carousel-empty {
  grid-row: 1;
  place-self: center;
  margin: var(--space-md);
  text-align: center;
}

.library-info {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-block: var(--space-md);
}

.library-info-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0;
  min-width: 0;
  text-align: left;
}

.library-info dt {
  grid-column: 1;
  grid-row: 2;
  color: rgb(var(--color-gray-200));
  font-size: var(--library-info-label-font-size);
  line-height: var(--library-info-label-line-height);
}

.library-info dd {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  min-width: 0;
  color: rgb(var(--color-primary-start));
  font-size: var(--library-info-value-font-size);
  line-height: var(--library-info-value-line-height);
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere;
}

@media (forced-colors: none) {
@supports (background-clip: text) {
.library-info dd {
      background: var(--gradient-primary-vertical);
      background-clip: text;
      color: transparent;
    }
}
}

@media (max-width: 63.99rem) {
.library-stage {
    grid-template-columns: var(--space-2xs) minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: start;
    overflow-y: auto;
  }

.library-carousel-controls { grid-column: 2; grid-row: 1; height: 50dvh; }

.library-description { grid-column: 2; grid-row: 2; max-height: none; overflow: visible; }
}

@media (max-width: 47.99rem) {
.library-info {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--space-md);
  }
}

@media (max-height: 30rem) {
.library-info {
    grid-template-columns: repeat(4, minmax(var(--library-info-compact-inline-size), 1fr));
    row-gap: 0;
    padding-block: var(--space-xs);
    overflow-x: auto;
  }
}