/* ============================================================
   unduck — 공개 이벤트 화면
   2026-08-21

   설계 규칙 (사용자 확정 사양)
   - 정보 밀도를 높인다. 작은 섹션 헤더, 얇은 경계선, 촘촘한 여백.
   - 화면 절반을 먹는 hero, 넓은 빈 공간, 과도한 radius/glass 금지.
   - "기업 홈페이지나 SaaS dashboard처럼 보이면 실패다."
   - PC 기준 3~5열 카드. 폭에 따라 자동으로 열 수가 바뀐다.
   ============================================================ */

.xex-events,
.xex-event,
.xex-missing {
  font-family: var(--xex-font);
  color: var(--xex-ink);
  max-width: var(--xex-container);
  margin: 0 auto;
  padding: 16px 12px 40px;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size:15px;
  line-height: 1.65;
}

/* ---------------------------------------------------------- 목록 머리 */

.xex-events__head {
  border-bottom: 2px solid var(--xex-black);
  padding-bottom: 10px;
  margin-bottom: 12px;
}

.xex-events__title {
  font-size:22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  line-height: 1.25;
}

.xex-events__lead {
  font-size:15px;
  color: var(--xex-ink-soft);
  margin: 0 0 6px;
  line-height: 1.5;
}

.xex-events__meta {
  font-size:15px;
  color: var(--xex-ink-soft);
  margin: 0;
}

.xex-events__meta strong { color: var(--xex-ink); }

.xex-events__notice {
  margin: 8px 0 0;
  padding: 6px 8px;
  font-size:15px;
  border: 1px solid var(--xex-line);
  border-left: 3px solid var(--xex-red);
  background: var(--xex-canvas);
}

/* ---------------------------------------------------------- 분류 탭

   두 줄이다. 윗줄이 상태(진행 중·예정·최근 갱신), 아랫줄이 종류(주말·월간·남성·공식·페어).
   두 축은 함께 걸린다. 그래서 탭 수가 4개에서 10개로 늘었다.

   가로 스크롤을 만들지 않는다. 줄이 모자라면 아래로 접힌다(flex-wrap: wrap).
   탭 하나가 화면보다 길어지는 경우까지 막으려고 max-width 와 말줄임을 함께 건다.
   좁은 화면에서는 글자와 여백을 한 단계 줄여 한 줄에 더 담는다.                       */

.xex-filters {
  max-width: 100%;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--xex-line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.xex-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 14px;
  border-bottom: 1px solid var(--xex-line);
  padding-bottom: 8px;
}

/* 묶음 안에서는 줄마다 밑줄을 긋지 않는다. 밑줄은 묶음 바깥쪽에 한 번만. */
.xex-filters .xex-filter {
  margin: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.xex-filter__tab {
  font-size:15px;
  line-height: 1;
  padding: 7px 12px;
  border: 1px solid var(--xex-line);
  border-radius: var(--xex-radius);
  color: var(--xex-ink-soft);
  text-decoration: none;
  background: var(--xex-surface);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xex-filter__tab:hover { border-color: var(--xex-line-strong); color: var(--xex-ink); }

.xex-filter__tab.is-active {
  background: var(--xex-black);
  border-color: var(--xex-black);
  color: var(--xex-white);
  font-weight: 700;
}

/* 종류 줄은 상태 줄보다 한 단계 가볍게. 고른 종류만 적색으로 세운다.
   같은 검정으로 두면 두 줄 중 어느 쪽을 고른 것인지 화면에서 구분되지 않는다. */
.xex-filter--kind .xex-filter__tab {
  font-size:15px;
  padding: 6px 10px;
  background: transparent;
}

.xex-filter--kind .xex-filter__tab:hover {
  border-color: var(--xex-red);
  color: var(--xex-red);
}

.xex-filter--kind .xex-filter__tab.is-active {
  background: var(--xex-red);
  border-color: var(--xex-red);
  color: var(--xex-white);
}

@media (max-width: 520px) {
  .xex-filters { gap: 5px; }
  .xex-filter { gap: 3px; }
  .xex-filter__tab { font-size:15px; padding: 6px 9px; }
  .xex-filter--kind .xex-filter__tab { font-size:15px; line-height: 1.35; padding: 6px 8px; }
}

/* ---------------------------------------------------------- 카드 그리드
   auto-fill + minmax 로 3~5열이 자연스럽게 나온다.
   1200px 컨테이너 기준 240px 최소폭이면 4열, 넓히면 5열이 된다. */

.xex-cardgrid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* 200px 최소폭이면 실제 폭에 따라 열 수가 이렇게 나온다.
       726px (좌우 레일 모두 있음) -> 3열
       918px (이벤트 페이지, 좌측 레일 없음) -> 4열
      1176px (레일 없음) -> 5열
     사양의 "PC 3~5열"을 폭으로 만족시킨다. */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.xex-cardgrid--compact {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}

.xex-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--xex-line);
  border-radius: var(--xex-radius);
  background: var(--xex-surface);
  overflow: hidden;
  min-width: 0;
}

.xex-card:hover { border-color: var(--xex-line-strong); }

.xex-card__link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  flex: 1 1 auto;
  min-width: 0;
}

/* 대표 배너.
   행사 로고 사용 권리가 확인되지 않은 경우가 많아 이미지를 쓰지 않고
   행사명과 브랜드 컬러만 쓴 자체 텍스트 배너를 대표 이미지로 삼는다.
   이미지가 아니므로 수백 개를 깔아도 네트워크 요청이 늘지 않는다. */
.xex-card__banner {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 7;
  padding: 10px 12px;
  background-color: var(--banner-color, var(--xex-red));
  background-image: radial-gradient(color-mix(in srgb, #146B43 22%, transparent) 1px, transparent 1px);
  background-size: 5px 5px;
  border-bottom: 1px solid var(--xex-line);
}

.xex-card__banner-text {
  font-size:16px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--xex-white);
  text-align: center;
  text-shadow: 0 1px 0 color-mix(in srgb, #146B43 55%, transparent);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.xex-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px 10px;
  min-width: 0;
}

.xex-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.xex-card__name {
  font-size:16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--xex-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.xex-card__link:hover .xex-card__name { text-decoration: underline; }

.xex-card__period {
  font-size:15px;
  color: var(--xex-ink-soft);
  font-variant-numeric: tabular-nums;
}

.xex-card__summary {
  font-size:15px;
  line-height: 1.5;
  color: var(--xex-ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.xex-card__foot {
  display: flex;
  border-top: 1px solid var(--xex-line);
}

.xex-card__slurl,
.xex-card__official {
  flex: 1 1 50%;
  text-align: center;
  font-size:15px;
  line-height: 1;
  padding: 8px 4px;
  text-decoration: none;
  color: var(--xex-ink-soft);
  background: var(--xex-canvas);
}

.xex-card__slurl { border-right: 1px solid var(--xex-line); color: var(--xex-red); font-weight: 700; }
.xex-card__slurl:hover,
.xex-card__official:hover { background: var(--xex-line); color: var(--xex-ink); }

/* ---------------------------------------------------------- 빈 상태 · 페이지 */

.xex-empty {
  border: 1px solid var(--xex-line);
  background: var(--xex-canvas);
  padding: 24px 12px;
  text-align: center;
  font-size:15px;
  color: var(--xex-ink-soft);
}

.xex-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.xex-pager__step {
  font-size:15px;
  padding: 7px 14px;
  border: 1px solid var(--xex-line);
  border-radius: var(--xex-radius);
  text-decoration: none;
  color: var(--xex-ink);
  background: var(--xex-surface);
}

.xex-pager__step:hover { border-color: var(--xex-black); }

.xex-pager__state {
  font-size:15px;
  color: var(--xex-ink-soft);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- 상세 */

.xex-crumb {
  font-size:15px;
  color: var(--xex-ink-soft);
  margin-bottom: 10px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.xex-crumb a { color: var(--xex-ink-soft); text-decoration: none; }
.xex-crumb a:hover { color: var(--xex-red); text-decoration: underline; }

.xex-event__head {
  border-top: 3px solid var(--banner-color, var(--xex-red));
  border-bottom: 1px solid var(--xex-line);
  padding: 12px 0 12px;
  margin-bottom: 12px;
}

.xex-event__badges { display: flex; gap: 4px; margin: 0 0 6px; flex-wrap: wrap; }

.xex-event__title {
  font-size:24px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
  overflow-wrap: anywhere;
}

.xex-event__summary {
  font-size:16px;
  line-height: 1.65;
  color: var(--xex-ink);
  margin: 0;
}

.xex-event__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

.xex-btn {
  display: inline-block;
  font-size:15px;
  font-weight: 700;
  line-height: 1;
  padding: 11px 18px;
  border: 1px solid var(--xex-line-strong);
  border-radius: var(--xex-radius);
  background: var(--xex-surface);
  color: var(--xex-ink);
  text-decoration: none;
}

.xex-btn:hover { border-color: var(--xex-black); }

.xex-btn--primary {
  background: var(--xex-red);
  border-color: var(--xex-red);
  color: var(--xex-white);
}

.xex-btn--primary:hover { background: var(--xex-black); border-color: var(--xex-black); }

/* 사실 표 — 두 칸 고정. 라벨은 좁게, 값은 넓게. */
.xex-facts {
  margin: 0 0 12px;
  border-top: 1px solid var(--xex-line);
}

.xex-facts__row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 8px;
  border-bottom: 1px solid var(--xex-line);
  padding: 9px 2px;
  font-size:15px;
}

.xex-facts dt { color: var(--xex-ink-soft); margin: 0; }
.xex-facts dd { margin: 0; overflow-wrap: anywhere; line-height: 1.5; }
.xex-facts dd a { color: var(--xex-red); }

.xex-sourcenote {
  font-size:15px;
  line-height: 1.6;
  color: var(--xex-ink-soft);
  border: 1px solid var(--xex-line);
  border-left: 3px solid var(--xex-black);
  background: var(--xex-canvas);
  padding: 9px 10px;
  margin: 0 0 18px;
}

.xex-related__title,
.xex-missing__title {
  font-size:17px;
  font-weight: 800;
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--xex-black);
}

.xex-backlink { margin: 16px 0 0; font-size:15px; }
.xex-backlink a { color: var(--xex-ink-soft); }

.xex-missing__lead { font-size:15px; line-height: 1.6; color: var(--xex-ink-soft); }
.xex-missing__action { margin-top: 14px; }

/* ---------------------------------------------------------- 모바일
   가로 스크롤이 생기지 않도록 최소 카드 폭을 낮춘다. */

@media (max-width: 767px) {
  .xex-events,
  .xex-event,
  .xex-missing { padding: 12px 10px 32px; }

  .xex-cardgrid,
  .xex-cardgrid--compact { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }

  .xex-events__title { font-size:20px; }
  .xex-event__title { font-size:21px; }
  .xex-facts__row { grid-template-columns: 76px 1fr; font-size:15px; }
  .xex-btn { flex: 1 1 auto; text-align: center; }
}

@media (max-width: 359px) {
  .xex-cardgrid,
  .xex-cardgrid--compact { grid-template-columns: 1fr; }
}

/* ============================================================
   이벤트 카드
   이미지 원색을 유지하고 브랜드 색은 테두리·버튼·배지에만 쓴다.
   ============================================================ */

.xex-events { overflow-x: clip; }

.xex-holo-grid {
  list-style: none;
  display: grid;
  /* 글씨를 읽을 수 있는 크기로 올리면서 칸도 같이 넓혔다.
     250px 에 14~15px 글씨를 넣으면 행사명과 날짜가 줄바꿈으로 무너진다. */
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: clamp(10px, 1.2vw, 16px);
  align-items: stretch;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.xex-holo-slot {
  aspect-ratio: 5 / 7;
  min-width: 0;
  border: 1px dashed var(--xex-line-strong);
  border-radius: var(--xex-radius);
  background: var(--xex-canvas);
}

.xex-holo {
  container-type: inline-size;
  --mx: 50%;
  --my: 50%;
  --bgx: 50%;
  --bgy: 50%;
  --holo-op: 0;
  --holo-edge: 0;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  aspect-ratio: 5 / 7;
  min-width: 0;
  padding: clamp(7px, .65vw, 9px);
  overflow: hidden;
  color: var(--xex-black);
  background:
    radial-gradient(
      circle,
      color-mix(in srgb, var(--xex-line) 58%, transparent) 0 .65px,
      transparent .8px
    ) 0 0 / 7px 7px,
    radial-gradient(
      circle,
      color-mix(in srgb, var(--xex-line-strong) 38%, transparent) 0 .55px,
      transparent .75px
    ) 3px 4px / 11px 11px,
    linear-gradient(145deg, var(--xex-white), var(--xex-canvas));
  border: 1px solid var(--xex-black);
  border-radius: clamp(11px, 1vw, 14px);
  box-shadow:
    0 1px 0 var(--xex-black),
    0 7px 15px color-mix(in srgb, var(--xex-black) 22%, transparent);
  cursor: zoom-in;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  transform-origin: center;
  transition:
    transform .16s ease-out,
    border-color .16s ease-out,
    box-shadow .16s ease-out;
}

.xex-holo::before {
  content: none;
  position: absolute;
  inset: 0;
  z-index: 7;
  padding: 3px;
  pointer-events: none;
  background:
    linear-gradient(
      108deg,
      transparent 0 34%,
      var(--xex-red) 43%,
      var(--xex-white) 49%,
      var(--xex-red) 55%,
      transparent 66%
    ),
    linear-gradient(var(--xex-red) 0 0);
  background-position: calc(100% - var(--bgx)) calc(100% - var(--bgy));
  background-size: 260% 260%, 100% 100%;
  opacity: calc(.38 + (var(--holo-op) * .34));
  -webkit-mask:
    linear-gradient(var(--xex-black) 0 0) content-box,
    linear-gradient(var(--xex-black) 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.xex-holo::after {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: 6;
  pointer-events: none;
  background: none;
  border: 1px solid var(--xex-line-strong);
  border-radius: clamp(6px, .7vw, 9px);
  box-shadow: none;
  opacity: calc(.72 + (var(--holo-edge) * .2));
}

.xex-holo:hover,
.xex-holo:focus-visible {
  border-color: var(--xex-black);
  box-shadow:
    0 0 0 2px var(--xex-white),
    0 0 0 3px var(--xex-black),
    0 9px 18px color-mix(in srgb, var(--xex-black) 24%, transparent);
}

.xex-holo:focus-visible {
  outline: 2px solid var(--xex-white);
  outline-offset: 2px;
}

.xex-holo__frame {
  position: relative;
  z-index: 1;
  display: block;
  flex: 0 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 22%, var(--xex-red), transparent 24%),
    repeating-linear-gradient(
      125deg,
      var(--xex-black) 0 12%,
      var(--xex-red-faint) 13% 21%,
      var(--xex-red-dim) 23% 27%,
      var(--xex-black) 30% 41%
    );
  border: 2px solid var(--xex-black);
  border-bottom-color: var(--xex-black);
  border-radius: 8px 8px 0 0;
  box-shadow: inset 0 0 0 1px var(--xex-white);
}

.xex-holo__photo {
  position: absolute;
  inset: 0;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: none;
  z-index: 1;
}

.xex-holo__frame-text {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: 24px 18px 18px;
  color: var(--xex-white);
  font-size:clamp(17px, 1.35vw, 20px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-align: center;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 0 var(--xex-black), 0 2px 0 var(--xex-black);
}

.xex-holo__shine,
.xex-holo__glare {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  pointer-events: none;
}

.xex-holo__shine {
  overflow: hidden;
  background: none;
  mix-blend-mode: screen;
  filter: brightness(1.12) contrast(1.42);
  opacity: calc(.08 + (var(--holo-op) * .4));
  transition: opacity .16s ease;
}

.xex-holo__shine::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    linear-gradient(
      102deg,
      transparent 0 37%,
      var(--xex-white) 45% 49%,
      transparent 57% 100%
    );
  background-position: calc(100% - var(--mx)) calc(100% - var(--my));
  background-size: 180% 180%;
  mix-blend-mode: hard-light;
  opacity: calc(.18 + (var(--holo-edge) * .36));
}

.xex-holo__shine::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 3px,
      var(--xex-white) 4px,
      transparent 5px 9px
    );
  mix-blend-mode: soft-light;
  opacity: .18;
}

.xex-holo__glare {
  z-index: 3;
  background:
    radial-gradient(
      circle at var(--mx) var(--my),
      var(--xex-white) 0 2%,
      transparent 34%
    );
  mix-blend-mode: luminosity;
  filter: brightness(1.24) contrast(1.24);
  opacity: calc(.04 + (var(--holo-op) * .32));
  transition: opacity .16s ease;
}

.xex-holo.is-live .xex-holo__shine,
.xex-holo.is-live .xex-holo__glare {
  transition: none;
}

.xex-holo__badge,
.xex-holo__updated {
  position: absolute;
  top: 8px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid var(--xex-white);
  border-radius: var(--xex-radius);
  font-size:15px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.01em;
  white-space: nowrap;
  transform: translateZ(0);
  backface-visibility: hidden;
  opacity: .999;
}

.xex-holo__badge { left: 8px; }
.xex-holo__badge-text { filter: grayscale(1); }
.xex-holo__updated {
  right: 8px;
  color: var(--xex-updated-ink);
  background: var(--xex-updated);
  border-color: var(--xex-updated-edge);
}

.xex-holo__badge.xex-badge--current {
  color: var(--xex-live-ink);
  background: var(--xex-live);
  border-color: var(--xex-live);
}

.xex-holo__badge.xex-badge--upcoming {
  color: var(--xex-soon-ink);
  background: var(--xex-soon);
  border-color: var(--xex-soon-edge);
}

.xex-holo__badge.xex-badge--ended {
  color: var(--xex-ended-ink);
  background: var(--xex-ended);
  border-color: var(--xex-ended);
}

.xex-holo__info {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 8px 9px 7px;
  color: var(--xex-black);
  background:
    linear-gradient(var(--xex-white), var(--xex-surface));
  border: 2px solid var(--xex-black);
  border-top: 0;
  border-radius: 0 0 8px 8px;
}

.xex-holo__topline {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--xex-black);
}

.xex-holo__name {
  display: -webkit-box;
  min-height: 2.5em;
  overflow: hidden;
  color: var(--xex-black);
  font-size:16px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -.012em;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.xex-holo__kicker {
  min-width: 0;
  overflow: hidden;
  color: var(--xex-black);
  font-size:15px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: .045em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xex-holo__tags {
  flex: 0 1 auto;
  max-width: 72%;
  overflow: hidden;
  padding: 4px 9px 3px;
  color: var(--xex-white);
  background: var(--xex-black);
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
  font-size:15px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xex-holo__dates {
  display: block;
  color: var(--xex-black);
  font-size:15px;
  font-weight: 800;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.xex-holo__dates::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 2px;
  margin: 0 5px 3px 0;
  background: var(--xex-red);
}

.xex-holo__desc {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 5px;
  min-height: 4.6em;
  padding: 7px 8px;
  overflow: hidden;
  color: var(--xex-ink);
  background:
    radial-gradient(circle at 84% 74%, transparent 0 16px, var(--xex-line) 17px 18px, transparent 19px 28px, var(--xex-line) 29px 30px, transparent 31px),
    linear-gradient(145deg, var(--xex-white), var(--xex-canvas));
  border: 1px solid var(--xex-black);
  box-shadow: inset 0 0 0 1px var(--xex-white);
  font-size:15px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.xex-holo__desc::after {
  content: "★";
  position: absolute;
  right: 8px;
  bottom: -11px;
  color: var(--xex-line);
  font-size:58px;
  font-weight: 900;
  line-height: 1;
  opacity: .48;
  pointer-events: none;
}

.xex-holo__desc-label,
.xex-holo__desc-text {
  position: relative;
  z-index: 1;
}

.xex-holo__desc-label {
  align-self: flex-start;
  padding: 4px 7px 3px;
  color: var(--xex-white);
  background: var(--xex-red-dim);
  max-width: 100%;
  overflow: hidden;
  font-size:15px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xex-holo__desc-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.xex-holo__source {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  min-width: 0;
  margin-top: auto;
  padding-top: 5px;
  border-top: 1px solid var(--xex-line-strong);
  font-size:15px;
  line-height: 1.35;
}

.xex-holo__source-prefix {
  flex: 0 0 auto;
  color: var(--xex-ink-soft);
  font-weight: 800;
}

.xex-holo__source a {
  min-width: 0;
  max-width: 72%;
  overflow: hidden;
  color: var(--xex-black);
  font-weight: 900;
  text-decoration-color: var(--xex-red);
  text-decoration-thickness: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xex-holo__source a::after {
  content: " ↗";
  color: var(--xex-red);
}

.xex-holo__source a:hover,
.xex-holo__source a:focus-visible {
  color: var(--xex-red-dim);
}

.xex-holo__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding: 4px 1px 0;
  border-top: 1px solid var(--xex-black);
}

.xex-holo__setmark {
  min-width: 0;
  overflow: hidden;
  color: var(--xex-ink-soft);
  font-size:15px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .07em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xex-holo__actions {
  display: flex;
  flex: 0 0 auto;
  gap: 3px;
  min-width: 0;
  max-width: 72%;
}

.xex-holo__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(72px, 20cqw, 96px);
  min-height: clamp(34px, 9.2cqw, 44px);
  max-width: clamp(112px, 30cqw, 144px);
  padding: clamp(8px, 2.3cqw, 11px) clamp(10px, 2.9cqw, 14px) clamp(7px, 2.1cqw, 10px);
  color: var(--xex-white);
  background: var(--xex-black);
  border: 0;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
  overflow: hidden;
  font-size:clamp(15px, 2.8cqw, 15px);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xex-holo__btn::before {
  content: "◆";
  margin-right: 5px;
  font-size:15px;
}

.xex-holo__btn:not(:last-child) {
  color: var(--xex-live-ink);
  background: var(--xex-red);
  border-color: var(--xex-red);
}

.xex-holo__btn:hover,
.xex-holo__btn:focus-visible {
  color: var(--xex-black);
  background: var(--xex-white);
}

.xex-holo__btn:focus-visible {
  outline: 2px solid var(--xex-red);
  outline-offset: 1px;
}

.xex-holo__btn--detail {
  display: none;
}

.xex-holo.is-zoomed[data-zoom-state="open"]:not(.is-settling) .xex-holo__btn--detail {
  display: inline-flex;
  color: var(--xex-black);
  background: var(--xex-white);
  box-shadow: inset 0 0 0 2px var(--xex-black);
}

.xex-holo__btn--detail::before {
  content: "›";
  font-size:16px;
}

.xex-holo-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  background: color-mix(in srgb, var(--xex-white) 78%, transparent);
  backdrop-filter: blur(1px);
  opacity: 0;
  transition: opacity .18s ease;
}

.xex-holo-backdrop.is-open {
  pointer-events: auto;
  opacity: 1;
}

.xex-holo.is-zoomed {
  position: fixed;
  z-index: 9998;
  margin: 0;
  aspect-ratio: 5 / 7;
  cursor: pointer;
  transform: none;
  transition:
    left .42s cubic-bezier(.22, .72, .2, 1),
    top .42s cubic-bezier(.22, .72, .2, 1),
    width .42s cubic-bezier(.22, .72, .2, 1),
    height .42s cubic-bezier(.22, .72, .2, 1),
    box-shadow .18s ease;
  box-shadow:
    0 0 0 2px var(--xex-black),
    0 16px 30px color-mix(in srgb, var(--xex-black) 28%, transparent);
}

.xex-holo.is-zoomed.is-settling {
  animation: xexHoloSettle .5s cubic-bezier(.19, .72, .22, 1) both;
}

@keyframes xexHoloSettle {
  0% { transform: scale(1); }
  58% { transform: scale(.992); }
  100% { transform: scale(1); }
}

.xex-holo.is-zoomed:not([data-zoom-state="closing"]) .xex-holo__name {
  min-height: 0;
  font-size:20px;
}

.xex-holo.is-zoomed:not([data-zoom-state="closing"]) .xex-holo__kicker { font-size:15px; }
.xex-holo.is-zoomed:not([data-zoom-state="closing"]) .xex-holo__dates { font-size:15px; }

.xex-holo.is-zoomed:not([data-zoom-state="closing"]) .xex-holo__desc {
  min-height: 0;
  padding: 10px 11px;
  font-size:15px;
}

.xex-holo.is-zoomed:not([data-zoom-state="closing"]) .xex-holo__desc-text {
  -webkit-line-clamp: 5;
}

.xex-holo.is-zoomed:not([data-zoom-state="closing"]) .xex-holo__info {
  gap: 7px;
  padding: 11px 12px 12px;
}

.xex-card__meta {
  color: var(--xex-ink-soft);
  font-size:15px;
  font-weight: 700;
  line-height: 1.35;
}

.xex-event__hero {
  max-height: 420px;
  margin: 0 0 12px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--xex-black);
  border: 1px solid var(--xex-line);
  border-radius: var(--xex-radius);
}

.xex-event__hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
}

@media (max-width: 767px) {
  .xex-holo-grid {
    grid-template-columns: minmax(0, clamp(260px, 82vw, 320px));
    justify-content: center;
    gap: 12px;
  }

  .xex-holo__info { padding: 7px; }
  .xex-holo__name { font-size:15px; }
  .xex-holo__frame-text { font-size:16px; padding: 22px 10px 14px; }
  .xex-holo__desc { min-height: 4.6em; }
  .xex-holo__desc-text { -webkit-line-clamp: 4; }
}

@media (max-width: 330px) {
  .xex-holo-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .xex-holo,
  .xex-holo__shine,
  .xex-holo__glare,
  .xex-holo.is-zoomed {
    transition: none;
  }

  .xex-holo.is-zoomed.is-settling { animation: none; }
}

/* 2026-08-24 이벤트 카드 상호작용·가독성 보완 candidate */
.xex-events { font-size:16px; line-height: 1.6; }
.xex-filter__tab,
.xex-filter--kind .xex-filter__tab { min-height: 40px; font-size:15px; }
.xex-holo { cursor: zoom-in; }
.xex-holo__name { font-size:17px; line-height: 1.35; }
.xex-holo__btn { font-size:15px; }

.xex-holo-backdrop {
  background: color-mix(in srgb, var(--xex-black) 58%, transparent);
  backdrop-filter: blur(3px);
}

.xex-holo.is-zoomed { cursor: pointer; }
.xex-holo.is-zoomed.is-settling {
  animation: xexHoloFullTurn .68s cubic-bezier(.2, .72, .2, 1) both;
  transform-style: preserve-3d;
}

@keyframes xexHoloFullTurn {
  0% { transform: perspective(1400px) rotateY(0deg) scale(.985); }
  50% { transform: perspective(1400px) rotateY(180deg) scale(.97); }
  100% { transform: perspective(1400px) rotateY(360deg) scale(1); }
}

.xex-holo.is-zoomed:not([data-zoom-state="closing"]) .xex-holo__name { font-size:22px; }
.xex-holo.is-zoomed:not([data-zoom-state="closing"]) .xex-holo__kicker,
.xex-holo.is-zoomed:not([data-zoom-state="closing"]) .xex-holo__dates,
.xex-holo.is-zoomed:not([data-zoom-state="closing"]) .xex-holo__desc,
.xex-holo.is-zoomed:not([data-zoom-state="closing"]) .xex-holo__source { font-size:16px; }

@media (max-width: 767px) {
  .xex-holo__name { font-size:17px; }
  .xex-holo__kicker,
  .xex-holo__tags,
  .xex-holo__dates,
  .xex-holo__desc,
  .xex-holo__source,
  .xex-holo__setmark { font-size:15px; }
}

@media (prefers-reduced-motion: reduce) {
  .xex-holo.is-zoomed.is-settling { animation: none; }
}

/* ============================================================
   V8 제휴 제안용 쇼핑 갤러리
   가상의 행사·브랜드·상품만 사용하고 실제 제휴 자료가 들어갈 자리를 보여 준다.
   ============================================================ */

.xex-badge--demo,
.xex-holo__badge.xex-badge--demo {
  color: var(--xex-white);
  background: var(--xex-black);
  border-color: var(--xex-white);
}

.xex-holo__setmark--demo { color: var(--xex-red-dim); }

/* 2026-08-26 v5 polish: 카드의 공개 표기만 새 브랜드로 바꾼다.
   클래스·stable id·slug·원문 데이터는 변경하지 않는다. */
.xex-holo__setmark:not(.xex-holo__setmark--demo) {
  position: relative;
  color: transparent;
}
.xex-holo__setmark:not(.xex-holo__setmark--demo)::before {
  content: "unduck EVENT · 2026";
  position: absolute;
  inset: 0;
  color: #146B43;
  font-size: 15px;
  line-height: 1.5;
}

/* 5:7 고정 종횡비보다 텍스트 높이가 커질 때 하단이 잘리던 문제를 없앤다. */
.xex-holo {
  aspect-ratio: auto;
  min-height: 0;
}

@media (max-width: 767px) {
  .xex-holo-grid { align-items: start; }
  .xex-holo {
    aspect-ratio: auto;
    min-height: 0;
  }
  .xex-holo__desc-text { -webkit-line-clamp: 3; }
}

/* v6 acceptance: 설명·출처를 실제 내용 높이만큼 펼치고 장식 별이 scrollHeight를
   부풀리지 않게 한다. 카드 외곽 overflow:hidden은 유지해 시각 프레임은 보존한다. */
.xex-holo__desc {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
}
.xex-holo__desc::after { content: none; }
.xex-holo__desc-text {
  display: block;
  overflow: visible;
  -webkit-box-orient: initial;
  -webkit-line-clamp: unset;
}

.xex-sourcenote--demo {
  color: var(--xex-ink);
  border-left-color: var(--xex-red);
  background: var(--xex-white);
}

.xex-showcase {
  --showcase-gap: clamp(12px, 2vw, 22px);
  display: grid;
  gap: var(--showcase-gap);
  margin-top: 20px;
}

.xex-showcase h2,
.xex-showcase h3,
.xex-showcase p { margin-top: 0; }

.xex-showcase h2 {
  margin-bottom: 6px;
  color: var(--xex-black);
  font-size:clamp(20px, 2.2vw, 26px);
  line-height: 1.2;
  letter-spacing: -.025em;
}

.xex-showcase__eyebrow {
  margin-bottom: 5px;
  color: var(--xex-red-dim);
  font-size:15px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: .12em;
}

.xex-showcase__metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 2px solid var(--xex-black);
  border-bottom: 1px solid var(--xex-black);
}

.xex-showcase__metric {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 13px 14px;
  background: var(--xex-white);
  border-right: 1px solid var(--xex-line-strong);
}

.xex-showcase__metric:last-child { border-right: 0; }

.xex-showcase__metric strong {
  color: var(--xex-red-dim);
  font-size:clamp(21px, 2.4vw, 28px);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}

.xex-showcase__metric span {
  color: var(--xex-ink-soft);
  font-size:15px;
  font-weight: 800;
}

.xex-showcase__languages {
  display: grid;
  grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr);
  gap: 18px;
  align-items: center;
  padding: 16px;
  color: var(--xex-white);
  background: var(--xex-black);
  border-left: 5px solid var(--xex-red);
}

.xex-showcase__languages h2 { color: var(--xex-white); margin-bottom: 0; }

.xex-showcase__language-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.xex-showcase__language-list span {
  padding: 6px 8px 5px;
  color: var(--xex-white);
  border: 1px solid var(--xex-line-strong);
  font-size:15px;
  font-weight: 800;
  line-height: 1;
}

.xex-gallery {
  scroll-margin-top: 18px;
  padding-top: 4px;
}

.xex-gallery__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 11px;
  border-bottom: 3px solid var(--xex-black);
}

.xex-gallery__head p:not(.xex-showcase__eyebrow) {
  max-width: 720px;
  margin-bottom: 0;
  color: var(--xex-ink-soft);
  font-size:15px;
  line-height: 1.5;
}

.xex-gallery__count {
  flex: 0 0 auto;
  padding: 7px 10px;
  color: var(--xex-ink-soft);
  background: var(--xex-canvas);
  border: 1px solid var(--xex-line-strong);
  font-size:15px;
  font-weight: 800;
}

.xex-gallery__count strong { color: var(--xex-red-dim); font-size:18px; }

.xex-gallery__tools {
  display: grid;
  grid-template-columns: minmax(220px, 310px) minmax(0, 1fr);
  gap: 10px;
  align-items: end;
  padding: 11px 0 13px;
}

.xex-gallery__search {
  display: grid;
  gap: 5px;
  color: var(--xex-ink-soft);
  font-size:15px;
  font-weight: 800;
}

.xex-gallery__search input {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  color: var(--xex-ink);
  background: var(--xex-white);
  border: 1px solid var(--xex-black);
  border-radius: 0;
  font: inherit;
  font-size:15px;
}

.xex-gallery__search input:focus {
  outline: 2px solid var(--xex-red);
  outline-offset: 1px;
}

.xex-gallery__filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.xex-gallery__filters button {
  min-height: 34px;
  padding: 7px 10px;
  color: var(--xex-ink);
  background: var(--xex-white);
  border: 1px solid var(--xex-line-strong);
  border-radius: 0;
  font-size:15px;
  font-weight: 850;
  cursor: pointer;
}

.xex-gallery__filters button:hover,
.xex-gallery__filters button:focus-visible { border-color: var(--xex-red); }

.xex-gallery__filters button.is-active {
  color: var(--xex-white);
  background: var(--xex-black);
  border-color: var(--xex-black);
}

.xex-product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.xex-product[hidden] { display: none !important; }

.xex-product {
  min-width: 0;
  overflow: hidden;
  background: var(--xex-white);
  border: 1px solid var(--xex-black);
  box-shadow: 0 3px 0 var(--xex-black);
}

.xex-product__visual {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: end;
  min-height: 190px;
  padding: 16px;
  overflow: hidden;
  color: var(--xex-white);
  background-color: var(--xex-black);
  border-bottom: 1px solid var(--xex-black);
  isolation: isolate;
}

.xex-product__visual::before,
.xex-product__visual::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.xex-product__visual::before {
  width: 180px;
  height: 180px;
  top: -58px;
  right: -38px;
  border: 26px solid color-mix(in srgb, var(--xex-white) 72%, transparent);
  border-radius: 50%;
  opacity: .28;
}

.xex-product__visual::after {
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--xex-black) 82%, transparent));
}

.xex-product__visual--rift,
.xex-product-visual--rift { background: linear-gradient(135deg, #146B43 0 52%, #F27A00 52%); }
.xex-product__visual--halo,
.xex-product-visual--halo { background: linear-gradient(145deg, #FFF9EE 0 48%, #F27A00 48%); }
.xex-product__visual--echo,
.xex-product-visual--echo { background: radial-gradient(circle at 70% 22%, #146B43 0 12%, transparent 13%), linear-gradient(120deg, #146B43, #F27A00); }
.xex-product__visual--orbit,
.xex-product-visual--orbit { background: linear-gradient(25deg, #146B43 0 32%, #146B43 32% 66%, #F27A00 66%); }
.xex-product__visual--signal,
.xex-product-visual--signal { background: repeating-linear-gradient(120deg, #146B43 0 18px, #F27A00 19px 36px); }
.xex-product__visual--velvet,
.xex-product-visual--velvet { background: radial-gradient(circle at 75% 30%, #F27A00 0 13%, transparent 14%), linear-gradient(145deg, #F27A00, #146B43); }

.xex-product__visual--direct {
  background-position: center;
  background-size: cover;
}

.xex-product__visual strong {
  font-size:clamp(24px, 3vw, 36px);
  font-weight: 950;
  line-height: .95;
  letter-spacing: -.045em;
}

.xex-product__visual > span:last-child {
  margin-top: 7px;
  font-size:15px;
  font-weight: 900;
  letter-spacing: .12em;
}

.xex-product__demo {
  position: absolute;
  top: 9px;
  left: 9px;
  padding: 5px 7px;
  color: var(--xex-black);
  background: var(--xex-white);
  border: 1px solid var(--xex-black);
  font-size:15px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: .08em;
}

.xex-product__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 11px;
}

.xex-product__top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 8px;
}

.xex-product__brand {
  margin-bottom: 2px;
  color: var(--xex-red-dim);
  font-size:15px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: .08em;
}

.xex-product h3 {
  margin-bottom: 0;
  color: var(--xex-black);
  font-size:18px;
  line-height: 1.2;
}

.xex-product__favorite {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--xex-black);
  background: var(--xex-white);
  border: 1px solid var(--xex-black);
  border-radius: 50%;
  font-size:22px;
  line-height: 1;
  cursor: pointer;
}

.xex-product__favorite[aria-pressed="true"] { color: var(--xex-white); background: var(--xex-red-dim); }

.xex-product__summary {
  min-height: 3em;
  margin-bottom: 0;
  color: var(--xex-ink-soft);
  font-size:15px;
  line-height: 1.5;
}

.xex-product__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.xex-product__badges span {
  padding: 4px 6px 3px;
  color: var(--xex-white);
  background: var(--xex-black);
  font-size:15px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: .05em;
}

.xex-product__facts {
  margin: 0;
  border-top: 1px solid var(--xex-line);
}

.xex-product__facts > div {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 6px;
  padding: 5px 0;
  border-bottom: 1px solid var(--xex-line);
  font-size:15px;
  line-height: 1.35;
}

.xex-product__facts dt { color: var(--xex-ink-soft); }
.xex-product__facts dd { margin: 0; color: var(--xex-ink); font-weight: 750; overflow-wrap: anywhere; }

.xex-product__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.xex-product__actions a {
  min-width: 0;
  padding: 9px 6px;
  overflow: hidden;
  color: var(--xex-white);
  background: var(--xex-black);
  border: 1px solid var(--xex-black);
  font-size:15px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xex-product__actions .xex-product__action--surl { background: var(--xex-red-dim); border-color: var(--xex-red-dim); }
.xex-product__actions .xex-product__action--marketplace { background: var(--xex-black); border-color: var(--xex-black); }
.xex-product__actions a:only-child { grid-column: 1 / -1; }
.xex-product__actions .xex-product__action:hover { color: var(--xex-black); background: var(--xex-white); }

/* V9: 상품 설명 카드가 아니라 이미지가 주인공인 쇼핑 카탈로그. */
.xex-gallery {
  margin-top: clamp(26px, 4vw, 48px);
  padding-top: 14px;
  border-top: 4px solid var(--xex-black);
}

.xex-gallery h2 {
  margin: 0 0 6px;
  color: var(--xex-black);
  font-size:clamp(22px, 2.5vw, 30px);
  line-height: 1.15;
  letter-spacing: -.03em;
}

.xex-product {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--xex-black);
}

.xex-product__visual {
  display: block;
  aspect-ratio: 1 / 1;
  min-height: 0;
  padding: 0;
  background-repeat: no-repeat;
  background-position: var(--product-position, 50% 50%);
  background-size: 300% 200%;
  border-radius: 12px 12px 0 0;
  isolation: isolate;
}

.xex-product__visual.xex-product__visual--direct {
  background-position: center;
  background-size: cover;
}

.xex-product__visual:not(.xex-product__visual--direct) { background-image: var(--product-image); }

.xex-product__thumbnail {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.xex-product__visual::before {
  inset: 0;
  z-index: 1;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, color-mix(in srgb, #146B43 38%, transparent) 0%, transparent 26%, transparent 54%, color-mix(in srgb, #146B43 88%, transparent) 100%);
  opacity: 1;
}

.xex-product__visual::after { display: none; }

.xex-product__image-link {
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  cursor: zoom-in;
}

.xex-product__image-link:focus-visible {
  outline: 3px solid var(--xex-white);
  outline-offset: -6px;
}

.xex-lightbox {
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
}

.xex-lightbox[open] { display: grid; place-items: center; }
.xex-lightbox::backdrop { background: color-mix(in srgb, #146B43 86%, transparent); }

.xex-lightbox__panel {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: min(900px, calc(100vw - 32px));
  height: min(675px, calc(100vh - 32px));
  overflow: hidden;
  color: var(--xex-white);
  background: var(--xex-black);
  border: 2px solid var(--xex-white);
  border-radius: 14px;
  box-shadow: 0 18px 70px color-mix(in srgb, #146B43 58%, transparent);
}

.xex-lightbox__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 10px 14px;
  background: var(--xex-black);
}

.xex-lightbox__frame {
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 12px;
  overflow: hidden;
  background: #146B43;
}

.xex-lightbox__frame img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: zoom-out;
}

.xex-lightbox__foot { border-top: 1px solid color-mix(in srgb, #FFF9EE 25%, transparent); }
.xex-lightbox__foot > strong { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xex-lightbox__actions { display: flex; flex: 0 0 auto; justify-content: flex-end; gap: 6px; }
.xex-lightbox__actions a {
  display: grid;
  min-width: 88px;
  min-height: 32px;
  place-items: center;
  padding: 5px 10px;
  color: var(--xex-white);
  border: 1px solid var(--xex-white);
  border-radius: 8px;
  font-size:15px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}
.xex-lightbox__actions .xex-product__action--surl { background: var(--xex-red-dim); }
.xex-lightbox__actions .xex-product__action--marketplace { background: var(--xex-black); }
.xex-lightbox__actions a:hover { color: var(--xex-black); background: var(--xex-white); }
.xex-lightbox__actions a[hidden] { display: none; }

.xex-product__demo {
  z-index: 3;
  top: 10px;
  left: 10px;
  padding: 5px 7px 4px;
  color: var(--xex-white);
  background: color-mix(in srgb, #146B43 82%, transparent);
  border-color: color-mix(in srgb, #FFF9EE 72%, transparent);
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

.xex-product__badges {
  position: absolute;
  z-index: 3;
  top: 40px;
  left: 10px;
  max-width: calc(100% - 62px);
}

.xex-product__badges span {
  background: color-mix(in srgb, #F27A00 92%, transparent);
  border: 1px solid color-mix(in srgb, #FFF9EE 72%, transparent);
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

.xex-product__favorite {
  position: absolute;
  z-index: 4;
  top: 10px;
  right: 10px;
  color: var(--xex-white);
  background: color-mix(in srgb, #146B43 68%, transparent);
  border-color: color-mix(in srgb, #FFF9EE 82%, transparent);
  backdrop-filter: blur(5px);
}

.xex-product__favorite[aria-pressed="true"] {
  color: var(--xex-white);
  background: color-mix(in srgb, #F27A00 94%, transparent);
}

.xex-product__overlay {
  position: absolute;
  z-index: 3;
  right: 14px;
  bottom: 13px;
  left: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  align-items: end;
  margin: 0 !important;
  color: var(--xex-white);
  line-height: 1.1;
}

.xex-product__overlay .xex-product__brand {
  grid-column: 1 / -1;
  margin: 0;
  color: color-mix(in srgb, #FFF9EE 78%, transparent);
  font-size:15px;
  letter-spacing: .11em;
}

.xex-product__overlay strong {
  min-width: 0;
  overflow: hidden;
  color: var(--xex-white);
  font-size:clamp(17px, 2vw, 22px);
  font-weight: 950;
  line-height: 1.08;
  letter-spacing: -.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xex-product__price {
  padding: 5px 7px 4px;
  color: var(--xex-black);
  background: var(--xex-white);
  border-radius: 999px;
  font-size:15px;
  font-weight: 950;
  white-space: nowrap;
}

.xex-product__body {
  flex: 1 1 auto;
  gap: 8px;
  justify-content: flex-end;
  min-height: 86px;
  padding: 9px;
}

.xex-product__meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  color: var(--xex-ink-soft);
  font-size:15px;
  font-weight: 800;
  line-height: 1.2;
}

.xex-product__meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xex-product__meta span:last-child { text-align: right; }

.xex-product__actions { margin-top: auto; }

.xex-product__actions a {
  min-height: 38px;
  display: grid;
  place-items: center;
  padding: 9px 8px;
  border-radius: 8px;
  font-size:15px;
}

.xex-gallery__empty {
  margin: 10px 0 0;
  padding: 28px 14px;
  color: var(--xex-ink-soft);
  background: var(--xex-canvas);
  border: 1px dashed var(--xex-line-strong);
  text-align: center;
  font-size:15px;
}

.xex-gallery__rights {
  max-width: 760px;
  margin: 8px 0 0;
  color: var(--xex-ink-soft);
  font-size:15px;
  line-height: 1.5;
}

.xex-gallery__attribution {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  width: fit-content;
  margin-top: 10px;
  padding: 8px 10px;
  color: var(--xex-white);
  background: var(--xex-black);
  border-left: 5px solid var(--xex-red);
  font-size:15px;
  line-height: 1.3;
}

.xex-gallery__attribution strong { font-weight: 950; }
.xex-gallery__attribution a {
  color: var(--xex-white);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.xex-gallery__attribution a:hover { color: var(--xex-red); }

.xex-gallery__classification {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.xex-gallery__classification span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  color: var(--xex-ink);
  background: var(--xex-paper);
  border: 1px solid var(--xex-line-strong);
  border-radius: 999px;
  font-size:15px;
  font-weight: 900;
  line-height: 1;
}

.xex-gallery__classification .xex-gallery__maturity--mixed {
  color: var(--xex-white);
  background: var(--xex-red-dim);
  border-color: var(--xex-red-dim);
}

.xex-gallery__notice {
  max-width: 760px;
  margin: 10px 0 0;
  padding: 9px 11px;
  color: var(--xex-ink);
  background: var(--xex-paper);
  border-left: 4px solid var(--xex-red-dim);
  font-size:15px;
  line-height: 1.5;
}

.xex-gallery__rights a {
  margin-left: 6px;
  color: var(--xex-red-dim);
  font-weight: 900;
}

.xex-external-gallery {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(26px, 4vw, 48px);
  padding: clamp(18px, 3vw, 28px);
  color: var(--xex-white);
  background: var(--xex-black);
  border-bottom: 5px solid var(--xex-red);
}

.xex-external-gallery h2 { margin: 0 0 6px; color: inherit; }
.xex-external-gallery p { margin: 0; color: var(--xex-line); line-height: 1.5; }
.xex-external-gallery a {
  flex: 0 0 auto;
  padding: 12px 16px;
  color: var(--xex-white);
  background: var(--xex-red-dim);
  border: 1px solid var(--xex-white);
  font-size:15px;
  font-weight: 900;
  text-decoration: none;
}
.xex-external-gallery a:hover { color: var(--xex-black); background: var(--xex-white); }

.xex-showcase__benefits,
.xex-showcase__submission {
  padding-top: 4px;
  border-top: 3px solid var(--xex-black);
}

.xex-showcase__benefit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.xex-showcase__benefit-grid article {
  padding: 13px;
  background: var(--xex-canvas);
  border: 1px solid var(--xex-line-strong);
  border-top: 3px solid var(--xex-red-dim);
}

.xex-showcase__benefit-grid h3,
.xex-showcase__submission h3 {
  margin-bottom: 5px;
  font-size:15px;
  line-height: 1.25;
}

.xex-showcase__benefit-grid p,
.xex-showcase__submission p {
  margin-bottom: 0;
  color: var(--xex-ink-soft);
  font-size:15px;
  line-height: 1.55;
}

.xex-showcase__submission ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--xex-black);
}

.xex-showcase__submission li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  padding: 12px;
  border-right: 1px solid var(--xex-line-strong);
}

.xex-showcase__submission li:last-child { border-right: 0; }

.xex-showcase__submission li > strong {
  color: var(--xex-red-dim);
  font-size:22px;
  line-height: 1;
}

.xex-showcase__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px;
  color: var(--xex-white);
  background: var(--xex-black);
  border-bottom: 5px solid var(--xex-red);
}

.xex-showcase__cta div { display: grid; gap: 4px; }
.xex-showcase__cta strong { font-size:18px; }
.xex-showcase__cta span { color: var(--xex-line); font-size:15px; line-height: 1.45; }
.xex-showcase__cta a {
  flex: 0 0 auto;
  padding: 11px 14px;
  color: var(--xex-white);
  background: var(--xex-red-dim);
  border: 1px solid var(--xex-white);
  font-size:15px;
  font-weight: 900;
  text-decoration: none;
}

.xex-showcase__cta a:hover { color: var(--xex-black); background: var(--xex-white); }

@media (max-width: 900px) {
  .xex-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xex-showcase__benefit-grid,
  .xex-showcase__submission ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xex-showcase__submission li:nth-child(2) { border-right: 0; }
  .xex-showcase__submission li:nth-child(-n+2) { border-bottom: 1px solid var(--xex-line-strong); }
}

@media (max-width: 620px) {
  .xex-lightbox__panel { width: calc(100vw - 24px); height: min(645px, calc(100vh - 24px)); border-radius: 10px; }
  .xex-lightbox__foot { align-items: stretch; flex-direction: column; gap: 8px; }
  .xex-lightbox__actions { justify-content: center; width: 100%; }
  .xex-showcase__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xex-showcase__metric:nth-child(2) { border-right: 0; }
  .xex-showcase__metric:nth-child(-n+2) { border-bottom: 1px solid var(--xex-line-strong); }
  .xex-showcase__languages,
  .xex-gallery__tools { grid-template-columns: 1fr; }
  .xex-showcase__language-list,
  .xex-gallery__filters { justify-content: flex-start; }
  .xex-gallery__head { align-items: start; flex-direction: column; }
  .xex-product-grid { grid-template-columns: 1fr; }
  .xex-product__visual { min-height: 0; }
  .xex-showcase__benefit-grid,
  .xex-showcase__submission ol { grid-template-columns: 1fr; }
  .xex-showcase__benefit-grid article { min-height: 0; }
  .xex-showcase__submission li,
  .xex-showcase__submission li:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--xex-line-strong); }
  .xex-showcase__submission li:last-child { border-bottom: 0; }
  .xex-showcase__cta { align-items: stretch; flex-direction: column; }
  .xex-showcase__cta a { text-align: center; }
  .xex-external-gallery { align-items: stretch; flex-direction: column; }
  .xex-external-gallery a { text-align: center; }
}

/* 아이템 진입 화면: 설명 패널보다 상품 이미지가 먼저 보인다. */
.xex-a11y-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.xex-gallery {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  scroll-margin-top: 12px;
}

.xex-gallery__tools--compact {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--xex-line);
}

.xex-gallery__tools--compact .xex-gallery__search {
  display: block;
  flex: 0 1 220px;
}

.xex-gallery__tools--compact .xex-gallery__search input {
  min-height: 34px;
  padding: 6px 9px;
}

.xex-gallery__tools--compact .xex-gallery__filters {
  flex: 1 1 auto;
  justify-content: flex-start;
}

.xex-gallery__tools--compact .xex-gallery__filters button {
  min-height: 32px;
  padding: 6px 9px;
}

.xex-gallery__count--compact {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 0;
  border: 0;
  white-space: nowrap;
  font-size:15px;
}

.xex-gallery__count--compact strong { font-size:16px; }

@media (max-width: 620px) {
  .xex-gallery__tools--compact { align-items: stretch; flex-wrap: wrap; }
  .xex-gallery__tools--compact .xex-gallery__search { flex: 1 1 140px; }
  .xex-gallery__count--compact { align-self: center; margin-left: 0; }
}

/* 행사 정보는 유지하되, 상세 상단을 길게 세로로 밀지 않는다. */
.xex-facts--two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  margin-bottom: 6px;
}

.xex-facts--two-column .xex-facts__row {
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 7px;
  padding: 6px 2px;
  font-size:15px;
}

.xex-facts--two-column + .xex-sourcenote {
  margin-bottom: 8px;
  padding: 7px 9px;
}

@media (max-width: 767px) {
  .xex-facts--two-column { grid-template-columns: 1fr; }
  .xex-facts--two-column .xex-facts__row { grid-template-columns: 76px minmax(0, 1fr); }
}

/* 2026-08-25 이벤트 상세 상단: 대표 이미지와 행사 정보를 한 화면에 배치한다. */
.xex-event__overview {
  display: grid;
  grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
  gap: clamp(20px, 2.4vw, 34px);
  align-items: start;
  margin: 0 0 18px;
}

.xex-event__media,
.xex-event__info { min-width: 0; }

.xex-event__overview > .xex-event__info:only-child { grid-column: 1 / -1; }

.xex-event__overview .xex-event__hero {
  width: 100%;
  max-height: none;
  margin: 0;
}

.xex-event__overview .xex-event__head {
  padding: 10px 0;
  margin: 0 0 10px;
}

.xex-event__overview .xex-event__actions { margin-bottom: 10px; }

.xex-event__overview .xex-facts--two-column {
  column-gap: 16px;
  margin-bottom: 8px;
}

.xex-event__overview .xex-facts--two-column .xex-facts__row {
  grid-template-columns: 76px minmax(0, 1fr);
  padding: 6px 2px;
}

.xex-event__overview .xex-sourcenote { margin-bottom: 0; }

.xex-event__overview + .xex-gallery {
  margin-top: 0;
  padding-top: 14px;
  border-top: 3px solid var(--xex-black);
}

.xex-related { margin-top: 24px; }

@media (max-width: 767px) {
  .xex-event__overview {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 16px;
  }

  .xex-event__overview .xex-event__hero { aspect-ratio: 16 / 9; }
  .xex-event__overview .xex-event__head { padding-top: 9px; }
  .xex-event__overview .xex-event__actions { gap: 7px; }
  .xex-event__overview .xex-facts--two-column { grid-template-columns: minmax(0, 1fr); }
  .xex-event__overview + .xex-gallery { padding-top: 12px; }
  .xex-related { margin-top: 20px; }
}