/* ============================================================
   unduck — 브랜드 토큰
   2026-08-21
   이 파일은 색·간격 토큰과 브랜드 표시 요소만 정의한다.
   기존 portal.css / board.css 의 레이아웃 규칙은 건드리지 않는다.
   내부 식별자(redhands_*)는 그대로 두고 화면에 보이는 것만 XeX로 바꾼다.
   ============================================================ */

:root {
  /* 공개 색상은 unduck 공식 4색만 사용한다. 내부 변수명은 호환성 때문에 유지한다. */
  --xex-black:        #146B43;
  --xex-red:          #F27A00;
  --xex-white:        #FFF9EE;

  /* --- 파생 색 --- */
  --xex-red-dim:      #146B43;
  --xex-red-faint:    #146B43;
  --xex-ink:          #146B43;
  --xex-ink-soft:     #146B43;
  --xex-line:         #146B43;
  --xex-line-strong:  #146B43;
  --xex-surface:      #FFF9EE;
  --xex-canvas:       #FFF9EE;
  --xex-bar:          #146B43;

  /* --- 상태 색 (이벤트 카드용) ---
     네 상태를 색상(hue)이 아니라 밝기로 가른다. 붉은/흰/검정 톤 밖으로 나가지 않으면서
     흑백 화면에서도 네 단계가 서로 구분되도록 명도를 벌려 놓았다.
     괄호 안은 흑백 변환 시 밝기(0.299R+0.587G+0.114B, 0~1).
       예정(0.07) < 진행 중(0.26) < 종료(0.54) < 갱신됨(0.99)
     글자색·테두리는 아래 .xex-badge--* 규칙에서 짝지어 지정한다. */
  --xex-live:         #F27A00;
  --xex-live-ink:     #FFF9EE;
  --xex-soon:         #FFC928;
  --xex-soon-ink:     #146B43;
  --xex-soon-edge:    #146B43;
  --xex-ended:        #146B43;
  --xex-ended-ink:    #FFF9EE;
  --xex-updated:      #FFF9EE;
  --xex-updated-ink:  #146B43;
  --xex-updated-edge: #F27A00;

  /* --- 레이아웃 수치 (사용자 확정 사양) --- */
  --xex-container:    1200px;
  --xex-sidebar:      270px;
  --xex-header-h:     72px;
  --xex-search-w:     430px;
  --xex-gap:          12px;
  --xex-radius:       2px;       /* 과도한 border-radius 금지 */

  /* --- 폰트 --- */
  --xex-font: "Pretendard", "Pretendard Variable", "Noto Sans KR",
              -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, sans-serif;
}

/* ============================================================
   브랜드 로고
   SVG를 1순위로 쓴다. 도트가 어떤 배율에서도 뭉개지지 않는다.
   ============================================================ */

.xex-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  line-height: 0;
}

/* 도트 로고는 정수 배율로만 키운다.
   워드마크는 논리 픽셀 11칸 높이다. 22px = 2배, 33px = 3배, 44px = 4배.
   26px 같은 어중간한 값을 쓰면 픽셀 격자가 어긋나 글자가 뭉개진다.
   실제로 헤더에서 26px 로 눌렀다가 뭉개졌다. */
.xex-brand__logo {
  display: block;
  height: 56px;
  max-width: 155px;
  width: auto;
  object-fit: contain;
  image-rendering: auto; /* 그라데이션 로고라 픽셀렌더 대신 부드럽게 축소 */
}

/* 실제 밝은 PNG를 사용한다. 가상 마스크와 이미지가 겹치는 경로는 사용하지 않는다. */
.xex-brand::before {
  content: none;
  display: none;
}

@media (max-width: 767px) {
  .xex-brand__logo { width: 133px; height: 48px; }
}

.xex-brand__logo--lg { height: 33px; }   /* 11 x 3 */
.xex-brand__logo--sm { height: 11px; }   /* 11 x 1 */

/* 이미지가 못 뜰 때 대비한 텍스트 대체 */
.xex-brand__text {
  font-family: var(--xex-font);
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--xex-white);
  font-size:18px;
  line-height: 1;
}
.xex-brand__text em {
  font-style: normal;
  color: var(--xex-red);
  margin: 0 .25em;
}

/* 스크린리더 전용 */
.xex-sr-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-globalbar {
  background: var(--xex-bar);
  border-bottom: 2px solid var(--xex-red);
  height: var(--xex-header-h);
}

/* ============================================================
   상태 배지 — 이벤트 카드에서 쓴다
   ============================================================ */

.xex-badge {
  display: inline-block;
  padding: 1px 6px;
  font-size:15px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: .02em;
  border-radius: var(--xex-radius);
  color: var(--xex-white);
  white-space: nowrap;
}
/* PublicContract 가 내보내는 status 값은 current / upcoming 이다.
   스킨이 그 값을 그대로 클래스에 붙이므로 이 두 이름이 반드시 있어야 한다.
   (없으면 배경이 비어 흰 글자가 흰 바탕에 찍혀 배지가 사라진다) */
/* 테두리 두께를 미리 잡아 둔다. 상태에 따라 테두리 색만 바뀌고 글자 위치는 안 흔들린다. */
.xex-badge { border: 1px solid transparent; }

.xex-badge--current  { background: var(--xex-live);    color: var(--xex-live-ink); }
.xex-badge--upcoming { background: var(--xex-soon);    color: var(--xex-soon-ink);
                       border-color: var(--xex-soon-edge); }
.xex-badge--ended    { background: var(--xex-ended);   color: var(--xex-ended-ink); }
.xex-badge--updated  { background: var(--xex-updated); color: var(--xex-updated-ink);
                       border-color: var(--xex-updated-edge); font-weight: 800; }

/* 의미 기반 별칭. 다른 화면에서 상태를 직접 지정할 때 쓴다. */
.xex-badge--live     { background: var(--xex-live); color: var(--xex-live-ink); }
.xex-badge--soon     { background: var(--xex-soon); color: var(--xex-soon-ink);
                       border-color: var(--xex-soon-edge); }

/* ============================================================
   하우스 배너 — 광고주가 없을 때 자체 배너로 슬롯을 채운다.
   가짜 회사 광고는 만들지 않는다.
   ============================================================ */

.xex-house-banner {
  display: block;
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ============================================================
   도트 배경 유틸 — 히어로·빈 상태 영역에 아주 옅게만 쓴다.
   ============================================================ */

.xex-dotfield {
  background-color: var(--xex-black);
  background-image: radial-gradient(var(--xex-red-faint) 1px, transparent 1px);
  background-size: 6px 6px;
}

/* ============================================================
   접근성 — 모션 최소화 환경 존중
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .xex-brand__logo { transition: none !important; }
}