:root {
  --color-bg: #0f0f0f;
  --color-bg-secondary: #1a1a1a;
  --color-text: #e8e8e8;
  --color-text-muted: #999999;
  --color-border: #333333;
  --color-live: #ff0000;
  --color-live-text: #ffffff;
  --color-late: #e0a030;         /* 예정 시각 지남(라이브 전환 미확인) 경고색 */
  --color-sched: #7c8aa0;        /* (v2.3) scheduled "예고" 표식 — 저채도 슬레이트, live·late 와 안 겹침 */
  --color-collab: #8b7cc9;       /* (v2.4) 합동방송(공동명의 채널) 표식 — 바이올렛, live/sched/late 와 안 겹침 */
  --gap: 1rem;
  --lane-min-width: 240px;
  --lane-max-width: 280px;      /* PC에서 레인이 이 이상 넓어지지 않음 */
  --page-pad: clamp(1rem, 4vw, 3rem);  /* 가장자리 최소 패딩 */
  /* 보드 최대 폭 = 레인5 + gap4 + 좌우 패딩(3rem*2). 이 폭에서 레인이 정확히 lane-max-width */
  --content-max: calc(5 * var(--lane-max-width) + 4 * var(--gap) + 6rem);
  /* PC 카드 고정 세로 크기 (썸네일 132 + 본문). card.css 참고 */
  --card-h: 210px;
  --scrollbar: var(--color-border);
  --scrollbar-hover: var(--color-text-muted);
  /* (v4.6.0) 테마마다 달라지는 보조 색 — 여기 값이 어둡게(기본), 밝게는 css/theme.css 가 덮는다 */
  --color-text-faint: #5d5d5d;           /* 「오늘 예고 없음」 같은 아주 옅은 글자 */
  --color-line-soft: #2a2a2a;            /* 타임테이블 칸 점선 · 소식 칸 구분선 */
  --color-grid: #262626;                 /* 타임테이블 4시간 눈금 */
  --color-dawn: rgba(255, 255, 255, 0.085);    /* (v4.9.6) 타임테이블 익일 새벽 칸(실제 다음 날 00:00~04:00) */
  --color-dawn-edge: rgba(255, 255, 255, 0.28);
  --color-hover: #232323;                /* 버튼 위에 올렸을 때 바탕 */
  --color-hover-veil: rgba(255, 255, 255, 0.06);
  --color-raised: #2b2f38;               /* 고른 탭 바탕 */
  --color-raised-edge: #46505f;
  --color-img: #111111;                  /* 썸네일 · 아바타 이미지 자리 */
  --color-img-broken: #444444;
  --color-tag-bg: #3a3f48;
  --color-tag-fg: #d6dbe3;
  --color-tag-mem-bg: #2f6f4f;           /* 회원 전용 태그 */
  --color-tag-mem-fg: #dff7e8;
  --color-ended: #a8a8a8;                /* 끝난 방송 글자 */
  --color-ended-edge: #444444;
  --color-ended-mark: #555555;
  --color-past: rgba(0, 0, 0, 0.3);      /* 타임테이블 지난 구간 음영 */
  --color-ring-track: rgba(255, 255, 255, 0.1);
  --color-ph-deep: #000000;              /* 썸네일 없는 예고 자리표시 그라데이션 */
  --color-ph-base: #141414;
  --color-tint-ink: #ffffff;             /* 색을 옅게 깐 배지 글자 = color-mix(색, 이 값) */
  --shadow-pop: rgba(0, 0, 0, 0.6);
}

html {
  scroll-behavior: smooth;
  scrollbar-color: var(--scrollbar) transparent;
}

/* 테마에 맞춘 스크롤바 (내부 스크롤 영역 + 페이지) */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar) transparent;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-hover);
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

/* Main board */
#board {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;              /* 레인은 내용 높이만큼만 (100vh 강제 늘어남 방지) */
  gap: var(--gap);
  max-width: var(--content-max);   /* 이 폭에서 멈춤 → 레인이 lane-max-width 이상 안 커짐 */
  margin-inline: auto;             /* 남는 공간은 좌우 여백으로 (중앙 정렬) */
  padding: var(--gap) var(--page-pad);
  padding-bottom: 80px; /* Account for fixed footer */
}
/* PC: 보드 아래 빈 공간을 비워 두지 않는다 — 플레이어 도크(#player-dock)가 타임테이블 바로 아래에 온다. 푸터 여백은 도크가 가진다 */
@media (min-width: 768px) {
  #board { padding-bottom: var(--gap); }
}

/* Lane container */
.lane {
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
}

/* sampleLaneColor()가 아바타 평균색을 넣음. 실패 시 이 폴백색 사용 */
.lane {
  --lane-color: var(--color-border);
}

/* Lane header — 아바타(좌) + 이름/핸들, 좌→우 캐릭터색 그라데이션 */
.lane__header {
  position: relative;
  overflow: hidden;
  z-index: 10;
  padding: 0.8rem 1rem;
  background-color: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.lane__header::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--lane-color) 60%, transparent),
    transparent 72%
  );
}

.lane__link {
  position: relative; /* 그라데이션 위로 */
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transition: opacity 0.2s;
}
.lane__link { cursor: pointer; }
.lane--later .lane__link { cursor: default; }   /* 이후 예고 열은 말풍선 대상 아님(data-no-badge) */
.lane__link:hover {
  opacity: 0.85;
}

.lane__avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--lane-color);
  background: var(--color-bg) center / cover no-repeat;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.lane__meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0; /* 자식 ellipsis 허용 */
}
.lane__name-line {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  min-width: 0;
}
.lane__name-ko {
  flex: none;
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;
}
.lane__name-orig {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lane__handle {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lane__empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* Footer */
#foot {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  z-index: 50;   /* (v4.2.0) 모바일 페이지 도트 띠(25) · 플레이어 버튼(40) 위 — 디스클레이머 팝업이 항상 맨 위에 뜬다. 트윗 시트(900)보다는 아래 */
}

/* 풀블리드 배경은 유지하되 내용은 보드와 같은 폭/여백에 정렬 */
.foot__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 0.75rem var(--page-pad);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

#foot-updated {
  flex: 0 0 auto;
  white-space: nowrap;
}

#foot-status {
  color: var(--color-live);
  font-weight: 600;
}

#foot-status[hidden] {
  display: none;
}

/* (v4.8.4) 하단 버전 버튼 — 오른쪽 끝 고정, 알약형 28px. 누르면 · 올리면 현재 버전 말풍선.
   동작은 js/main.js initVersionButton. 시안 v484canvas/project/Footer.dc.html
   푸터 높이(45px — 모바일 레이아웃 --m-foot 이 이 값을 전제)를 바꾸지 않게 위아래 음수 여백으로 글줄 높이(약 20px)만 차지한다(검증 중 53px 로 커진 것을 고침). */
.foot-ver-wrap { position: relative; flex: none; display: inline-flex; margin-block: -4px; }
.foot-ver {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 4px; box-sizing: border-box;
  height: 28px; padding: 0 11px; border: 1px solid var(--color-border); border-radius: 999px;
  background: var(--color-hover); color: var(--color-text); font-size: 0.75rem; font-weight: 600; line-height: 1;
  white-space: nowrap; cursor: pointer;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation;
  transition: border-color 0.15s, background 0.15s;
}
.foot-ver:hover { border-color: var(--mp-accent); background: var(--color-raised); }
.foot-ver:focus-visible { outline: 2px solid var(--mp-accent); outline-offset: 2px; }
.foot-ver__inf { font-size: 15px; line-height: 1; }
/* 아래 막대 — 누르고 있는 동안 차오른다(--hold = 시간). 다 차면 옅게 사라진다 */
.foot-ver__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--mp-accent); transform: scaleX(0); transform-origin: left; }
.foot-ver.is-hold .foot-ver__bar { transform: scaleX(1); transition: transform var(--hold, 2s) linear; }
.foot-ver.is-done .foot-ver__bar { transform: scaleX(1); opacity: 0; transition: opacity 0.3s; }
/* 말풍선 — 버튼 위, 오른쪽 정렬, 아래로 꼬리. [hidden] 이면 숨김 */
.foot-ver__pop {
  position: absolute; right: 0; bottom: calc(100% + 12px); z-index: 5; display: flex; flex-direction: column; white-space: nowrap;
  padding: 9px 14px 10px; border-radius: 10px; background: var(--color-raised); border: 1px solid var(--color-raised-edge);
  box-shadow: 0 8px 24px var(--shadow-pop); animation: foot-ver-in 0.26s cubic-bezier(0.25, 1.5, 0.45, 1);
}
.foot-ver__pop[hidden] { display: none; }
.foot-ver__pop::after {
  content: ""; position: absolute; right: 26px; top: 100%; border: 7px solid transparent; border-top-color: var(--color-raised-edge); border-bottom: 0;
}
.foot-ver__lab { font-size: 0.7rem; color: var(--color-text-muted); }
.foot-ver__row { margin-top: 2px; display: flex; align-items: baseline; gap: 8px; }
.foot-ver__v { font-size: 1rem; color: var(--color-text); }
.foot-ver__date { font-family: ui-monospace, Consolas, monospace; font-size: 0.75rem; color: var(--color-text); }
@keyframes foot-ver-in { from { opacity: 0; transform: translateY(6px) scale(0.96); } }
@media (prefers-reduced-motion: reduce) {
  .foot-ver, .foot-ver.is-hold .foot-ver__bar, .foot-ver.is-done .foot-ver__bar { transition: none; }
  .foot-ver__pop { animation: none; }
}

/* 하단 디스클레이머 — 5건(비공식 팬메이드 명시 포함)을 이어붙여 끊김 없이 천천히
   흘리는 연속 marquee. 호버/포커스(클릭) 시 전체 목록이 펼쳐진다. */
.fdisc {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5em;
  outline: none;
  cursor: default;
}
.fdisc__cur {
  overflow: hidden;
  display: block;
  opacity: 0.75;
  min-width: 30px;
  flex: 1 1 auto;
  transition: opacity 0.15s;
}
.fdisc__cur:empty { display: none; }
.fdisc__cur-in {
  display: inline-flex;
  white-space: nowrap;
}
/* 안 넘칠 땐 그냥 한 줄 — 넘칠 때만(.is-marquee) 세그먼트 2개를 이어붙여 무한 스크롤 */
.fdisc__cur.is-marquee .fdisc__cur-in { animation: fdisc-mq var(--dur, 14s) linear infinite; }
.fdisc__cur.is-marquee .fdisc__cur-in .seg { padding-right: 3rem; }
.fdisc:hover .fdisc__cur.is-marquee .fdisc__cur-in,
.fdisc:focus .fdisc__cur.is-marquee .fdisc__cur-in,
.fdisc:focus-within .fdisc__cur.is-marquee .fdisc__cur-in { animation-play-state: paused; }
@keyframes fdisc-mq { to { transform: translateX(-50%); } }
.fdisc__list {
  position: absolute;
  /* 업데이트 시각 오른쪽 끝 ~ 버전(♾️) 왼쪽 끝 폭에 정확히 맞춤 — JS(main.js
     positionDisclaimerPopup)가 매번 --fdisc-list-left/--fdisc-list-width 갱신 */
  left: var(--fdisc-list-left, 0);
  width: var(--fdisc-list-width, max-content);
  bottom: 100%;
  margin: 0 0 0.6rem;
  padding: 0.65rem 0.85rem;
  list-style: none;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-sizing: border-box;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 30;
}
.fdisc__list li {
  padding: 0.3rem 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--color-text);
}
.fdisc__list a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }   /* 링크임을 알린다 */
.fdisc__list li + li { border-top: 1px solid var(--color-border); }
/* (v4.5.7) 마우스 호버는 2초 유지돼야 열린다(main.js initDisclaimerHover 가 .is-open 을 붙인다). 포커스(클릭 · 키보드 · 터치 탭)는 바로 열린다. */
.fdisc.is-open .fdisc__list,
.fdisc:focus .fdisc__list,
.fdisc:focus-within .fdisc__list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.fdisc.is-open .fdisc__cur,
.fdisc:focus .fdisc__cur,
.fdisc:focus-within .fdisc__cur {
  opacity: 0.25;   /* 펼쳐지면 순환 문구는 흐리게 — 시선이 목록 쪽으로 */
}

@media (max-width: 767px) {
  /* 순환 문구는 그대로 쓴다(마퀴가 이미 2줄 안 꺾이게 보장) — 좁은 화면에서는
     최소폭만 살짝 줄임. 트리거가 좁아 자기 위치 기준 앵커로는 화면 밖으로
     튀어나가기 쉬워 — 화면 중앙 고정폭으로 띄운다(트리거 위치 무관). */
  .fdisc__cur { min-width: 20px; }
  .fdisc__list {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: calc(var(--m-foot) + 8px);
    margin: 0;
    transform: translateX(-50%) translateY(4px);
    width: calc(100vw - 2rem);
    max-width: calc(100vw - 2rem);
  }
  .fdisc:hover .fdisc__list,
  .fdisc:focus .fdisc__list,
  .fdisc:focus-within .fdisc__list {
    transform: translateX(-50%) translateY(0);
  }
}

#pager-dots[hidden] { display: none; }

/* Responsive: 폰(<768px)만 캐러셀. 태블릿/데스크톱(≥768px)은 5열 그리드 그대로. */
@media (max-width: 767px) {
  :root {
    --m-pad: 1rem;     /* 화면 가장자리 패딩 (PC 최소 패딩과 동일) */
    --m-peek: 26px;    /* 스냅된 상태에서 옆 유닛이 보이는 폭 */
    --m-foot: 45px;    /* 하단 고정 푸터 높이 */
    --m-dots: 44px;    /* 페이지 인디케이터 띠 — 콘텐츠 하단과 푸터 사이 여백 */
    --m-notice: calc(3.4rem - 3.6px); /* 접힌 소식 막대(위 여백 1rem + 막대 2.2rem + 테두리)가 차지하는 높이. 실측 3.6px 작게 잡아 레인 아래 끝이 도트 띠 위에 딱 닿고, 도트가 레인 끝과 푸터 사이 정중앙에 온다(v4.1.0) */
  }

  #board {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: start;
    grid-template-columns: none;
    max-width: none;
    margin: 0;
    min-height: 0;
    gap: var(--gap);
    /* 좌우 패딩(가장자리 여백). 하단은 .lane 높이로 제어(도트 띠 + 푸터 공간 확보) */
    padding: var(--gap) calc(var(--m-pad) + var(--m-peek)) 0;
    scroll-padding-inline: calc(var(--m-pad) + var(--m-peek));
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-behavior: auto;                            /* 무한회전 순간이동이 애니메이션 안 되게 */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #board::-webkit-scrollbar { display: none; }

  .lane {
    flex: 0 0 calc(100vw - 2 * var(--m-pad) - 2 * var(--m-peek));
    scroll-snap-align: start;
    scroll-snap-stop: always;                         /* 한 번에 한 유닛씩만 (통과 방지) */
    /* 접힌 소식 막대(--m-notice)가 위를 차지하므로 그만큼 빼야 도트 띠를 안 침범 */
    height: calc(100dvh - var(--m-notice) - var(--gap) - var(--m-dots) - var(--m-foot));
    overflow-y: auto;
  }
  .lane__header { position: sticky; top: 0; }


  /* 페이지 인디케이터 — 콘텐츠 하단과 푸터 사이 띠의 세로 중앙에 배치 */
  #pager-dots {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--m-foot);        /* 푸터 바로 위 */
    height: var(--m-dots);        /* 콘텐츠 하단 ~ 푸터 상단 사이 공간 */
    display: flex;
    justify-content: center;
    align-items: center;          /* 그 공간의 정중앙 */
    gap: 10px;
    z-index: 25;
  }
  #pager-dots .dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--lane-color, var(--color-border));  /* sampleLaneColor 가 채움 */
    opacity: 0.4;                                        /* 비활성은 흐리게 */
    transition: opacity 0.18s, transform 0.18s;
  }
  #pager-dots .dot--on {
    opacity: 1;
    transform: scale(1.9);                               /* 현재 위치 강조 */
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--lane-color, #fff) 35%, transparent);
  }
}

/* 이스터에그: 풋터 버전 표시 클릭 시 풍선처럼 떠오르며 사라지는 멤버 아이콘 */
.balloon-icon {
  position: fixed;
  width: 40px;
  height: 40px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.95;
  animation: balloon-rise 1.1s ease-out forwards;
}
@keyframes balloon-rise {
  0%   { transform: translate(-50%, -50%) scale(0.7); opacity: 0.95; }
  100% { transform: translate(-50%, -180px) scale(1.15); opacity: 0; }
}