:root {
  --menu-top: 12px;
  --menu-height: 58px;
  --menu-gap: 14px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html,
body { min-height: 100%; margin: 0; }

body {
  color: #214c50;
  font-family: 'Noto Sans KR', sans-serif;
}

.catalog-main {
  margin-top: 0;
  padding-top: calc(var(--menu-top) + var(--menu-height) + var(--menu-gap));
  min-height: 100dvh;
  position: relative;
  isolation: isolate;
  overflow: visible;
  display: flex;
  flex-direction: column;
  background: linear-gradient(#8edbf7 0%, #8edbf7 50%, #0b141d 100%);
}

.app-shell {
  width: auto;
  height: auto;
  min-height: 100dvh;
  overflow: visible;
}

.catalog-main::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, #c3edf7aa 0%, #c3edf733 27%, transparent 53%),
    linear-gradient(180deg, transparent 62%, #13202c7a 100%);
}

.catalog-shell {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(14px, 2vw, 26px) 0 56px;
  flex: 1;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  position: relative;
  z-index: 1;
}

.catalog-footer {
  position: relative;
  z-index: 1;
  color: rgba(212, 232, 233, .6);
  font: 7px/1 'Noto Sans KR', sans-serif;
  letter-spacing: .1em;
}

.catalog-footer .footer-links,
.catalog-footer .copyright {
  margin: 0;
  color: inherit;
  opacity: 1;
}

.catalog-shell h1 {
  margin: 0;
  color: #244258;
  font: 700 clamp(1.55rem, 2.5vw, 2.25rem)/1 'Cormorant Garamond', 'Noto Sans KR', serif;
  letter-spacing: -.045em;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.58);
}

.catalog-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.catalog-shell .panel-desc {
  margin-top: 7px;
  color: #345f68;
  font-size: clamp(.72rem, 1.4vw, .96rem);
  line-height: 1.7;
  white-space: nowrap;
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.7vw, 22px);
  margin-top: clamp(18px, 2.5vw, 30px);
}

.catalog-card {
  --holo-light-x: 50%;
  --holo-light-y: 42%;
  --holo-background-x: 50%;
  --holo-background-y: 47%;
  --holo-tilt-x: 0deg;
  --holo-tilt-y: 0deg;
  --holo-scale: 1;
  --holo-glare: .12;
  --holo-edge: #73dcff;
  --foil-pink: #ff738d;
  --foil-gold: #ffe477;
  --foil-mint: #7fffd4;
  --foil-sky: #73dcff;
  --foil-violet: #b894ff;
  --catalog-info-height: 112px;
  position: relative;
  display: grid;
  grid-template-rows: auto var(--catalog-info-height);
  isolation: isolate;
  overflow: hidden;
  min-height: 0;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 14px;
  background: rgba(246, 255, 250, .28);
  box-shadow:
    0 16px 30px rgba(32, 82, 66, .16),
    inset 0 1px 0 rgba(255, 255, 255, .88),
    inset 0 -18px 32px rgba(81, 142, 109, .1);
  backdrop-filter: blur(18px) saturate(132%);
  color: inherit;
  text-decoration: none;
  transform: perspective(720px) rotateX(var(--holo-tilt-x)) rotateY(var(--holo-tilt-y)) scale(var(--holo-scale));
  transform-style: preserve-3d;
  transition: transform 320ms cubic-bezier(.2, .72, .2, 1), box-shadow 240ms ease-out, filter 240ms ease-out, border-color 240ms ease-out;
  will-change: transform;
}

.catalog-card:nth-child(2) {
  --holo-edge: #73dcff;
}

.catalog-card.is-recommendation {
  --holo-edge: #5cbfff;
}

.catalog-card.is-holo-active {
  transition-duration: 85ms, 180ms, 180ms, 180ms;
}

.catalog-card .catalog-thumb {
  position: relative;
  grid-row: 1;
  z-index: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 13px 13px 0 0;
  color: #d68b58;
  font-size: clamp(4.5rem, 9vw, 7.5rem);
  text-shadow: 0 5px 0 rgba(255, 255, 255, .7), 0 13px 22px rgba(45, 95, 73, .22);
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 247, 214, .82) 0 10%, transparent 34%),
    radial-gradient(circle at 50% 48%, rgba(214, 139, 88, .16) 0 18%, transparent 47%),
    linear-gradient(145deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .06));
}

div.catalog-thumb {
  display: grid;
  place-items: start center;
  padding-top: clamp(50px, 5vw, 68px);
}

img.catalog-thumb {
  object-position: center 24%;
}

.catalog-card:first-child img.catalog-thumb {
  transform: scale(1);
  transform-origin: center 36%;
}

.catalog-card:nth-child(2) .catalog-thumb {
  color: #4f98ae;
  background:
    radial-gradient(circle at 50% 42%, rgba(237, 250, 255, .84) 0 10%, transparent 34%),
    radial-gradient(circle at 50% 48%, rgba(79, 152, 174, .16) 0 18%, transparent 47%),
    linear-gradient(145deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .06));
}

.catalog-card.is-recommendation .catalog-thumb {
  background:
    linear-gradient(122deg, transparent 30%, rgba(120, 213, 255, .12) 42%, rgba(120, 213, 255, .44) 50%, rgba(120, 213, 255, .12) 58%, transparent 70%),
    linear-gradient(145deg, rgba(218, 246, 255, .68), rgba(120, 194, 255, .18));
}

.catalog-randomizer-tab {
  position: absolute;
  z-index: 1;
  top: 45%;
  left: 0;
  width: 40px;
  height: 70px;
  display: grid;
  place-items: center end;
  box-sizing: border-box;
  padding: 5px;
  overflow: hidden;
  border-radius: 0 3px 3px 0;
  background: rgba(8, 12, 20, .9);
  color: rgba(255, 255, 255, .82);
  font: 800 7.9px/1 'DM Sans', sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  pointer-events: none;
}

.catalog-randomizer-tab::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 5px;
  bottom: 5px;
  right: 17px;
  width: 1px;
  background: rgba(125, 213, 255, .9);
  box-shadow: 0 0 7px rgba(92, 191, 255, .7);
}

.catalog-randomizer-tab > span {
  z-index: 2;
  writing-mode: vertical-rl;
  white-space: nowrap;
}

.catalog-card.is-recommendation:hover .catalog-recommendation-glow,
.catalog-card.is-recommendation:focus-visible .catalog-recommendation-glow {
  opacity: .72;
  border-color: rgba(174, 230, 255, .92);
  box-shadow: 0 0 12px 2px rgba(180, 237, 255, .72), 0 0 34px 7px rgba(71, 161, 255, .62);
}

.catalog-card.is-recommendation:hover,
.catalog-card.is-recommendation:focus-visible {
  overflow: visible;
}

.catalog-card::after {
  content: '';
  position: absolute;
  z-index: 5;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, .64);
  border-radius: inherit;
  box-shadow: inset 0 0 3px rgba(255, 255, 255, .75), inset 0 0 18px rgba(255, 255, 255, .12);
  pointer-events: none;
}

.catalog-card::before {
  content: '';
  position: absolute;
  z-index: 4;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(118deg, rgba(255, 255, 255, .22), transparent 20% 76%, rgba(255, 255, 255, .15));
  mix-blend-mode: screen;
  opacity: .58;
  pointer-events: none;
}

.catalog-holo,
.catalog-glare,
.catalog-checker-foil {
  position: absolute;
  inset: 0 0 var(--catalog-info-height);
  pointer-events: none;
}

.catalog-holo::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.catalog-holo {
  display: block;
  z-index: 2;
  overflow: hidden;
  border-radius: 13px 13px 0 0;
  background-image:
    radial-gradient(farthest-corner circle at var(--holo-light-x) var(--holo-light-y), rgba(255, 255, 255, .72) 0 5%, rgba(255, 255, 255, .18) 18%, rgba(0, 0, 0, .42) 78%),
    linear-gradient(122deg, var(--foil-pink) 0%, var(--foil-gold) 24%, var(--foil-mint) 44%, var(--foil-sky) 64%, var(--foil-violet) 82%, var(--foil-pink) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.76' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='.82'/%3E%3C/svg%3E");
  background-position: center, var(--holo-background-x) var(--holo-background-y), 0 0;
  background-size: 160% 160%, 240% 240%, 148px 148px;
  background-blend-mode: soft-light, hard-light, soft-light;
  mix-blend-mode: color-dodge;
  opacity: .2;
  filter: brightness(.84) contrast(2.7) saturate(.78);
  transition: opacity 220ms ease-out, filter 220ms ease-out;
}

.catalog-holo::before {
  content: '';
  display: block;
  border-radius: inherit;
}

.catalog-holo::before {
  background-image:
    repeating-linear-gradient(112deg, transparent 0 8%, rgba(255, 255, 255, .72) 9%, rgba(255, 255, 255, .38) 10%, transparent 12% 20%),
    repeating-linear-gradient(68deg, transparent 0 7%, rgba(255, 255, 255, .52) 10%, transparent 14% 23%, rgba(255, 255, 255, .34) 26%, transparent 30% 42%);
  background-position: var(--holo-background-x) calc(100% - var(--holo-background-y)), calc(100% - var(--holo-background-x)) var(--holo-background-y);
  background-size: 260% 260%, 330% 330%;
  background-blend-mode: screen, hard-light;
  filter: brightness(1.05) contrast(1.12);
  mix-blend-mode: normal;
  opacity: calc(.1 + var(--holo-glare) * .2);
}

.catalog-checker-foil {
  z-index: 3;
  overflow: hidden;
  border-radius: 13px 13px 0 0;
  background-image: url('assets/catalog-checker-foil-v1.svg');
  background-repeat: repeat;
  background-position: 0 0;
  background-size: 48px 48px;
  mix-blend-mode: normal;
  filter: brightness(1.08) contrast(1.08);
  opacity: calc(.12 + var(--holo-glare) * .42);
  -webkit-mask-image: radial-gradient(circle at var(--holo-light-x) var(--holo-light-y), #000 0 7%, rgba(0, 0, 0, .9) 16%, rgba(0, 0, 0, .62) 31%, rgba(0, 0, 0, .3) 47%, rgba(0, 0, 0, .08) 57%, transparent 63%);
  mask-image: radial-gradient(circle at var(--holo-light-x) var(--holo-light-y), #000 0 7%, rgba(0, 0, 0, .9) 16%, rgba(0, 0, 0, .62) 31%, rgba(0, 0, 0, .3) 47%, rgba(0, 0, 0, .08) 57%, transparent 63%);
}

.catalog-glare {
  z-index: 3;
  display: block;
  border-radius: 13px 13px 0 0;
  background:
    radial-gradient(farthest-corner circle at var(--holo-light-x) var(--holo-light-y), rgba(255, 255, 255, .76) 0 4%, rgba(255, 255, 255, .46) 16%, rgba(231, 255, 251, .16) 34%, rgba(0, 0, 0, .12) 78%, rgba(0, 0, 0, .34) 100%);
  mix-blend-mode: hard-light;
  filter: brightness(.94) contrast(1.6);
  opacity: calc(var(--holo-glare) * .4);
  transition: opacity 220ms ease-out;
}

.catalog-card:not(.is-disabled):hover {
  --holo-glare: .68;
}

.catalog-card.is-random-preview {
  --holo-glare: .72;
}

.catalog-card.is-recommended {
  --holo-glare: .6;
}

.catalog-card:not(.is-disabled):hover .catalog-holo,
.catalog-card.is-holo-active .catalog-holo,
.catalog-card:focus-visible .catalog-holo {
  opacity: .34;
  filter: brightness(.88) contrast(2.5) saturate(.9);
}

.catalog-card.is-random-preview .catalog-holo {
  opacity: .38;
}

.catalog-card.is-recommended .catalog-holo {
  opacity: .32;
}

.catalog-card-content {
  position: relative;
  grid-row: 2;
  z-index: 3;
  height: auto;
  display: grid;
  grid-template-rows: minmax(0, 1.9em) minmax(0, 1fr);
  gap: 3px;
  padding: 14px 20px 11px;
  overflow: hidden;
  color: #214c50;
  background: rgba(255, 255, 255, .9);
  border-top: 1px solid rgba(255, 255, 255, .76);
  border-radius: 0 0 13px 13px;
}

.catalog-card:nth-child(2) .catalog-card-content {
  background: rgba(255, 255, 255, .9);
}

.catalog-card-content h3 {
  min-width: 0;
  margin: 0;
  color: inherit;
  font: 700 clamp(1.25rem, 1.9vw, 1.45rem)/1.1 'Cormorant Garamond', 'Noto Sans KR', serif;
  letter-spacing: -.035em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .78);
  overflow: hidden;
  overflow-wrap: anywhere;
}

.catalog-meta {
  min-width: 0;
  margin: 0;
  color: #527174;
  font-size: .78rem;
  line-height: 1.5;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.catalog-card:not(.is-disabled):hover {
  --holo-tilt-x: 6deg;
  --holo-tilt-y: -6deg;
  --holo-scale: 1.045;
  --holo-glare: .9;
  box-shadow:
    0 30px 48px rgba(32, 82, 66, .28),
    0 0 3px 1px rgba(255, 255, 255, .72),
    0 0 12px 2px color-mix(in srgb, var(--holo-edge) 78%, transparent),
    0 0 40px -12px color-mix(in srgb, var(--holo-edge) 64%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -18px 32px rgba(81, 142, 109, .13);
  border-color: rgba(255, 255, 255, .96);
  filter: saturate(1.14) brightness(1.03);
}

.catalog-card.is-random-preview {
  --holo-tilt-x: 4deg;
  --holo-tilt-y: -4deg;
  --holo-scale: 1.035;
  --holo-glare: .82;
  z-index: 3;
  border-color: rgba(238, 252, 255, .9);
  box-shadow: 0 20px 38px rgba(12, 6, 34, .54), 0 0 14px 2px rgba(255, 255, 255, .58), 0 0 44px 7px rgba(109, 220, 255, .28);
  filter: saturate(1.22) brightness(1.1);
}

.catalog-card.is-recommended {
  --holo-scale: 1.045;
  --holo-glare: .6;
  z-index: 4;
  border-color: rgba(255, 252, 231, .98);
  overflow: visible;
}

.catalog-recommendation-glow {
  position: absolute;
  z-index: 6;
  inset: -12px;
  border: 1px solid rgba(255, 255, 255, .74);
  border-radius: inherit;
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, .42), 0 0 28px 5px rgba(109, 220, 255, .28);
  opacity: 0;
  pointer-events: none;
}

.catalog-card.is-recommended .catalog-recommendation-glow {
  animation: catalog-recommendation-glow 1.7s ease-in-out infinite alternate;
}

.catalog-recommendation-failure,
.catalog-recommendation-actions {
  position: absolute;
  z-index: 7;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease-out;
}

.catalog-recommendation-failure {
  right: 18px;
  bottom: calc(var(--catalog-info-height) - 14px);
  color: #bf3143;
  font: 800 clamp(calc(1.5rem - 20px), calc(3.6vw - 20px), calc(2.4rem - 20px))/1 'Noto Sans KR', sans-serif;
  letter-spacing: .12em;
  text-shadow: 0 1px 0 rgba(255, 244, 238, .82), 0 2px 7px rgba(76, 14, 21, .28);
  transform: rotate(-10deg) translateY(4px);
}

.catalog-card.is-recommendation.is-recommended .catalog-recommendation-failure {
  opacity: 1;
  transform: rotate(-10deg) translateY(0);
}

.catalog-recommendation-actions {
  inset: 0 0 var(--catalog-info-height);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.catalog-recommendation-actions button {
  min-width: 76px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, .92);
  border-radius: 999px;
  background: rgba(13, 44, 83, .24);
  box-shadow: 0 3px 14px rgba(8, 35, 71, .3);
  color: #fff;
  cursor: pointer;
  font: 700 13px/1 'Noto Sans KR', sans-serif;
  text-shadow: 0 1px 3px rgba(0, 31, 70, .64);
}

.catalog-recommendation-actions button:hover,
.catalog-recommendation-actions button:focus-visible {
  background: rgba(255, 255, 255, .22);
  outline: none;
}

.catalog-card.is-recommended:not(.is-recommendation) .catalog-recommendation-actions {
  opacity: 1;
  pointer-events: auto;
}

@keyframes catalog-recommendation-glow {
  from {
    opacity: .36;
  }

  to {
    opacity: 1;
  }
}

.catalog-card:not(.is-disabled):active {
  --holo-scale: .985;
}

.catalog-card:focus-visible {
  outline: 3px solid #f6cc65;
  outline-offset: 5px;
}

.catalog-card.is-disabled {
  opacity: .68;
  filter: saturate(.55);
  border-style: dashed;
}

@media (max-width: 768px) {
  .catalog-main {
    padding-top: calc(var(--menu-top) + var(--menu-height) + var(--menu-gap));
  }

  .catalog-shell {
    width: min(100% - 32px, 540px);
    padding-bottom: 36px;
  }

  .catalog-heading { gap: 10px; }

  .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 520px) {
  .catalog-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-card {
    transition: none;
    transform: none;
  }

  .catalog-card::before {
    background-position: center;
  }

  .catalog-card .catalog-holo,
  .catalog-card .catalog-glare,
  .catalog-card .catalog-checker-foil {
    transition: none;
    background-position: center;
  }

  .catalog-card.is-recommended {
    overflow: visible;
  }

  .catalog-card.is-recommended .catalog-recommendation-glow {
    animation: none;
    opacity: .72;
  }
}

@media (hover: none) {
  .catalog-card:not(.is-disabled):hover {
    --holo-tilt-x: 0deg;
    --holo-tilt-y: 0deg;
    --holo-scale: 1;
    --holo-glare: .18;
    transform: none;
    filter: none;
  }

  .catalog-card:not(.is-disabled):hover .catalog-holo {
    opacity: .24;
    filter: brightness(.94) contrast(1.7) saturate(.92);
  }
}