/* app.tail.css — build-css.mjs 가 자동으로 만든 파일입니다. 직접 고치지 마세요.
   원본: stats-calendar.css, vod-members.css, header-guide.css, activity-density.css, mobile.css, recap.css, poster-members.css, hall-of-fame.css, member-finder.css, vod-archive.css, calendar-fill.css, home-recent.css, home-sections.css, home-hero.css, v23-header.css, home-members.css, group-views.css, vod-clean.css, typography.css, vod-calendar.css, recap-luxe.css
   고칠 때는 위 원본 파일을 고치고 node build-css.mjs 를 다시 돌리세요. */

/* ===== stats-calendar.css ===== */
/* [v2500] stats-calendar.css — 통계 › 멤버별 상세 › 방송 달력
   ===================================================================
   달력 칸을 "그날 카드" 로 키웁니다: 제목 + 평균 시청자 + 최고 시청자 +
   방송시간. 칸에 마우스를 올리면 그날 다시보기(썸네일·제목·시간)를
   띄웁니다.

   왜 별도 파일인가
     activity-events.css 는 통계 전반을 담당하는 큰 파일이고,
     v24-unify.css 가 #page-stats .ct-* 를 !important 로 덮어씁니다.
     그래서 이 파일은 v24-unify.css 뒤에 실리고, 이기려는 규칙만
     #page-stats 로 한 단계 더 좁혀 씁니다.

   색은 --ct-* 토큰을 그대로 씁니다. 라이트/다크 전환이 자동으로 따라옵니다.
   =================================================================== */

/* ── 달력을 한 줄 전체로 ──────────────────────────────────────────
   칸 안에 숫자 3개를 넣으려면 폭이 필요합니다. 시작 시간 분포 패널은
   달력 아래로 내려갑니다. */
#page-stats .ct-detail-grid{grid-template-columns:minmax(0,1fr)}

/* ── 하루 칸 ─────────────────────────────────────────────────────── */

#page-stats .ct-cal-day,
#page-stats .ct-cal-empty{min-height:118px}

#page-stats .ct-cal-day{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:9px 10px 10px;
  border-radius:11px;
  overflow:hidden;
}

#page-stats .ct-cal-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
}
#page-stats .ct-cal-day>.ct-cal-top>b{
  font-size:13px;
  font-weight:900;
  line-height:1;
}
/* 하루에 방송이 여러 번이면 개수를 배지로 답니다. */
#page-stats .ct-cal-count{
  font-style:normal;
  min-width:17px;
  height:17px;
  padding:0 5px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:900;
  color:#fff;
  background:#43c6a3;
}
#page-stats .ct-cal-none{
  margin-top:auto;
  font-size:11px;
  color:var(--ct-muted);
  opacity:.65;
}
#page-stats .ct-cal-title{
  font-size:11px;
  font-weight:700;
  line-height:1.35;
  color:var(--ct-ink);
  opacity:.85;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  word-break:break-all;
}

/* 그날 요약 숫자 3줄 */
#page-stats .ct-cal-stats{
  margin-top:auto;
  display:grid;
  gap:3px;
}
#page-stats .ct-cal-stats em{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:6px;
  font-style:normal;
}
#page-stats .ct-cal-stats s{
  text-decoration:none;
  font-size:9.5px;
  font-weight:700;
  color:var(--ct-muted);
  white-space:nowrap;
}
#page-stats .ct-cal-dur u i{display:none}
#page-stats .ct-cal-stats u{
  text-decoration:none;
  font-size:11.5px;
  font-weight:900;
  color:var(--ct-ink);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* 좁아지면 라벨을 줄여서 숫자를 살립니다. */
@media (max-width:1180px){
  #page-stats .ct-cal-stats s{font-size:9px}
  #page-stats .ct-cal-stats u{font-size:11px}
  #page-stats .ct-cal-title{-webkit-line-clamp:1}
}

/* ── 마우스오버 미리보기 ─────────────────────────────────────────── */

/* body 에 붙기 때문에 #page-stats 안의 --ct-* 가 닿지 않습니다.
   추이 모달(.ct-trend-backdrop)이 쓰는 방식 그대로 토큰을 직접 깝니다. */
.ct-calpop{
  --ct-line:var(--v23-line, #dfe5ec);
  --ct-soft:var(--v23-surface-2, #f3f6fa);
  --ct-panel:var(--v23-surface, #fff);
  --ct-ink:var(--v23-text, #16202f);
  --ct-muted:var(--v23-muted, #7a8697);
  --ct-accent:var(--v23-accent, #e85c84);
}
html[data-theme="dark"] .ct-calpop{
  --ct-line:var(--ja-line, #263242);
  --ct-soft:var(--ja-surface-2, #131b27);
  --ct-panel:var(--ja-surface, #0f1520);
  --ct-ink:var(--ja-text, #f4f6f9);
  --ct-muted:var(--ja-muted, #8d98a8);
  --ct-accent:var(--ja-accent, #ff4f7d);
}

.ct-calpop{
  position:fixed;
  z-index:1400;
  width:396px;
  max-width:calc(100vw - 16px);
  padding:12px;
  max-height:calc(100vh - 16px);
  overflow:auto;
  border:1px solid var(--ct-line, #dfe5ec);
  border-radius:14px;
  background:var(--ct-panel, #fff);
  box-shadow:0 18px 44px rgba(11,18,32,.22);
  font-family:inherit;
  pointer-events:auto;
}
.ct-calpop[hidden]{display:none}

.ct-calpop-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  padding-bottom:9px;
  margin-bottom:9px;
  border-bottom:1px solid var(--ct-line, #dfe5ec);
}
.ct-calpop-head b{font-size:13px;font-weight:900;color:var(--ct-ink, #16202f)}
.ct-calpop-head span{font-size:11px;font-weight:700;color:var(--ct-muted, #7a8697)}

.ct-calpop ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-height:min(430px,60vh);overflow:auto}
.ct-calpop-item{
  display:grid;
  grid-template-columns:148px minmax(0,1fr);
  gap:12px;
  padding:8px;
  align-items:start;
  border-radius:10px;
  color:inherit;
  text-decoration:none;
}
.ct-calpop-item:hover{background:var(--ct-soft, #f3f6fa)}
.ct-calpop-thumb{
  position:relative;
  aspect-ratio:16/9;
  border-radius:8px;
  overflow:hidden;
  background:var(--ct-soft, #eef2f7);
  display:grid;
}
/* 라벨과 썸네일을 같은 칸에 겹칩니다. 자동 배치로 두면 위아래로 나뉘어
   이미지가 반토막 납니다. 썸네일이 살아 있으면 라벨을 덮습니다. */
.ct-calpop-thumb>*{grid-area:1/1}
.ct-calpop-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ct-calpop-thumb b{
  align-self:center;
  justify-self:center;
  font-size:11px;
  font-weight:900;
  color:var(--ct-muted, #7a8697);
  padding:0 6px;
  text-align:center;
  line-height:1.3;
  word-break:break-all;
}
.ct-calpop-body{display:grid;gap:3px;align-content:start;min-width:0}
.ct-calpop-body{gap:5px}
.ct-calpop-body>b{
  font-size:13.5px;
  font-weight:800;
  line-height:1.35;
  color:var(--ct-ink, #16202f);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  word-break:break-all;
}
.ct-calpop-body em{
  font-style:normal;
  font-size:11.5px;
  font-weight:700;
  color:var(--ct-muted, #7a8697);
  font-variant-numeric:tabular-nums;
}
.ct-calpop-nums{color:var(--ct-accent, #e85c84) !important}
.ct-calpop-note{
  margin:9px 0 0;
  padding-top:8px;
  border-top:1px solid var(--ct-line, #dfe5ec);
  font-size:10.5px;
  color:var(--ct-muted, #7a8697);
}

/* ── 모바일 ─────────────────────────────────────────────────────────
   손가락에는 hover 가 없습니다. 칸을 누르면 아래 "일별 활동" 패널이
   그날 기록을 그대로 보여주므로, 여기서는 칸만 읽기 좋게 줄입니다. */
@media (max-width:760px){
  #page-stats .ct-cal-day,
  #page-stats .ct-cal-empty{min-height:70px}
  #page-stats .ct-cal-day{padding:6px 6px 7px;gap:4px}
  #page-stats .ct-cal-title{display:none}
  #page-stats .ct-cal-stats s{display:none}
  #page-stats .ct-cal-stats em{justify-content:flex-start}
  #page-stats .ct-cal-stats u{font-size:10px}
  /* 세 칸을 다 넣기엔 좁습니다. 평균은 빼고 최고 시청자 + 방송시간만.
     방송시간은 "13시간 40분" 대신 "13h40" 짧은 표기로 바꿉니다. */
  #page-stats .ct-cal-stats em:first-child{display:none}
  #page-stats .ct-cal-dur u b{display:none}
  #page-stats .ct-cal-dur u i{display:inline;font-style:normal;color:var(--ct-muted)}
  .ct-calpop{display:none !important}
}

/* ── v27 · 구독 플러스(구플) 방송 표시 ───────────────────────────────
   수집기가 isSubscriptionPlus/accessType 을 저장하고, 과거 modeStart/modeEnd의
   subscriber 플래그도 읽습니다. 달력/상세 기록에서는 같은 작은 배지로 통일합니다. */
#page-stats .ct-cal-top-badges{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
  min-width:0;
}
#page-stats .ct-subplus-badge,
.ct-calpop .ct-subplus-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  height:18px;
  padding:0 6px;
  border:1px solid rgba(180,83,9,.30);
  border-radius:999px;
  background:rgba(180,83,9,.10);
  color:#b45309;
  font-size:9px;
  font-style:normal;
  font-weight:950;
  line-height:1;
  letter-spacing:-.02em;
  text-decoration:none;
}
#page-stats .ct-cal-day.has-subplus{
  box-shadow:inset 3px 0 0 #43c6a3,inset 0 3px 0 rgba(180,83,9,.42);
}
#page-stats .ct-subplus-metric{
  min-width:0;
  border-left:1px solid var(--ct-line);
  background:transparent;
  padding:10px 12px;
  text-align:left;
}
#page-stats .ct-subplus-metric>span{
  display:block;
  font-size:12px;
  color:var(--ct-muted);
}
#page-stats .ct-subplus-metric>strong{
  display:block;
  margin-top:3px;
  color:var(--ct-ink);
  font-size:15px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
#page-stats .ct-subplus-metric>small{
  display:block;
  margin-top:2px;
  color:#b45309;
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
}
#page-stats .ct-day-record>span .ct-subplus-badge{
  margin-right:5px;
  vertical-align:1px;
}
.ct-calpop-title{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}
.ct-calpop-title>b{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--ct-ink, #16202f);
  font-size:12px;
  font-weight:850;
}
html[data-theme="dark"] #page-stats .ct-subplus-badge,
html[data-theme="dark"] .ct-calpop .ct-subplus-badge{
  border-color:rgba(251,191,36,.30);
  background:rgba(251,191,36,.09);
  color:#fbbf24;
}
html[data-theme="dark"] #page-stats .ct-subplus-metric>small{color:#fbbf24}
html[data-theme="dark"] #page-stats .ct-cal-day.has-subplus{
  box-shadow:inset 3px 0 0 #43c6a3,inset 0 3px 0 rgba(251,191,36,.35);
}
@media(max-width:820px){
  #page-stats .ct-subplus-metric{padding:9px 10px}
  #page-stats .ct-subplus-metric>strong{font-size:14px}
}
@media(max-width:560px){
  #page-stats .ct-cal-top .ct-subplus-badge{height:16px;padding:0 4px;font-size:8px}
}

/* ===== vod-members.css ===== */
/* [v2500] vod-members.css — 다시보기 페이지 멤버 줄
   ===================================================================
   다시보기가 진호 전용에서 도감 멤버 전체로 넓어지면서 생긴 줄입니다.
   버튼 뼈대는 기존 .vod-chip-row button 을 그대로 물려받고,
   여기서는 아바타와 개수 배지만 얹습니다.
   =================================================================== */

.vod-member-row{
  gap:7px;
  padding-bottom:2px;
}
.vod-member-row[hidden]{display:none}

#page-vod .vod-member-row button{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding-left:5px;
}
#page-vod .vod-member-row button img{
  width:24px;
  height:24px;
  border-radius:50%;
  object-fit:cover;
  display:block;
  flex:none;
}
#page-vod .vod-member-row button i{
  font-style:normal;
  font-size:10.5px;
  font-weight:800;
  line-height:1;
  padding:3px 6px;
  border-radius:999px;
  background:rgba(127,140,160,.18);
  font-variant-numeric:tabular-nums;
}
#page-vod .vod-member-row button.active i{
  background:rgba(255,255,255,.24);
}

/* 전체 보기일 때 카드에 붙는 멤버 이름 배지 */
#page-vod .vod-card-member{
  font-weight:800;
}

/* ===== header-guide.css ===== */
/* [v2511] header-guide.css — 상단 오른쪽 끝 "사용 가이드" 버튼
   ===================================================================
   주소는 관리자 › 프로필 편집의 "가이드 주소" 칸에서 넣습니다.
   비어 있으면 버튼이 숨겨집니다 — 다만 관리자로 로그인한 동안에는
   "주소 설정" 상태로 남겨 두어, 어디서 넣는지 찾을 수 있게 합니다.

   생김새는 참고 사이트처럼 "채워진 알약"입니다. 헤더의 나머지 버튼은
   전부 테두리형이라, 이 하나만 채워 두면 안내 버튼이라는 게 바로 읽힙니다.
   =================================================================== */

/* 헤더는 flex + order 로 자리를 잡습니다
   (app.bundle.css: cloud-status 1, themeToggle 2, live-cluster 3).
   DOM 에서 마지막이어도 order 를 안 주면 0 으로 잡혀 SOOP 옆으로 끌려갑니다.
   맨 오른쪽에 세우려고 제일 큰 값을 줍니다. */
.v23-guide-pill{
  order:9;
  height:36px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:0 15px 0 12px;
  border:1px solid transparent;
  border-radius:999px;
  background:var(--v23-accent, #e85c84);
  color:#fff;
  text-decoration:none;
  font-size:12px;
  font-weight:800;
  letter-spacing:-.01em;
  white-space:nowrap;
  cursor:pointer;
  transition:.16s ease;
}
.v23-guide-pill[hidden]{display:none}
.v23-guide-pill:hover{filter:brightness(1.08)}
.v23-guide-pill:active{transform:translateY(1px)}

.v23-guide-pill i{
  display:grid;
  place-items:center;
  width:16px;
  height:16px;
  flex:none;
}
.v23-guide-pill svg{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

html[data-theme="dark"] .v23-guide-pill{
  background:var(--ja-accent, #ff4f7d);
  color:#fff;
}

/* 주소를 아직 안 넣은 상태 — 관리자에게만 보입니다.
   눌러도 새 탭이 아니라 프로필 편집 창이 열립니다. */
.v23-guide-pill.is-unset{
  background:transparent;
  border-color:var(--v23-line, #e6e1e4);
  color:var(--v23-muted, #8a7d85);
  font-weight:700;
}
html[data-theme="dark"] .v23-guide-pill.is-unset{
  background:transparent;
  border-color:var(--ja-line, #263242);
  color:var(--ja-muted, #8d98a8);
}
.v23-guide-pill.is-unset:hover{filter:none;border-color:var(--v23-accent, #e85c84)}

/* 홈 히어로 위에 헤더가 투명하게 얹히는 구간에서도 그대로 눈에 띄게 둡니다.
   (다른 버튼들은 이때 흰 테두리형으로 바뀌지만, 이 버튼은 채움을 유지합니다.) */
body.home-v23-page.home-v23-at-top .v23-guide-pill{
  box-shadow:0 2px 12px rgba(0,0,0,.24);
}
body.home-v23-page.home-v23-at-top .v23-guide-pill.is-unset{
  border-color:rgba(255,255,255,.34);
  color:#fff;
  box-shadow:none;
}

/* 1101~1240px 구간은 내비게이션이 그대로인 채 폭만 좁아지는 자리입니다.
   원래 SOOP 알약이 여기서 숨겨지므로, 가이드도 아이콘만 남겨 자리를 냅니다.
   1100px 아래로 내려가면 내비게이션이 접혀서 자리가 나니 글자를 되살립니다. */
@media (max-width:1240px) and (min-width:1101px){
  .v23-guide-pill{padding:0 10px;gap:0}
  .v23-guide-pill span{display:none}
}
@media (max-width:1100px){
  .v23-guide-pill{height:32px;padding:0 12px 0 10px;font-size:11.5px}
}
/* 아주 좁은 화면에서는 아이콘만. 헤더에 제목·토글까지 들어가 있습니다. */
@media (max-width:520px){
  .v23-guide-pill{padding:0 9px;gap:0}
  .v23-guide-pill span{display:none}
}

/* ===== activity-density.css ===== */
/* [v2520] activity-density.css — 최근 활동 "촘촘히" 보기
   ===================================================================
   한 줄이 76px 이상이라 화면에 6~7건밖에 안 들어가던 걸 줄입니다.
   글자 크기는 거의 그대로 두고, 낭비되던 여백만 걷어냅니다.

   되돌리기
     이 파일의 규칙은 전부 body.activity-dense 안에서만 적용됩니다.
     피드 툴바의 "촘촘히 / 넓게" 버튼으로 즉시 껐다 켤 수 있고,
     선택은 브라우저에 기억됩니다. 아예 없애려면 index.html 의
     이 파일 <link> 한 줄과 버튼 하나만 지우면 원래대로 돌아갑니다.

   v24-unify.css 가 #page-activity .* 를 !important 로 잡고 있어서,
   이기려면 같은 자리에 body 를 하나 더 얹어 특정도를 올려야 합니다.
   =================================================================== */

/* ── 줄 자체 ──────────────────────────────────────────────────────
   17px 이던 위아래 여백이 가장 큰 낭비였습니다. */
body.activity-dense #page-activity .activity-feed .activity-card{
  grid-template-columns:26px 34px minmax(0,1fr) auto !important;
  gap:10px !important;
  min-height:0 !important;
  padding:7px 4px !important;
}
body.activity-dense #page-activity .activity-feed .activity-type-icon{
  width:24px !important;
  height:24px !important;
  margin:2px 0 0 2px !important;
  border-radius:7px !important;
  box-shadow:0 0 0 4px #0f1520 !important;
}
body.activity-dense #page-activity .activity-feed .activity-type-icon svg{
  width:14px !important;
  height:14px !important;
}
body.activity-dense #page-activity .activity-feed .activity-avatar{
  width:32px !important;
  height:32px !important;
}
body.activity-dense #page-activity .activity-feed .activity-card.is-unread::before{
  top:8px !important;
  bottom:8px !important;
}
body.activity-dense #page-activity .activity-feed .activity-card-copy{
  padding-right:6px !important;
}

/* ── 이름 줄 ─────────────────────────────────────────────────────── */
body.activity-dense #page-activity .activity-card-topline{
  gap:9px !important;
}
body.activity-dense #page-activity .activity-card-identity{
  gap:6px !important;
}
body.activity-dense #page-activity .activity-member-name{
  font-size:13.5px !important;
  line-height:1.25 !important;
}
body.activity-dense #page-activity .activity-kind{
  min-height:18px !important;
  padding:0 6px !important;
  font-size:9.5px !important;
}
body.activity-dense #page-activity .activity-new-badge{
  padding:1px 5px !important;
  font-size:8.5px !important;
}
body.activity-dense #page-activity .activity-card-topline>time{
  font-size:10.5px !important;
}

/* ── 본문 한 줄 (방송 시작·제목 변경 등) ──────────────────────────── */
body.activity-dense #page-activity .activity-card-bottomline{
  margin-top:3px !important;
}
body.activity-dense #page-activity .activity-card-summary{
  font-size:12px !important;
  line-height:1.4 !important;
}

/* ── 채팅 묶음 — 여기가 제일 길었습니다 ───────────────────────────── */
body.activity-dense #page-activity .activity-chat-section{
  gap:2px !important;
  margin-top:2px !important;
}
body.activity-dense #page-activity .activity-chat-host{
  font-size:10px !important;
  line-height:1.2 !important;
}
body.activity-dense #page-activity .activity-chat-stack{
  gap:1px !important;
  padding:0 !important;
}
/* 시각 칸을 고정폭으로 두면 "오후 03:11" 이 칸을 넘어 메시지와 겹칩니다.
   내용 폭에 맞추고, 사이 간격만 고정합니다. */
body.activity-dense #page-activity .activity-chat-line{
  grid-template-columns:max-content minmax(0,1fr) !important;
  gap:9px !important;
}
body.activity-dense #page-activity .activity-chat-line time{
  font-size:10.5px !important;
  line-height:1.38 !important;
}
body.activity-dense #page-activity .activity-chat-line span{
  font-size:12.5px !important;
  line-height:1.38 !important;
}

/* ── 위쪽 도구 줄도 조금 낮춥니다 ─────────────────────────────────── */
body.activity-dense #page-activity .activity-feed-toolbar{
  padding:9px 12px !important;
}
body.activity-dense #page-activity .activity-feed-toolbar button{
  padding:6px 9px !important;
  font-size:12px !important;
}

/* 지금 어떤 상태인지 버튼에 보이게 */
#activityDensity{font-variant-numeric:tabular-nums}
body.activity-dense #activityDensity{
  border-color:var(--v23-accent, #e85c84) !important;
  color:var(--v23-accent, #e85c84) !important;
}
html[data-theme="dark"] body.activity-dense #activityDensity{
  border-color:var(--ja-accent, #ff4f7d) !important;
  color:var(--ja-accent, #ff4f7d) !important;
}

/* ── 모바일 ───────────────────────────────────────────────────────
   손가락으로 눌러야 하니 아바타는 너무 줄이지 않습니다. */
@media (max-width:760px){
  body.activity-dense #page-activity .activity-feed .activity-card{
    grid-template-columns:22px 30px minmax(0,1fr) auto !important;
    gap:8px !important;
    padding:8px 2px !important;
  }
  body.activity-dense #page-activity .activity-feed .activity-avatar{width:29px !important;height:29px !important}
  body.activity-dense #page-activity .activity-feed .activity-type-icon{width:21px !important;height:21px !important}
  body.activity-dense #page-activity .activity-chat-line{grid-template-columns:max-content minmax(0,1fr) !important;gap:7px !important}
  body.activity-dense #page-activity .activity-chat-line span{font-size:12px !important}
}

/* ===== mobile.css ===== */
/* [v25] mobile.css — 모바일 전용 레이어
 * ===================================================================
 * 규칙
 *   1. 브레이크포인트는 둘뿐입니다.  ≤560px 폰 / ≤900px 태블릿
 *      (기존에는 560·620·640·680·700·720·760·768 여덟 종류가 섞여 있었습니다)
 *   2. 색은 항상 토큰으로. 하드코딩 hex 를 새로 넣지 않습니다.
 *   3. 모바일 관련 규칙은 전부 이 파일에만 씁니다.
 *      app.bundle.css 의 모바일 블록은 순차적으로 이쪽으로 옮깁니다.
 *   4. index.html 의 마지막 <link> 라서, 여기 쓴 것이 이깁니다.
 *      !important 는 옛 규칙을 이겨야 할 때만 쓰고 주석을 답니다.
 */

:root{
  --mnav-h:58px;
  --mnav-safe:env(safe-area-inset-bottom,0px);
}

/* ===================================================================
   1. 하단 내비게이션
   =================================================================== */

.mnav{display:none}

@media (max-width:900px){
  .mnav{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:1400;
    height:calc(var(--mnav-h) + var(--mnav-safe));
    padding-bottom:var(--mnav-safe);
    background:color-mix(in srgb, var(--v23-surface, #0f1520) 92%, transparent);
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
    border-top:1px solid var(--v23-line, #263242);
  }

  .mnav-tab{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-width:0;
    padding:0;
    border:0;
    background:none;
    cursor:pointer;
    color:var(--v23-soft, #667284);
    font-family:inherit;
    -webkit-tap-highlight-color:transparent;
    transition:color .18s ease;
  }
  .mnav-tab b{
    font-size:10px;
    font-weight:700;
    letter-spacing:-.02em;
    line-height:1;
    white-space:nowrap;
  }
  .mnav-ico{display:block;width:22px;height:22px}
  .mnav-ico svg{
    width:100%;height:100%;
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .mnav-more .mnav-ico svg{stroke:none;fill:currentColor}

  /* 활성 탭 — 알약 배경 대신 아이콘 색 + 상단 2px 표시선 */
  .mnav-tab.is-active{color:var(--v23-accent, #ff4f7d)}
  .mnav-tab.is-active::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:26px;height:2px;
    border-radius:0 0 2px 2px;
    background:var(--v23-accent, #ff4f7d);
  }
  .mnav-tab:active{color:var(--v23-text, #f4f6f9)}

  /* 라이브 중일 때 켜지는 점 */
  .mnav-dot{
    position:absolute;
    top:9px;
    left:calc(50% + 8px);
    width:6px;height:6px;
    border-radius:50%;
    background:var(--v23-accent, #ff4f7d);
    box-shadow:0 0 0 2px color-mix(in srgb, var(--v23-surface, #0f1520) 85%, transparent);
    animation:mnav-pulse 1.8s ease-in-out infinite;
  }
  @keyframes mnav-pulse{0%,100%{opacity:1}50%{opacity:.35}}

  /* 하단바에 콘텐츠가 가리지 않도록 */
  .app-shell,
  .app-main,
  .app-content{padding-bottom:calc(var(--mnav-h) + var(--mnav-safe) + 20px)}
}

@media (prefers-reduced-motion:reduce){
  .mnav-dot{animation:none}
}

/* ===================================================================
   2. 「더보기」 시트
   =================================================================== */

.mnav-sheet{
  position:fixed;
  inset:0;
  z-index:1500;
  display:flex;
  align-items:flex-end;
}
.mnav-sheet[hidden]{display:none}

.mnav-sheet-scrim{
  position:absolute;
  inset:0;
  border:0;
  padding:0;
  background:rgba(4,6,10,.62);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  opacity:0;
  transition:opacity .22s ease;
  cursor:pointer;
}
.mnav-sheet.is-open .mnav-sheet-scrim{opacity:1}

.mnav-sheet-panel{
  position:relative;
  width:100%;
  max-height:82vh;
  overflow-y:auto;
  padding:8px 18px calc(22px + env(safe-area-inset-bottom,0px));
  border-radius:20px 20px 0 0;
  background:var(--v23-surface, #0f1520);
  border-top:1px solid var(--v23-line, #263242);
  box-shadow:0 -18px 44px rgba(0,0,0,.5);
  transform:translateY(100%);
  transition:transform .26s cubic-bezier(.16,1,.3,1);
}
.mnav-sheet.is-open .mnav-sheet-panel{transform:translateY(0)}

.mnav-sheet-grip{
  width:38px;height:4px;
  margin:6px auto 14px;
  border-radius:99px;
  background:var(--v23-line-strong, #334154);
}

.mnav-sheet-panel header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}
.mnav-sheet-panel header span{
  display:block;
  font-size:9px;
  font-weight:800;
  letter-spacing:.2em;
  color:var(--v23-accent, #ff4f7d);
  margin-bottom:6px;
}
.mnav-sheet-panel header strong{
  font-size:19px;
  font-weight:800;
  letter-spacing:-.04em;
  color:var(--v23-text, #f4f6f9);
}
.mnav-sheet-x{
  flex:none;
  width:32px;height:32px;
  display:grid;place-items:center;
  border:1px solid var(--v23-line, #263242);
  border-radius:9px;
  background:none;
  cursor:pointer;
  color:var(--v23-muted, #8d98a8);
}
.mnav-sheet-x svg{
  width:15px;height:15px;
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;
}

.mnav-sheet-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
}
.mnav-sheet-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:16px 6px;
  border:1px solid var(--v23-line, #263242);
  border-radius:13px;
  background:var(--v23-surface-2, #131b27);
  cursor:pointer;
  color:var(--v23-muted, #8d98a8);
  font-family:inherit;
  -webkit-tap-highlight-color:transparent;
}
.mnav-sheet-item b{
  font-size:12px;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--v23-text, #f4f6f9);
}
.mnav-sheet-item .mnav-ico{width:22px;height:22px}
.mnav-sheet-item .mnav-ico svg{
  width:100%;height:100%;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.mnav-sheet-item.is-active{
  border-color:var(--v23-accent, #ff4f7d);
  color:var(--v23-accent, #ff4f7d);
  background:color-mix(in srgb, var(--v23-accent, #ff4f7d) 12%, transparent);
}

.mnav-sheet-foot{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--v23-line, #263242);
  display:grid;
  gap:2px;
}
.mnav-sheet-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 2px;
  border:0;
  background:none;
  cursor:pointer;
  text-decoration:none;
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  color:var(--v23-muted, #8d98a8);
  -webkit-tap-highlight-color:transparent;
}
.mnav-sheet-line b{
  font-size:12.5px;
  font-weight:700;
  color:var(--v23-text, #f4f6f9);
}

body.mnav-sheet-open{overflow:hidden}

/* ===================================================================
   3. 테마 전환 버튼 — 동그라미가 아니라 텍스트 칩
   =================================================================== */

/* 기존 규칙이 `.v23-global-header #themeToggle{...!important}` 로 36×36 원형을
   강제하고 있어서, 같은 무게로 되받아야 이깁니다. ID + 클래스 + !important. */
#themeToggle.v24-theme-toggle{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:6px;
  flex:0 0 auto !important;   /* 상단바가 flex 라서 이걸 안 주면 20px 로 찌그러집니다 */
  box-sizing:border-box;
  width:auto !important;
  min-height:0 !important;
  max-height:none !important;
  min-width:0 !important;
  height:32px !important;
  padding:0 11px !important;
  border:1px solid var(--v23-line, #263242) !important;
  border-radius:9px !important;
  background:none !important;
  cursor:pointer;
  font-family:inherit;
  font-size:11.5px !important;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1;
  color:var(--v23-muted, #8d98a8) !important;
  white-space:nowrap;
  transition:color .18s ease, border-color .18s ease;
}
#themeToggle.v24-theme-toggle:hover{
  color:var(--v23-text, #f4f6f9) !important;
  border-color:var(--v23-line-strong, #334154) !important;
}

@media (max-width:560px){
  #themeToggle.v24-theme-toggle{
    height:30px !important;
    padding:0 9px !important;
    font-size:11px !important;
  }
}

/* ===================================================================
   4. 옛 모바일 크롬 잔재 차단
      마크업은 mobile-nav.js 가 걷어내지만, 혹시 남아도 안 보이게 합니다.
   =================================================================== */

.mobile-bottom-nav,
#mobileBottomNav,
.mobile-nav,
.bottom-mobile-nav,
[data-mobile-bottom-nav],
.mobile-floating-menu,
.mobile-menu-layer,
.mobile-sidebar-toggle,
.mobile-push-settings-button{
  display:none !important;   /* 옛 규칙이 !important 라서 같이 씁니다 */
}

/* ===================================================================
   5. 페이지 머리 — 모바일에서 겹치던 것 정리
   -------------------------------------------------------------------
   .v23-ui .live-hub-header::before 계열이 content:"05 / LIVE" 를
   position:absolute; top:7px 로 얹습니다. 데스크톱은 머리 위쪽 여백이
   충분해서 괜찮지만, 폰에서는 바로 아래 .eyebrow 와 그대로 겹칩니다.
   상단바에 이미 같은 문구(#pageEyebrow)가 나오므로 폰에서는 뺍니다.
   =================================================================== */

@media (max-width:900px){
  .v23-ui .live-hub-header::before,
  .v23-ui .poster-archive-header::before,
  .v23-ui .schedule-page-head::before,
  .v23-ui .up-rank-head::before,
  .v23-ui .vod-page-head::before{content:none !important}

  /* 페이지 머리를 한 가지 모양으로 통일합니다. */
  .live-hub-header,
  .poster-archive-header,
  .schedule-page-head,
  .up-rank-head,
  .vod-page-head,
  .v23-page-intro{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:12px !important;
    padding:20px 0 16px !important;
    margin:0 0 18px !important;
    border-bottom:1px solid var(--v23-line, #263242);
  }
  .live-hub-header h1, .live-hub-header h2,
  .up-rank-head h1, .up-rank-head h2,
  .vod-page-head h1, .vod-page-head h2,
  .poster-archive-header h1, .poster-archive-header h2,
  .schedule-page-head h1, .schedule-page-head h2,
  .v23-page-intro h1{
    margin:2px 0 0 !important;
    font-size:30px !important;
    line-height:1.05 !important;
    letter-spacing:-.05em !important;
    color:var(--v23-text, #f4f6f9) !important;
  }
  .live-hub-header p, .up-rank-head p, .vod-page-head p,
  .poster-archive-header p, .schedule-page-head p, .v23-page-intro p{
    margin:0 !important;
    font-size:12.5px !important;
    line-height:1.6 !important;
    color:var(--v23-muted, #8d98a8) !important;
  }
  .live-hub-header .eyebrow, .v23-page-intro>span{
    font-size:9.5px !important;
    font-weight:800 !important;
    letter-spacing:.2em !important;
    color:var(--v23-accent, #ff4f7d) !important;
  }

  /* 머리에 붙은 버튼들은 한 줄로 눕히고 크기를 줄입니다. */
  .live-hub-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  .live-hub-actions .btn{
    flex:1 1 auto;
    min-width:0;
    height:34px !important;
    padding:0 12px !important;
    font-size:12px !important;
    border-radius:9px !important;
  }
}

/* ===================================================================
   6. 라이브 카드 — 폰에서 한 화면에 두 장은 들어오게
   =================================================================== */

@media (max-width:560px){
  #liveCardGrid{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
  #liveCardGrid .live-stream-card{border-radius:12px !important}
  #liveCardGrid .live-card-body{padding:11px 12px 12px !important}
  #liveCardGrid .live-card-copy strong{font-size:13px !important}
  #liveCardGrid .live-card-copy p{
    font-size:11.5px !important;
    line-height:1.5 !important;
  }
}

/* ===================================================================
   7. 홈 히어로 — 폰에서 화면 하나를 통째로 먹지 않게
   -------------------------------------------------------------------
   기존: #page-home .home-v23-hero{height:100svh!important}
   폰에서는 제목이 화면 맨 아래에 걸리고 위쪽 2/3 가 빈 검은 화면이라,
   첫 콘텐츠(오늘의 일정)를 보려면 1.4 화면을 스크롤해야 했습니다.
   높이를 줄이고 글을 위로 올려서, 히어로 아래로 다음 섹션이 살짝
   보이게 합니다. (스크롤할 게 더 있다는 신호)
   =================================================================== */

@media (max-width:900px){
  #page-home .home-v23-hero{
    height:auto !important;
    min-height:0 !important;
    padding:0 !important;
  }
  #page-home .home-v23-hero-inner{
    min-height:58svh !important;
    padding:26px 20px 30px !important;
    justify-content:flex-end !important;
  }
  #page-home .home-v23-hero h1{
    font-size:clamp(30px,8.6vw,42px) !important;
    line-height:1.06 !important;
    max-width:none !important;
  }
  #page-home .home-v23-hero-copy{
    width:auto !important;
    max-width:none !important;
  }
  #page-home .home-v23-hero-copy>p{
    max-width:none !important;
    font-size:12px !important;
  }
  #page-home .home-v23-hero-actions{
    display:flex !important;
    flex-wrap:wrap;
    gap:8px !important;
    margin-top:16px !important;
  }
  #page-home .home-v23-hero-actions>*{
    flex:1 1 auto;
    min-width:0;
    height:42px !important;
    padding:0 16px !important;
    font-size:13px !important;
  }

  /* 데스크톱 장식 — 폰에서는 자리만 먹습니다. */
  #page-home .home-v23-scroll,
  #page-home .home-v23-hero-foot,
  #page-home .home-v23-hero-controls{display:none !important}
}

/* ===================================================================
   8. 홈 섹션 · 카드
   =================================================================== */

@media (max-width:560px){
  /* ON AIR 카드 제목이 한 줄에서 잘리던 것을 두 줄까지 허용 */
  .home-v23-live-title{
    white-space:normal !important;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    line-height:1.4 !important;
  }
  .home-v23-live-copy b{font-size:12.5px !important}

  /* 멤버 캐러셀 — 폰에서 화살표는 손가락에 안 맞고,
     이름 뒤 고스트 영문이 겹칩니다. 둘 다 뺍니다. */
  #page-home .home-v23-member-arrow{display:none !important}
  #page-home .home-v23-member-carousel{width:100% !important}
  /* 고스트 영문은 body.home-v23-page #page-home .home-v23-member... 로
     정의돼 있어서 같은 깊이로 받아야 이깁니다. */
  body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase>.home-v23-member-roman{
    display:none !important;
  }
}

/* ===================================================================
   9. 멤버 캐러셀 — 폰에서 오른쪽이 잘리던 것
   -------------------------------------------------------------------
   실측: 셀은 87px 인데 초상 이미지가 99px 이라 칸마다 12px 씩 넘쳤고,
   그게 누적돼 세 번째 멤버가 화면 밖으로 나갔습니다.
   화살표를 없앤 만큼 좌우 여백도 회수합니다.
   =================================================================== */

@media (max-width:560px){
  /* 이기는 규칙이 body.home-v23-page #page-home .home-v23-member... 깊이라서
     같은 깊이로 받습니다. 초상 99px + 위 여백 38px 이던 것을 줄여
     한 화면에 더 많은 멤버가 들어오게 합니다. */
  body.home-v23-page #page-home .home-v23-member-strip{
    grid-template-columns:repeat(var(--member-count,12),80px) !important;
    gap:10px !important;
    padding:14px 2px 14px !important;
  }
  body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase>.home-v23-member-portrait{
    width:72px !important;
    height:72px !important;
    margin-top:6px !important;
    margin-bottom:11px !important;
  }
}

/* ===================================================================
   10. 플로팅 버튼 모드
   -------------------------------------------------------------------
   mobile-nav.js 의 NAV_MODE 로 켜고 끕니다. 스크립트가 <html> 에
   data-mnav-mode 를 붙이므로, 아래 규칙은 그 모드일 때만 적용됩니다.
   =================================================================== */

.mnav-fab{display:none}

@media (max-width:900px){
  html[data-mnav-mode="floating"] .mnav-fab{
    position:fixed;
    right:16px;
    bottom:calc(16px + env(safe-area-inset-bottom,0px));
    z-index:1400;
    display:grid;
    place-items:center;
    width:54px;
    height:54px;
    padding:0;
    border:1px solid color-mix(in srgb, var(--v23-accent, #ff4f7d) 42%, transparent);
    border-radius:18px;
    background:color-mix(in srgb, var(--v23-surface, #0f1520) 88%, transparent);
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
    box-shadow:0 10px 30px rgba(4,6,10,.55);
    color:var(--v23-accent, #ff4f7d);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:transform .18s ease, border-color .18s ease;
  }
  html[data-mnav-mode="floating"] .mnav-fab:active{transform:scale(.94)}
  html[data-mnav-mode="floating"] .mnav-fab-ico{display:block;width:23px;height:23px}
  html[data-mnav-mode="floating"] .mnav-fab-ico svg{
    width:100%;height:100%;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linejoin:round;
  }
  html[data-mnav-mode="floating"] .mnav-fab .mnav-dot{
    position:absolute;
    top:8px;right:8px;
    left:auto;
  }

  /* 플로팅 모드에는 하단바가 없으니, 하단바용 여백을 되돌립니다. */
  html[data-mnav-mode="floating"] .app-shell,
  html[data-mnav-mode="floating"] .app-main,
  html[data-mnav-mode="floating"] .app-content{
    padding-bottom:calc(84px + env(safe-area-inset-bottom,0px));
  }

  /* 시트가 열려 있는 동안에는 버튼을 숨깁니다. 시트 위에 겹칩니다. */
  body.mnav-sheet-open .mnav-fab{opacity:0;pointer-events:none}
}

/* ===================================================================
   11. 캘린더 — 폰에서 PC 월간 캘린더가 같이 보이던 문제
   -------------------------------------------------------------------
   원래 의도는 app.bundle.css:1090 에 이미 있었습니다.
       @media(max-width:760px){ .schedule-layout{display:none!important} }
   그런데 7,400 줄 아래 8495 줄에 미디어쿼리 없는 규칙이 덧붙어 있습니다.
       #page-calendar .schedule-layout{display:grid!important; ...}
   셀렉터가 더 구체적(ID 포함)이고 뒤에 있어서 모든 화면 폭에서 이깁니다.
   그래서 폰에서도 월간 캘린더가 살아나, 모바일 주간 뷰 아래에
   980px 짜리 표가 화면(346px)을 넘겨 붙어 있었습니다.

   여기서만 760px 을 쓰는 이유:
   모바일 주간 뷰(#mobileScheduleApp)를 켜는 규칙이 max-width:760px 이라,
   같은 값을 써야 "둘 다 없는" 구간이 안 생깁니다.
   =================================================================== */

@media (max-width:760px){
  #page-calendar .schedule-layout,
  #page-calendar .schedule-layout[style]{display:none !important}
}

/* ===================================================================
   12. 말머리 필터 (네이버 카페 게시판 전용)
   =================================================================== */

.up-rank-headbar{margin-top:8px}
.up-rank-headbar[hidden]{display:none !important}

@media (max-width:900px){
  /* 말머리가 열 개가 넘어가면 폰에서 줄바꿈이 심해집니다. 가로 스크롤로. */
  .up-rank-headbar{
    flex-wrap:nowrap !important;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .up-rank-headbar::-webkit-scrollbar{display:none}
  .up-rank-headbar>button{flex:0 0 auto}
}

/* ===== recap.css ===== */
/* [v2717] recap.css — 진드기 월간 점호 (누구나 볼 수 있습니다)
   ===================================================================
   클래스는 전부 .rc-* 입니다.

   결산판(.rc-board)은 그대로 PNG 로 굽습니다. 그래서 이 안에서는
   색을 var() 로 두지 않고 실제 값으로 씁니다 — html2canvas 가 일부
   환경에서 커스텀 속성을 못 풀어 회색으로 굳는 일이 있습니다.
   조작 바(.rc-bar)는 이미지에 안 들어가므로 토큰을 씁니다.

   색을 "하는 일" 로 나눠 씁니다
     파랑 5단계 = 많고 적음   분홍 = 지금 보는 곳   초록/빨강 = 늘고 줄음
   예전에는 분홍이 "이후 구간" 과 "증가" 두 가지 뜻이었습니다.

   테마를 따라갑니다 (.rc-board.is-light)
     결산만 강제로 어둡게 두지 않습니다. 사이트가 라이트면 판도 밝습니다.
     다만 var() 는 못 씁니다 — html2canvas 가 일부 환경에서 커스텀 속성을
     못 풀어 회색으로 굳습니다. 그래서 두 벌을 각각 실제 색값으로 깝니다.
     번거롭지만 "PNG 로 구웠더니 회색판" 보다 낫습니다.

   파랑 램프는 두 테마 다 재서 골랐습니다 (OKLab L 단조 · 이웃 ΔL ≥ 0.06 ·
   칸 글씨 대비 ≥ 4.5:1).
     어두운 판  #184f95 #2169bf #5598e7 #9ec5f4 #cde2fb   (어두움 → 밝음)
     밝은 판    #9ec5f4 #5598e7 #2169bf #184f95 #0d3668   (밝음 → 어두움)
     ΔL 최소 0.091 / 0.091, 칸 글씨 최저 5.00:1 / 5.47:1.

   고친 것 두 가지
     · 어두운 판 2단계가 원래 #2a78d6 이었습니다. 흰 글씨 4.04:1, 검은 글씨
       4.18:1 로 어느 쪽을 써도 기준에 못 미쳤습니다. #2169bf 로 내렸습니다.
     · 3단계(#5598e7)에 흰 글씨를 얹고 있었습니다. 2.73:1 이었습니다.
       검은 글씨로 뒤집어 6.19:1 이 됐습니다.

   초록/빨강도 바탕마다 다시 쟀습니다.
     어두운 판 #3ddc84 / #ff6b6b   (10.4:1 / 6.7:1)
     밝은 판   #0f7a2e / #c62828   ( 5.5:1 / 5.6:1)
   화살표(▲▼)가 같이 나오므로 색을 못 가려도 방향은 읽힙니다.
   =================================================================== */

.rc-layer{
  position:fixed;
  inset:0;
  z-index:2000;
  display:flex;
  flex-direction:column;
  background:#05070c;
}
.rc-layer[hidden]{display:none}
/* 뒷배경도 테마를 따라갑니다. 밝은 테마에서 검은 판이 깔리면
   흰 결산판만 둥둥 떠 보입니다. */
html:not([data-theme="dark"]) .rc-layer{background:#e9ecf1}
body.rc-open{overflow:hidden}
/* 결산 중에는 떠 있는 버튼들이 결산판을 가리지 않게 치웁니다. */
body.rc-open .floating-admin-login,
body.rc-open .mobile-floating-menu,
body.rc-open .mnav-fab{display:none !important}

/* ── 통계 페이지의 진입 버튼 (누구나 보입니다) ────────────────────── */

.stats-public-actions{
  display:flex;
  align-items:center;
  gap:10px;
  margin:2px 0 16px;
}
.recap-open-button{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:48px;
  padding:7px 16px 7px 12px;
  border:1px solid var(--v23-line, #eadde2);
  border-radius:14px;
  background:var(--v23-surface, #fff);
  color:var(--v23-text, #2a2028);
  font-family:inherit;
  text-align:left;
  cursor:pointer;
  transition:.16s ease;
}
.recap-open-button:hover{
  border-color:var(--v23-accent, #e85c84);
  color:var(--v23-accent, #e85c84);
}
/* [v2713] 아이콘 — 통계 페이지의 다른 버튼(.stats-backfill-icon)과 같은 규격입니다.
   24×24 뷰박스 · stroke 1.8 · 둥근 끝. 색 대비는 라이트 4.63:1 / 다크 6.94:1 로 확인했습니다
   (선 아이콘은 글자가 아니라 3:1 이상이면 충분합니다).
   네모 배경을 빼고 싶으면 아래 .recap-open-icon 의 background·padding·width·height 만 지우면 됩니다. */
.recap-open-icon{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  padding:6px;
  flex:0 0 auto;
  border-radius:10px;
  background:#fdeef3;
  color:#c4365e;
}
.recap-open-icon svg{
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
/* 예전 이모지 자리. 혹시 캐시된 옛 마크업이 남아도 크기가 튀지 않게 남겨 둡니다. */
.recap-open-button i{font-style:normal;font-size:17px;line-height:1}
.recap-open-button span{display:grid;gap:2px;min-width:0}
.recap-open-button b{font-size:13px;font-weight:900;letter-spacing:-.02em}
.recap-open-button small{font-size:11px;font-weight:600;color:var(--v23-muted, #8a7d85)}

html[data-theme="dark"] .recap-open-button{
  border-color:var(--ja-line, #263242);
  background:var(--ja-surface, #0f1520);
  color:var(--ja-text, #f4f6f9);
}
html[data-theme="dark"] .recap-open-button:hover{
  border-color:var(--ja-accent, #ff4f7d);
  color:var(--ja-accent, #ff4f7d);
}
html[data-theme="dark"] .recap-open-button small{color:var(--ja-muted, #8d98a8)}
html[data-theme="dark"] .recap-open-icon{background:#3a1f2b;color:#ff8fae}

@media (max-width:720px){
  .stats-public-actions{margin-bottom:12px}
  .recap-open-button{width:100%;justify-content:center}
  .recap-open-button small{display:none}
}

/* ── 조작 바 (이미지에 안 들어감) ─────────────────────────────────── */

.rc-bar{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  padding:12px 16px;
  border-bottom:1px solid var(--v23-line, #263242);
  background:var(--v23-surface, #0f1520);
}
.rc-save,
.rc-nav,
.rc-close{
  height:32px;
  padding:0 12px;
  border:1px solid var(--v23-line-strong, #334154);
  border-radius:8px;
  background:none;
  cursor:pointer;
  font-family:inherit;
  font-size:12px;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--v23-muted, #8d98a8);
  white-space:nowrap;
}
.rc-save:hover,
.rc-nav:hover{color:var(--v23-text, #f4f6f9);border-color:var(--v23-accent, #ff4f7d)}
.rc-save{color:#fff;background:#2b3648;border-color:#3b4859}
html:not([data-theme="dark"]) .rc-save{background:#3f4a5c;border-color:#3f4a5c}
.rc-nav{width:32px;padding:0;font-size:16px;line-height:1}
.rc-close{width:32px;padding:0;font-size:14px}

.rc-years{display:flex;align-items:center;gap:8px}
.rc-years b{
  min-width:74px;
  text-align:center;
  font-size:14px;
  font-weight:900;
  letter-spacing:-.02em;
  color:var(--v23-text, #f4f6f9);
  font-variant-numeric:tabular-nums;
}

.rc-status{
  font-size:11.5px;
  color:var(--v23-soft, #667284);
  min-width:150px;
}
.rc-bar-right{margin-left:auto;display:flex;gap:8px}

/* ── 스크롤 영역 ─────────────────────────────────────────────────── */

.rc-scroll{
  flex:1;
  overflow:auto;
  padding:24px;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}
/* 화면이 좁을 때 결산판을 통째로 줄이는 껍데기. 크기는 JS 가 잡습니다. */
.rc-fit{flex:none}

/* ── 결산판 — 여기부터가 이미지로 구워집니다 ──────────────────────── */

.rc-board{
  width:1240px;
  flex:none;
  padding:30px 30px 22px;
  border-radius:18px;
  background:#080b11;
  border:1px solid #1d2635;
  color:#eef2f7;
  font-family:'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
}

/* 머리말 */
.rc-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  padding-bottom:16px;
  border-bottom:1px solid #1d2635;
}
.rc-title>span{
  display:block;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.2em;
  color:#ff4f7d;
  margin-bottom:6px;
}
.rc-title h2{
  margin:0;
  font-size:27px;
  font-weight:850;
  letter-spacing:-.04em;
  line-height:1.05;
  color:#eef2f7;
}
.rc-title p{
  margin:7px 0 0;
  font-size:12.5px;
  font-weight:600;
  color:#9aa6b8;
  font-variant-numeric:tabular-nums;
}

/* 지표 탭 */
.rc-tabs{display:flex;gap:6px;flex-wrap:wrap}
.rc-tabs .rc-tab{
  padding:8px 15px;
  border:1px solid #273243;
  border-radius:8px;
  background:transparent;
  color:#9aa6b8;
  font-family:inherit;
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
}
.rc-tabs .rc-tab:hover{color:#eef2f7;border-color:#3b4859}
.rc-tabs .rc-tab.is-on{background:#ff4f7d;border-color:#ff4f7d;color:#fff}

/* 월 고르기 줄 */
.rc-months{display:flex;gap:4px;margin-top:14px;flex-wrap:wrap}
.rc-months button{
  flex:1 1 0;
  min-width:62px;
  padding:7px 4px;
  border:1px solid #1d2635;
  border-radius:7px;
  background:#0d131d;
  color:#8d98a8;
  font-family:inherit;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.rc-months button:hover{color:#eef2f7;border-color:#3b4859}
.rc-months button.is-on{background:#ff4f7d;border-color:#ff4f7d;color:#fff}
.rc-months button.is-off{color:#5a6577}
.rc-months button.is-off.is-on{color:#fff}

/* ── [v2710] 그룹 전환 + VS ────────────────────────────────────────
   그룹 점 색은 검사기(validate_palette.js)로 골랐습니다.
     다크  진드기 #5598e7 · 찐드기 #f0a73a
   적록색약 ΔE 26.4 · 청황색약 26.6 · 정상시 30.4 로 모두 통과합니다.
   분홍(#ff4f7d)은 "지금 보는 달" 이 이미 쓰고 있어서 그룹 색으로 쓰지 않았습니다.
   색만으로 구분하지 않도록 점 옆에 항상 글자 라벨을 둡니다. */
.rc-groups{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap}
.rc-group{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;border:1px solid #1d2635;border-radius:7px;background:#0d131d;
  color:#8d98a8;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;
}
.rc-group:hover{color:#eef2f7;border-color:#3b4859}
.rc-group small{font-weight:600;font-size:10.5px;opacity:.72}
.rc-group-dot{width:8px;height:8px;border-radius:2px;flex:none;display:block}
.rc-group-jindegi{background:#5598e7}
.rc-group-jjindegi{background:#f0a73a}
.rc-group[data-rc-group="jindegi"].is-on{border-color:#5598e7;background:rgba(85,152,231,.16);color:#eef2f7}
.rc-group[data-rc-group="jjindegi"].is-on{border-color:#f0a73a;background:rgba(240,167,58,.16);color:#eef2f7}
.rc-group-vs.is-on{border-color:#8d98a8;background:#1d2635;color:#fff}

.rc-vs{display:grid;grid-template-columns:1fr 44px 1fr;align-items:start;margin-top:4px}
.rc-vs-col{min-width:0}
.rc-vs-mid{display:flex;flex-direction:column;align-items:center;gap:9px;padding-top:40px;
  align-self:stretch}  /* 그리드가 align-items:start 라 늘려주지 않으면 세로선이 안 보입니다 */
.rc-vs-mid s{flex:1;width:1px;min-height:60px;background:#1d2635;display:block}
.rc-vs-mid b{font-size:12px;font-weight:900;letter-spacing:.1em;color:#6b7788}
.rc-vs-name{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-size:13px;font-weight:800}
.rc-vs-name small{font-weight:600;font-size:10.5px;color:#8d98a8}
.rc-vs-empty{margin:18px 0;padding:26px 16px;border:1px dashed #1d2635;border-radius:10px;
  text-align:center;font-size:12px;line-height:1.9;color:#6b7788}
.rc-vs-empty small{color:#4e5869}
.rc-vs-empty-wide{margin:14px 0 0}

/* 좌우로 쪼개면 한쪽이 약 600px 이라 칸을 줄입니다. */
.rc-vs .rc-mx{border-spacing:3px 3px;margin-top:8px}
.rc-vs .rc-mx tbody th{width:96px}
.rc-vs .rc-mx thead th{font-size:9.5px}
.rc-vs .rc-mx-name{font-size:10.5px;gap:5px;padding-right:4px}
.rc-vs .rc-mx-name img{width:17px;height:17px}
.rc-vs .rc-cell{height:33px;font-size:11.5px;border-radius:4px}
.rc-vs .rc-d{font-size:8.5px}

/* 그룹 평균 행 — 램프로 칠하지 않습니다. 멤버 칸과 같은 색이면 평균도 멤버로 읽힙니다. */
.rc-mx-name-static{cursor:default}
.rc-mx-name-static span{color:#ff4f7d;font-weight:800}
.rc-avg-dot{width:17px;height:17px;border-radius:50%;flex:none;border:1px dashed #ff4f7d;display:block}
.rc-cell.rc-avgcell{background:#141c2a;color:#eef2f7;box-shadow:inset 0 0 0 1px #3a465c;cursor:default}
.rc-mx-avg td.rc-mx-now .rc-cell.rc-avgcell{box-shadow:inset 0 0 0 2px #ff4f7d}
.rc-avgcell .rc-up{color:#3ddc84}
.rc-avgcell .rc-down{color:#ff6b6b}
.rc-avgcell .rc-flat{color:#8d98a8}
.rc-key-avg{box-shadow:inset 0 0 0 1px #3a465c;background:#141c2a}

/* ── 성적표 매트릭스 ─────────────────────────────────────────────── */

.rc-mx{width:100%;border-collapse:separate;border-spacing:2px;margin-top:12px}
.rc-mx th,.rc-mx td{padding:0}
.rc-mx thead th{
  font-size:11.5px;
  font-weight:800;
  color:#9aa6b8;
  padding:4px 0 8px;
  text-align:center;
}
.rc-mx thead th.rc-mx-now{color:#ff4f7d}
.rc-mx thead th.rc-mx-who{text-align:left;padding-left:2px}
.rc-mx tbody th{width:168px;text-align:left}

.rc-mx-name{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  padding:2px 10px 2px 2px;
  border:0;
  background:none;
  color:#eef2f7;
  font-family:inherit;
  font-size:12.5px;
  font-weight:600;
  text-align:left;
  cursor:pointer;
}
.rc-mx-name img{width:24px;height:24px;border-radius:50%;flex:none;object-fit:cover;background:#1d2635}
.rc-mx-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-mx-name:hover span{color:#ff4f7d}

.rc-cell{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:38px;
  border:0;
  border-radius:5px;
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
  cursor:pointer;
}
.rc-cellcol{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15}

/* 램프 — 한 멤버 안에서의 상대 크기 5단계. JS 는 단계만 붙이고 색은 여기서 깝니다. */
.rc-cell.rc-n0{background:#184f95;color:#f2f5f9}
.rc-cell.rc-n1{background:#2169bf;color:#f2f5f9}
.rc-cell.rc-n2{background:#5598e7;color:#0c1420}
.rc-cell.rc-n3{background:#9ec5f4;color:#0c1420}
.rc-cell.rc-n4{background:#cde2fb;color:#0c1420}
.rc-ramp i b.rc-n0{background:#184f95}
.rc-ramp i b.rc-n1{background:#2169bf}
.rc-ramp i b.rc-n2{background:#5598e7}
.rc-ramp i b.rc-n3{background:#9ec5f4}
.rc-ramp i b.rc-n4{background:#cde2fb}
/* 데뷔 전 — 빗금. "0" 과 "아직 없음" 은 다른 뜻입니다. */
.rc-cell.rc-pre{
  background:repeating-linear-gradient(45deg,transparent,transparent 4px,#1d2635 4px,#1d2635 5px);
  color:#5a6577;
  font-size:10.5px;
  cursor:default;
}
.rc-cell.rc-rest{background:#131a26;color:#6b7788;font-size:10.5px;cursor:default}
/* 방송은 했는데 그 지표만 비어 있는 달. 휴방과 섞이면 안 됩니다. */
.rc-cell.rc-nodata{background:#101723;color:#4e5869;font-size:13px}
.rc-cell.rc-blank{background:transparent;cursor:default}
.rc-mx tbody tr:hover .rc-cell{filter:brightness(1.12)}

/* 지금 보는 달은 램프로 칠하지 않습니다.
   칠해버리면 증감(초록/빨강) 글씨가 칸 색에 묻혀 방향을 못 읽습니다. */
.rc-mx td.rc-mx-now .rc-cell{
  background:#141c2a !important;
  color:#eef2f7 !important;
  box-shadow:inset 0 0 0 2px #ff4f7d;
}

.rc-d{display:block;font-size:10px;font-weight:800;letter-spacing:-.01em;margin-top:1px}
.rc-up{color:#3ddc84}
.rc-down{color:#ff6b6b}
.rc-flat{color:#8d98a8}
/* 램프 칸 위에 얹히는 증감은 칸 색과 싸우지 않게 바탕색 글씨로 둡니다. */
.rc-cell.rc-n0 .rc-d,.rc-cell.rc-n1 .rc-d{color:#fff;opacity:.92}
.rc-cell.rc-n2 .rc-d,.rc-cell.rc-n3 .rc-d,.rc-cell.rc-n4 .rc-d{color:#0c1420;opacity:.8}
.rc-mx td.rc-mx-now .rc-cell .rc-up{color:#3ddc84 !important;opacity:1}
.rc-mx td.rc-mx-now .rc-cell .rc-down{color:#ff6b6b !important;opacity:1}
.rc-mx td.rc-mx-now .rc-cell .rc-flat{color:#8d98a8 !important;opacity:1}

/* 범례 */
.rc-legend{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  margin-top:16px;
  font-size:11.5px;
  color:#9aa6b8;
}
.rc-ramp{display:flex;align-items:center;gap:7px}
.rc-ramp i{display:flex;gap:2px}
.rc-ramp i b{width:22px;height:9px;border-radius:2px;display:block}
.rc-key{display:inline-flex;align-items:center;gap:6px}
.rc-key s{text-decoration:none;width:11px;height:11px;border-radius:3px;display:block}
.rc-key-pre{background:repeating-linear-gradient(45deg,transparent,transparent 3px,#1d2635 3px,#1d2635 4px)}
.rc-key-rest{background:#131a26;border:1px solid #1d2635}
.rc-key-now{box-shadow:inset 0 0 0 2px #ff4f7d}
.rc-key-text{color:#6b7788}

/* ── 멤버 상세 ───────────────────────────────────────────────────── */

.rc-head-member{align-items:center}
.rc-back{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 13px;
  border:1px solid #273243;
  border-radius:8px;
  background:transparent;
  color:#9aa6b8;
  font-family:inherit;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.rc-back:hover{color:#eef2f7;border-color:#3b4859}
.rc-who{display:flex;align-items:center;gap:13px;margin-top:14px}
.rc-who img{width:46px;height:46px;border-radius:50%;object-fit:cover;background:#1d2635}
.rc-who b{font-size:22px;font-weight:850;letter-spacing:-.03em}
.rc-who small{display:block;margin-top:2px;font-size:12px;font-weight:600;color:#9aa6b8}
.rc-memnav{display:flex;align-items:center;gap:8px;color:#8d98a8;font-size:12px;font-weight:700}
.rc-memnav .rc-nav{border-color:#273243}

/* 요약 4칸 */
.rc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
.rc-stat{border:1px solid #1d2635;border-radius:11px;background:#0d131d;padding:13px 15px}
.rc-stat>span{display:block;font-size:11px;font-weight:700;color:#6b7788}
.rc-stat>b{
  display:flex;
  align-items:baseline;
  gap:7px;
  margin-top:6px;
  font-size:22px;
  font-weight:850;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.rc-stat-d{display:inline !important;font-size:11.5px !important;margin:0 !important}

/* 패널 공통 */
.rc-panel{margin-top:22px;border-top:1px solid #1d2635;padding-top:18px}
.rc-panel>header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:12px;
}
.rc-panel header>div>span{
  display:block;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.18em;
  color:#ff4f7d;
  margin-bottom:5px;
}
.rc-panel header h3{margin:0;font-size:16px;font-weight:800;letter-spacing:-.02em;color:#eef2f7}
.rc-panel header>p{margin:0;font-size:11.5px;font-weight:600;color:#8d98a8;text-align:right}
.rc-panel-note{margin:0 0 12px;font-size:11.5px;line-height:1.7;color:#6b7788}

.rc-subtabs{display:flex;gap:5px;flex-wrap:wrap}
.rc-subtabs button{
  padding:6px 12px;
  border:1px solid #273243;
  border-radius:7px;
  background:transparent;
  color:#8d98a8;
  font-family:inherit;
  font-size:11.5px;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
}
.rc-subtabs button:hover{color:#eef2f7;border-color:#3b4859}
.rc-subtabs button.is-on{background:#ff4f7d;border-color:#ff4f7d;color:#fff}

/* 월별 막대 — 가늘게. 숫자는 막대 위에 한 번만 붙습니다.
   칸 하나는 .rc-barcol 입니다. 조작 바가 이미 .rc-bar 를 쓰고 있어서
   같은 이름을 쓰면 위쪽 바가 flex:1 을 물려받아 화면 절반으로 부풀었습니다. */
.rc-bars{
  display:flex;
  align-items:flex-end;
  gap:0;
  height:220px;
  padding:0 4px;
  border-bottom:1px solid #1d2635;
}
.rc-barcol{
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  height:100%;
  min-width:0;
}
.rc-barcol u{
  text-decoration:none;
  margin-bottom:6px;
  font-size:11.5px;
  font-weight:800;
  color:#c3ccd9;
  font-variant-numeric:tabular-nums;
}
.rc-barcol i{display:block;width:16px;background:#2a78d6;border-radius:4px 4px 0 0}
.rc-barcol.is-on u{color:#ff4f7d}
.rc-barcol.is-on i{background:#ff4f7d}
.rc-barcol-off{color:#5a6577 !important;font-size:10px !important;font-weight:700 !important}
.rc-barcol-stick{display:block;width:16px;height:2px;background:#1d2635}
.rc-barcol-d{margin-bottom:3px !important;font-size:9.5px !important}

.rc-barmonths{display:flex;padding:8px 4px 0;gap:0}
.rc-barmonths button{
  flex:1 1 0;
  min-width:0;
  padding:4px 0;
  border:0;
  background:none;
  color:#6b7788;
  font-family:inherit;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
}
.rc-barmonths button:hover{color:#eef2f7}
.rc-barmonths button.is-on{color:#ff4f7d}

/* ── 방송 달력 ───────────────────────────────────────────────────
   통계 › 멤버별 상세 › 방송 달력과 같은 칸입니다.
   날짜 + 시작 시각 + 회차 배지 / 제목 / 평균·최고 시청자 · 방송시간. */
.rc-cal-week,.rc-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.rc-cal-week{margin-bottom:5px}
.rc-cal-week span{text-align:center;font-size:11.5px;font-weight:900;color:#8d98a8;padding:3px}
.rc-cal-week span.rc-sun{color:#ff8fa8}
.rc-cal-week span.rc-sat{color:#8ab4ff}

.rc-cal-day{
  min-height:118px;
  padding:9px 10px 10px;
  border:1px solid #1d2635;
  border-radius:11px;
  background:#0d131d;
  display:flex;
  flex-direction:column;
  gap:6px;
  overflow:hidden;
  text-align:left;
}
.rc-cal-empty{background:transparent;border-color:transparent}
/* 방송한 날 — 통계 달력과 같은 민트 왼쪽 띠 */
.rc-cal-day.is-on{
  background:linear-gradient(180deg,#13251f,#14221d);
  border-color:#2e6c5a;
  box-shadow:inset 3px 0 0 #43c6a3;
}
.rc-cal-top{display:flex;align-items:center;justify-content:space-between;gap:6px}
.rc-cal-top b{font-size:13px;font-weight:900;line-height:1;color:#eef2f7}
.rc-cal-top b em{
  font-style:normal;
  margin-left:5px;
  font-size:10px;
  font-weight:800;
  color:#9aa6b8;
  font-variant-numeric:tabular-nums;
}
.rc-cal-count{
  font-style:normal;
  min-width:17px;
  height:17px;
  padding:0 5px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:900;
  color:#fff;
  background:#43c6a3;
  flex:none;
}
.rc-cal-title{
  font-size:11px;
  font-weight:700;
  line-height:1.35;
  color:#dbe2ec;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  word-break:break-all;
}
.rc-cal-none{margin-top:auto;font-size:11px;color:#5a6577}
.rc-cal-nums{margin-top:auto;display:grid;gap:3px}
.rc-cal-nums i{display:flex;align-items:baseline;justify-content:space-between;gap:6px;font-style:normal}
.rc-cal-nums s{text-decoration:none;font-size:9.5px;font-weight:700;color:#7d8899;white-space:nowrap}
.rc-cal-nums u{
  text-decoration:none;
  font-size:11.5px;
  font-weight:900;
  color:#eef2f7;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* ── 분포 막대 ───────────────────────────────────────────────────
   원형을 걷어내고 세로 막대로 바꿨습니다. 네 가지 다 순서가 있는 값이라
   가로로 늘어놓는 게 맞고, 위의 월별 막대와 같은 모양이라 눈이 따로
   배울 게 없습니다. 막대 폭은 월별 막대와 같은 16px 입니다. */

.rc-dbars{
  display:flex;
  align-items:flex-end;
  gap:0;
  height:210px;
  padding:0 4px;
  border-bottom:1px solid #1d2635;
}
.rc-dbar{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  height:100%;
  cursor:default;
}
.rc-dbar u{
  text-decoration:none;
  margin-bottom:6px;
  font-size:12px;
  font-weight:800;
  color:#eef2f7;
  font-variant-numeric:tabular-nums;
}
.rc-dbar i{display:block;width:16px;background:#2a78d6;border-radius:4px 4px 0 0}
.rc-dbar:hover i{background:#5598e7}
.rc-dbar.is-empty u{color:#4e5869}
.rc-dbar-zero{height:2px;background:#1d2635}

.rc-dbarlabels{display:flex;padding:9px 4px 0;gap:0}
.rc-dbarlabels span{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
}
.rc-dbarlabels b{font-size:11.5px;font-weight:700;color:#c3ccd9;white-space:nowrap}
.rc-dbarlabels em{
  font-style:normal;
  font-size:10.5px;
  font-weight:700;
  color:#6b7788;
  font-variant-numeric:tabular-nums;
}

/* 툴팁은 body 에 붙습니다 (판 밖으로 나가도 안 잘리게). 이미지에는 안 들어갑니다. */
.rc-tip{
  position:fixed;
  z-index:2100;
  pointer-events:none;
  padding:9px 12px;
  border-radius:9px;
  background:#05080e;
  border:1px solid rgba(255,255,255,.14);
  font-family:'Pretendard Variable',Pretendard,system-ui,sans-serif;
  font-size:12px;
  line-height:1.55;
  color:#f2f5f9;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  opacity:0;
  transition:opacity .12s ease;
}
.rc-tip.is-on{opacity:1}
.rc-tip b{color:#ff4f7d}
.rc-tip small{display:block;margin-top:3px;color:#8d98a8;font-size:11px}

/* ── 최고 방송 ───────────────────────────────────────────────────── */

.rc-bests{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.rc-best{border:1px solid #1d2635;border-radius:12px;background:#0d131d;padding:16px 18px 18px}
.rc-best>span{display:block;font-size:11px;font-weight:800;color:#6b7788;letter-spacing:.03em}
.rc-best>b{display:block;margin:8px 0 0;font-size:31px;font-weight:850;letter-spacing:-.04em;line-height:1}
.rc-best>b i{font-style:normal;font-size:14px;font-weight:700;color:#9aa6b8;margin-left:4px}
.rc-best .rc-best-none{font-size:17px;font-weight:700;color:#5a6577;letter-spacing:-.02em}
.rc-best>p{margin:10px 0 0;font-size:13.5px;font-weight:600;line-height:1.5;color:#dbe2ec}
.rc-best>small{display:block;margin-top:7px;font-size:11px;color:#6b7788}
.rc-best.is-now{border-color:#5c2a3d}
.rc-best.is-now>b{color:#ff4f7d}

/* ── 꼬리말·빈 상태 ──────────────────────────────────────────────── */

.rc-foot{
  margin-top:22px;
  padding-top:14px;
  border-top:1px solid #1d2635;
  font-size:10.5px;
  font-weight:600;
  color:#5a6577;
  text-align:right;
}
.rc-empty{
  margin:40px 0;
  padding:40px 20px;
  border:1px dashed #273243;
  border-radius:14px;
  text-align:center;
  font-size:14px;
  font-weight:700;
  color:#9aa6b8;
}
.rc-empty small{display:block;margin-top:8px;font-size:12px;font-weight:600;color:#6b7788}

/* 이미지로 구울 때는 조작용 요소를 뺍니다. */
.rc-board.is-shooting .rc-months,
.rc-board.is-shooting .rc-memnav,
.rc-board.is-shooting .rc-back,
.rc-board.is-shooting .rc-barmonths{display:none !important}

/* ── 좁은 화면 ───────────────────────────────────────────────────── */

@media (max-width:860px){
  .rc-scroll{padding:12px}
  .rc-bar{padding:10px 12px;gap:8px}
  .rc-status{min-width:0;flex:1 1 100%;order:3}
}

/* ═══════════════════════════════════════════════════════════════════
   밝은 테마 — .rc-board.is-light
   ===================================================================
   사이트가 라이트면 결산판도 밝습니다. JS 가 html[data-theme] 를 보고
   이 클래스를 붙였다 뗐다 합니다 (열어둔 채로 테마를 바꿔도 따라갑니다).

   var() 를 안 쓰고 값을 또 적는 이유는 맨 위에 적어 뒀습니다 —
   html2canvas 가 커스텀 속성을 못 풀어 PNG 가 회색으로 굳습니다.

   쓰는 값 (전부 대비를 재서 골랐습니다)
     바탕 #ffffff · 칸/카드 #f4f6f9 · 선 #e3e8ef
     글씨 #121620(18.1:1) · 흐린 글씨 #56616f(5.8:1) · 더 흐린 #616d7c(4.9:1)
     분홍 #d1134b (흰 글씨 5.4:1, 흰 바탕 글씨로도 5.4:1)
     초록 #0f7a2e(5.5:1) · 빨강 #c62828(5.6:1)
   =================================================================== */

.rc-board.is-light{background:#ffffff;border-color:#e3e8ef;color:#121620}

.rc-board.is-light .rc-head{border-bottom-color:#e3e8ef}
.rc-board.is-light .rc-title>span{color:#d1134b}
.rc-board.is-light .rc-title h2{color:#121620}
.rc-board.is-light .rc-title p{color:#56616f}

.rc-board.is-light .rc-tabs .rc-tab{border-color:#dbe1ea;color:#56616f}
.rc-board.is-light .rc-tabs .rc-tab:hover{color:#121620;border-color:#aab4c2}
.rc-board.is-light .rc-tabs .rc-tab.is-on{background:#d1134b;border-color:#d1134b;color:#fff}

.rc-board.is-light .rc-months button{border-color:#e3e8ef;background:#f4f6f9;color:#56616f}
.rc-board.is-light .rc-months button:hover{color:#121620;border-color:#aab4c2}
.rc-board.is-light .rc-months button.is-on{background:#d1134b;border-color:#d1134b;color:#fff}
.rc-board.is-light .rc-months button.is-off{color:#9aa4b2}
.rc-board.is-light .rc-months button.is-off.is-on{color:#fff}

/* [v2710] 그룹 전환 + VS — 밝은 테마
   라이트 진드기 #2169bf · 찐드기 #b26a00 (검사기 전 항목 통과, 정상시 ΔE 29.1) */
.rc-board.is-light .rc-group{border-color:#e3e8ef;background:#f4f6f9;color:#56616f}
.rc-board.is-light .rc-group:hover{color:#121620;border-color:#aab4c2}
.rc-board.is-light .rc-group-jindegi{background:#2169bf}
.rc-board.is-light .rc-group-jjindegi{background:#b26a00}
.rc-board.is-light .rc-group[data-rc-group="jindegi"].is-on{border-color:#2169bf;background:rgba(33,105,191,.12);color:#121620}
.rc-board.is-light .rc-group[data-rc-group="jjindegi"].is-on{border-color:#b26a00;background:rgba(178,106,0,.12);color:#121620}
.rc-board.is-light .rc-group-vs.is-on{border-color:#56616f;background:#eef1f6;color:#121620}
.rc-board.is-light .rc-vs-mid s{background:#e3e8ef}
.rc-board.is-light .rc-vs-mid b{color:#616d7c}
.rc-board.is-light .rc-vs-name small{color:#56616f}
.rc-board.is-light .rc-vs-empty{border-color:#dbe1ea;color:#56616f}
.rc-board.is-light .rc-vs-empty small{color:#9aa4b2}
.rc-board.is-light .rc-mx-name-static span{color:#d1134b}
.rc-board.is-light .rc-avg-dot{border-color:#d1134b}
.rc-board.is-light .rc-cell.rc-avgcell{background:#f4f6f9;color:#121620;box-shadow:inset 0 0 0 1px #c3ccd8}
.rc-board.is-light .rc-mx-avg td.rc-mx-now .rc-cell.rc-avgcell{box-shadow:inset 0 0 0 2px #d1134b}
.rc-board.is-light .rc-avgcell .rc-up{color:#0f7a2e}
.rc-board.is-light .rc-avgcell .rc-down{color:#c62828}
.rc-board.is-light .rc-avgcell .rc-flat{color:#616d7c}
.rc-board.is-light .rc-key-avg{box-shadow:inset 0 0 0 1px #c3ccd8;background:#f4f6f9}


/* ── 성적표 ──────────────────────────────────────────────────────── */
.rc-board.is-light .rc-mx thead th{color:#56616f}
.rc-board.is-light .rc-mx thead th.rc-mx-now{color:#d1134b}
.rc-board.is-light .rc-mx-name{color:#121620}
.rc-board.is-light .rc-mx-name img{background:#e3e8ef}
.rc-board.is-light .rc-mx-name:hover span{color:#d1134b}

/* 램프 — 밝은 바탕에서는 "클수록 어둡게" 가 맞습니다. */
.rc-board.is-light .rc-cell.rc-n0{background:#9ec5f4;color:#0c1420}
.rc-board.is-light .rc-cell.rc-n1{background:#5598e7;color:#0c1420}
.rc-board.is-light .rc-cell.rc-n2{background:#2169bf;color:#ffffff}
.rc-board.is-light .rc-cell.rc-n3{background:#184f95;color:#ffffff}
.rc-board.is-light .rc-cell.rc-n4{background:#0d3668;color:#ffffff}
.rc-board.is-light .rc-ramp i b.rc-n0{background:#9ec5f4}
.rc-board.is-light .rc-ramp i b.rc-n1{background:#5598e7}
.rc-board.is-light .rc-ramp i b.rc-n2{background:#2169bf}
.rc-board.is-light .rc-ramp i b.rc-n3{background:#184f95}
.rc-board.is-light .rc-ramp i b.rc-n4{background:#0d3668}
.rc-board.is-light .rc-cell.rc-n0 .rc-d,
.rc-board.is-light .rc-cell.rc-n1 .rc-d{color:#0c1420;opacity:.8}
.rc-board.is-light .rc-cell.rc-n2 .rc-d,
.rc-board.is-light .rc-cell.rc-n3 .rc-d,
.rc-board.is-light .rc-cell.rc-n4 .rc-d{color:#fff;opacity:.92}

.rc-board.is-light .rc-cell.rc-pre{
  background:repeating-linear-gradient(45deg,transparent,transparent 4px,#dbe1ea 4px,#dbe1ea 5px);
  color:#8b96a6;
}
.rc-board.is-light .rc-cell.rc-rest{background:#eef1f5;color:#616d7c}
.rc-board.is-light .rc-cell.rc-nodata{background:#f4f6f9;color:#9aa4b2}
.rc-board.is-light .rc-mx td.rc-mx-now .rc-cell{
  background:#f4f6f9 !important;
  color:#121620 !important;
  box-shadow:inset 0 0 0 2px #d1134b;
}

/* 늘고 줄음 */
.rc-board.is-light .rc-up{color:#0f7a2e}
.rc-board.is-light .rc-down{color:#c62828}
.rc-board.is-light .rc-flat{color:#616d7c}
.rc-board.is-light .rc-mx td.rc-mx-now .rc-cell .rc-up{color:#0f7a2e !important}
.rc-board.is-light .rc-mx td.rc-mx-now .rc-cell .rc-down{color:#c62828 !important}
.rc-board.is-light .rc-mx td.rc-mx-now .rc-cell .rc-flat{color:#616d7c !important}

/* 범례 */
.rc-board.is-light .rc-legend{color:#56616f}
.rc-board.is-light .rc-key-pre{background:repeating-linear-gradient(45deg,transparent,transparent 3px,#dbe1ea 3px,#dbe1ea 4px)}
.rc-board.is-light .rc-key-rest{background:#eef1f5;border-color:#e3e8ef}
.rc-board.is-light .rc-key-now{box-shadow:inset 0 0 0 2px #d1134b}
.rc-board.is-light .rc-key-text{color:#616d7c}

/* ── 멤버 상세 ───────────────────────────────────────────────────── */
.rc-board.is-light .rc-back{border-color:#dbe1ea;color:#56616f}
.rc-board.is-light .rc-back:hover{color:#121620;border-color:#aab4c2}
.rc-board.is-light .rc-who img{background:#e3e8ef}
.rc-board.is-light .rc-who small{color:#56616f}
.rc-board.is-light .rc-memnav{color:#56616f}
.rc-board.is-light .rc-memnav .rc-nav{border-color:#dbe1ea;color:#56616f}
.rc-board.is-light .rc-memnav .rc-nav:hover{color:#121620;border-color:#aab4c2}

.rc-board.is-light .rc-stat{border-color:#e3e8ef;background:#f4f6f9}
.rc-board.is-light .rc-stat>span{color:#616d7c}

.rc-board.is-light .rc-panel{border-top-color:#e3e8ef}
.rc-board.is-light .rc-panel header>div>span{color:#d1134b}
.rc-board.is-light .rc-panel header h3{color:#121620}
.rc-board.is-light .rc-panel header>p{color:#56616f}
.rc-board.is-light .rc-panel-note{color:#616d7c}
.rc-board.is-light .rc-subtabs button{border-color:#dbe1ea;color:#56616f}
.rc-board.is-light .rc-subtabs button:hover{color:#121620;border-color:#aab4c2}
.rc-board.is-light .rc-subtabs button.is-on{background:#d1134b;border-color:#d1134b;color:#fff}

/* 월별 막대 */
.rc-board.is-light .rc-bars{border-bottom-color:#e3e8ef}
.rc-board.is-light .rc-barcol u{color:#56616f}
.rc-board.is-light .rc-barcol i{background:#2169bf}
.rc-board.is-light .rc-barcol.is-on u{color:#d1134b}
.rc-board.is-light .rc-barcol.is-on i{background:#d1134b}
.rc-board.is-light .rc-barcol-off{color:#9aa4b2 !important}
.rc-board.is-light .rc-barcol-stick{background:#e3e8ef}
.rc-board.is-light .rc-barmonths button{color:#616d7c}
.rc-board.is-light .rc-barmonths button:hover{color:#121620}
.rc-board.is-light .rc-barmonths button.is-on{color:#d1134b}

/* 방송 달력 — 통계 페이지의 라이트 달력과 같은 민트입니다. */
.rc-board.is-light .rc-cal-week span{color:#56616f}
.rc-board.is-light .rc-cal-week span.rc-sun{color:#d1134b}
.rc-board.is-light .rc-cal-week span.rc-sat{color:#1c5cab}
.rc-board.is-light .rc-cal-day{border-color:#e3e8ef;background:#ffffff}
.rc-board.is-light .rc-cal-empty{background:transparent;border-color:transparent}
.rc-board.is-light .rc-cal-day.is-on{
  background:linear-gradient(180deg,#f7fffb,#f0fbf7);
  border-color:#9fdcc9;
  box-shadow:inset 3px 0 0 #43c6a3;
}
.rc-board.is-light .rc-cal-top b{color:#121620}
.rc-board.is-light .rc-cal-top b em{color:#56616f}
/* 배지는 #43c6a3 에 흰 글씨면 2.1:1 입니다. 밝은 판에서는 더 진하게 씁니다. */
.rc-board.is-light .rc-cal-count{background:#0f7a5c}
.rc-board.is-light .rc-cal-title{color:#242b36}
.rc-board.is-light .rc-cal-none{color:#8b96a6}
.rc-board.is-light .rc-cal-nums s{color:#616d7c}
.rc-board.is-light .rc-cal-nums u{color:#121620}

/* 분포 막대 */
.rc-board.is-light .rc-dbars{border-bottom-color:#e3e8ef}
.rc-board.is-light .rc-dbar u{color:#121620}
.rc-board.is-light .rc-dbar i{background:#2169bf}
.rc-board.is-light .rc-dbar:hover i{background:#184f95}
.rc-board.is-light .rc-dbar.is-empty u{color:#9aa4b2}
.rc-board.is-light .rc-dbar-zero{background:#e3e8ef}
.rc-board.is-light .rc-dbarlabels b{color:#2b3340}
.rc-board.is-light .rc-dbarlabels em{color:#616d7c}

/* 최고 방송 · 꼬리말 · 빈 상태 */
.rc-board.is-light .rc-best{border-color:#e3e8ef;background:#f4f6f9}
.rc-board.is-light .rc-best>span{color:#616d7c}
.rc-board.is-light .rc-best>b i{color:#56616f}
.rc-board.is-light .rc-best .rc-best-none{color:#9aa4b2}
.rc-board.is-light .rc-best>p{color:#242b36}
.rc-board.is-light .rc-best>small{color:#616d7c}
.rc-board.is-light .rc-best.is-now{border-color:#f0b9c9}
.rc-board.is-light .rc-best.is-now>b{color:#d1134b}

.rc-board.is-light .rc-foot{border-top-color:#e3e8ef;color:#8b96a6}
.rc-board.is-light .rc-empty{border-color:#dbe1ea;color:#56616f}
.rc-board.is-light .rc-empty small{color:#616d7c}

/* ══ [v2717] 진드기 월간 점호 — 아이콘 · 인트로 · 한 명씩 등장 ══════
   ===================================================================
   인트로는 결산 창(.rc-layer) 안에 덮개로 얹습니다. 별도 레이어를 또
   만들면 닫기·테마 전환·스크롤 잠금을 두 벌 관리해야 해서입니다.

   움직임은 전부 transform / opacity 로만 만듭니다. width·top 을 건드리면
   글자가 매 프레임 다시 배치돼서 큰 글씨가 떨립니다.

   시간표 (브금의 박 = 0.714초)
     0.00  덮개가 들어옵니다
     0.25  뒤쪽 원이 천천히 벌어집니다
     0.40  「진드기」 가 왼쪽에서 들어옵니다
     1.15  「월간 점호」 가 아래에서 올라옵니다
     1.50  분홍 선이 왼쪽에서 오른쪽으로 그어집니다
     1.90  아래 한 줄이 떠오릅니다
     3.40  전체가 물러나기 시작합니다
     4.00  덮개가 사라지고 멤버가 한 명씩 올라옵니다
   =================================================================== */

/* ── 여는 버튼 아이콘 ──────────────────────────────────────────── */
.recap-open-icon{
  width:20px;height:20px;flex:none;
  display:grid;place-items:center;
  color:var(--v23-accent, #ff4f7d);
}
.recap-open-icon svg{
  width:20px;height:20px;display:block;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.recap-open-icon circle{fill:currentColor;stroke:none}

/* ── 조작 바의 작은 스위치 ────────────────────────────────────── */
.rc-mini{
  height:32px;padding:0 10px;
  border:1px solid var(--v23-line-strong, #334154);
  border-radius:8px;background:none;cursor:pointer;
  font-family:inherit;font-size:11.5px;font-weight:700;letter-spacing:-.02em;
  color:var(--v23-soft, #667284);white-space:nowrap;
  transition:color .15s, border-color .15s, background-color .15s;
}
.rc-mini:hover{color:var(--v23-text, #f4f6f9);border-color:var(--v23-accent, #ff4f7d)}
.rc-mini.is-on{
  color:#fff;border-color:var(--v23-accent, #ff4f7d);
  background:color-mix(in srgb, var(--v23-accent, #ff4f7d) 22%, transparent);
}
@media (max-width:860px){
  .rc-mini{font-size:11px;padding:0 8px}
}

/* ── 인트로 덮개 ──────────────────────────────────────────────── */
.rc-intro{
  position:absolute;inset:0;z-index:40;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 18% 6%, #262a5e 0%, rgba(38,42,94,0) 62%),
    radial-gradient(110% 80% at 86% 92%, #4a1f52 0%, rgba(74,31,82,0) 58%),
    linear-gradient(160deg, #0b0f21 0%, #10142c 46%, #1a1030 100%);
  opacity:0;
  transition:opacity .36s ease;
}
.rc-intro[hidden]{display:none}
.rc-intro.is-playing{opacity:1}
.rc-intro.is-leaving{opacity:0;transition:opacity .4s ease}

/* 비스듬히 지나가는 빛줄기 */
.rc-intro-sky{position:absolute;inset:-20%;pointer-events:none}
.rc-intro-sky s{
  position:absolute;top:-30%;height:160%;width:1px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.5), rgba(255,255,255,0));
  transform:rotate(18deg) translateY(-40%);
  opacity:0;
}
.rc-intro-sky s:nth-child(1){left:22%}
.rc-intro-sky s:nth-child(2){left:44%;width:2px}
.rc-intro-sky s:nth-child(3){left:67%}
.rc-intro-sky s:nth-child(4){left:83%;width:2px}
.rc-intro.is-playing .rc-intro-sky s{animation:rcSky 2.6s cubic-bezier(.2,.7,.3,1) forwards}
.rc-intro.is-playing .rc-intro-sky s:nth-child(2){animation-delay:.16s}
.rc-intro.is-playing .rc-intro-sky s:nth-child(3){animation-delay:.32s}
.rc-intro.is-playing .rc-intro-sky s:nth-child(4){animation-delay:.48s}
@keyframes rcSky{
  0%  {opacity:0;   transform:rotate(18deg) translateY(-70%)}
  22% {opacity:.55}
  100%{opacity:0;   transform:rotate(18deg) translateY(45%)}
}

/* 아주 옅은 격자 */
.rc-intro-mesh{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(70% 60% at 50% 50%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 50%, #000 0%, transparent 78%);
}
.rc-intro.is-playing .rc-intro-mesh{animation:rcFadeIn .9s ease .15s forwards}
@keyframes rcFadeIn{to{opacity:1}}

/* 뒤에서 벌어지는 원 */
.rc-intro-ring{
  position:absolute;left:50%;top:50%;
  width:min(46vw,520px);aspect-ratio:1;
  margin:0;border-radius:50%;
  border:1px solid rgba(255,255,255,.17);
  transform:translate(-50%,-50%) scale(.3);
  opacity:0;pointer-events:none;
}
.rc-intro.is-playing .rc-intro-ring{animation:rcRing 3.1s cubic-bezier(.16,.8,.28,1) .25s forwards}
@keyframes rcRing{
  0%  {opacity:0;  transform:translate(-50%,-50%) scale(.3)}
  26% {opacity:.85}
  100%{opacity:0;  transform:translate(-50%,-50%) scale(1.5)}
}

/* 좌우 위쪽 글씨 */
.rc-intro-brand{
  position:absolute;left:clamp(18px,4vw,46px);top:clamp(18px,4vh,40px);
  font-size:11.5px;font-weight:700;letter-spacing:.26em;
  color:rgba(255,255,255,.52);text-transform:uppercase;
  opacity:0;
}
.rc-intro-brand i{font-style:normal;margin:0 8px;opacity:.5}
.rc-intro-brand b{color:rgba(255,255,255,.78);letter-spacing:.18em}
.rc-intro.is-playing .rc-intro-brand{animation:rcFadeIn .7s ease .2s forwards}

.rc-intro-skip{
  position:absolute;right:clamp(18px,4vw,46px);top:clamp(14px,3.4vh,34px);
  height:34px;padding:0 14px;
  border:1px solid rgba(255,255,255,.26);border-radius:999px;
  background:rgba(255,255,255,.05);cursor:pointer;
  font-family:inherit;font-size:12px;font-weight:700;letter-spacing:-.01em;
  color:rgba(255,255,255,.82);
  opacity:0;
  transition:background-color .15s, border-color .15s, color .15s;
}
.rc-intro-skip:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5);color:#fff}
.rc-intro.is-playing .rc-intro-skip{animation:rcFadeIn .6s ease .5s forwards}

/* 가운데 글자 */
.rc-intro-words{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  display:grid;justify-items:start;
  width:min(84vw,900px);
}
.rc-intro-words em{
  display:block;font-style:normal;line-height:1;
  letter-spacing:-.045em;white-space:nowrap;
}
.rc-intro-w1{
  font-size:clamp(56px,10.5vw,148px);font-weight:900;color:#fff;
  opacity:0;transform:translateX(-26%);
  text-shadow:0 10px 50px rgba(0,0,0,.45);
}
.rc-intro-w2{
  margin-top:clamp(6px,1.2vh,16px);
  align-self:end;justify-self:end;
  font-size:clamp(36px,6.6vw,92px);font-weight:800;
  color:var(--v23-accent, #ff4f7d);
  opacity:0;transform:translateY(42%);
}
.rc-intro-rule{
  display:block;height:2px;width:100%;margin-top:clamp(10px,2vh,22px);
  background:linear-gradient(90deg, var(--v23-accent, #ff4f7d), rgba(255,79,125,.12));
  transform:scaleX(0);transform-origin:left center;
}
.rc-intro.is-playing .rc-intro-w1{animation:rcSlideIn .62s cubic-bezier(.17,.84,.26,1) .40s forwards}
.rc-intro.is-playing .rc-intro-w2{animation:rcRiseIn .52s cubic-bezier(.17,.84,.26,1) 1.15s forwards}
.rc-intro.is-playing .rc-intro-rule{animation:rcDraw .72s cubic-bezier(.22,.8,.3,1) 1.50s forwards}
@keyframes rcSlideIn{to{opacity:1;transform:translateX(0)}}
@keyframes rcRiseIn {to{opacity:1;transform:translateY(0)}}
@keyframes rcDraw   {to{transform:scaleX(1)}}

.rc-intro-tag{
  position:absolute;right:clamp(18px,4vw,46px);bottom:clamp(20px,5vh,50px);
  font-size:clamp(12px,1.3vw,14px);font-weight:600;letter-spacing:-.01em;
  color:rgba(255,255,255,.6);
  opacity:0;transform:translateY(10px);
}
.rc-intro.is-playing .rc-intro-tag{animation:rcRiseIn .6s ease 1.90s forwards}

/* 마지막 — 전체가 살짝 밀려나며 물러납니다 */
.rc-intro.is-playing .rc-intro-words{animation:rcPullBack .62s cubic-bezier(.4,0,.7,.2) 3.40s forwards}
@keyframes rcPullBack{
  to{opacity:0;transform:translate(-50%,-50%) scale(1.08)}
}

/* ── 멤버가 한 명씩 올라옵니다 ────────────────────────────────── */
.rc-mx tbody tr.rc-row-wait{opacity:0}
.rc-mx tbody tr.rc-row-in{animation:rcRowIn .46s cubic-bezier(.17,.84,.26,1) both}
@keyframes rcRowIn{
  from{opacity:0;transform:translateY(16px)}
  to  {opacity:1;transform:translateY(0)}
}
/* 올라오는 순간에만 줄을 한 번 밝힙니다. 끝나면 흔적이 남지 않습니다. */
.rc-mx tbody tr.rc-row-in>th,
.rc-mx tbody tr.rc-row-in>td{animation:rcRowFlash .62s ease both}
@keyframes rcRowFlash{
  0%  {background-color:rgba(255,79,125,.16)}
  100%{background-color:transparent}
}

/* ── 찐드기 · VS 를 펼치는 버튼 ───────────────────────────────── */
.rc-group-more{border-style:dashed}
.rc-group-more s{
  text-decoration:none;font-weight:900;opacity:.6;margin-left:2px;
}
.rc-group-more:hover{border-color:#f0a73a;color:#eef2f7}
.rc-groups.is-unfolding .rc-group:nth-child(2){animation:rcChipIn .34s cubic-bezier(.17,.84,.26,1) .02s both}
.rc-groups.is-unfolding .rc-group:nth-child(3){animation:rcChipIn .34s cubic-bezier(.17,.84,.26,1) .14s both}
@keyframes rcChipIn{
  from{opacity:0;transform:translateX(-10px) scale(.94)}
  to  {opacity:1;transform:translateX(0) scale(1)}
}

/* ── 밝은 테마 ────────────────────────────────────────────────── */
html:not([data-theme="dark"]) .rc-mini{border-color:#cfd6e0;color:#616d7c}
html:not([data-theme="dark"]) .rc-mini:hover{color:#242b36;border-color:#ff4f7d}
html:not([data-theme="dark"]) .rc-mini.is-on{color:#fff;background:#ff4f7d;border-color:#ff4f7d}
/* 인트로는 밝은 테마에서도 어둡게 둡니다. 발표 화면이라 그래야 글자가 섭니다. */

/* ── 움직임을 줄여달라고 설정한 분께는 결과만 보여드립니다 ───── */
@media (prefers-reduced-motion:reduce){
  .rc-intro.is-playing .rc-intro-sky s,
  .rc-intro.is-playing .rc-intro-ring{animation:none;opacity:0}
  .rc-intro.is-playing .rc-intro-w1,
  .rc-intro.is-playing .rc-intro-w2,
  .rc-intro.is-playing .rc-intro-tag{animation:rcFadeIn .3s ease forwards;transform:none}
  .rc-intro.is-playing .rc-intro-rule{animation:none;transform:scaleX(1)}
  .rc-intro.is-playing .rc-intro-words{animation:none}
  .rc-mx tbody tr.rc-row-in{animation:rcFadeIn .2s ease both}
  .rc-mx tbody tr.rc-row-in>th,
  .rc-mx tbody tr.rc-row-in>td{animation:none}
  .rc-groups.is-unfolding .rc-group:nth-child(2),
  .rc-groups.is-unfolding .rc-group:nth-child(3){animation:none}
}

/* 인트로가 도는 동안에는 성적표를 아예 감춥니다.
   덮개가 서서히 들어오는 0.4초 사이에 표가 먼저 보이면
   "공개합니다" 라고 해놓고 이미 다 보여준 꼴이 됩니다. */
.rc-layer.is-intro .rc-scroll{visibility:hidden}

/* 좁은 화면 — 위쪽 글자와 건너뛰기 버튼이 서로 밀지 않게 */
@media (max-width:520px){
  .rc-intro-brand{font-size:10.5px;letter-spacing:.14em}
  .rc-intro-skip{height:30px;padding:0 11px;font-size:11px}
  .rc-intro-tag{left:clamp(18px,4vw,46px);text-align:right}
}

/* ══ [v2718] 배경음 · 효과음 · 볼륨 ═════════════════════════════════
   배경음과 효과음을 따로 끕니다. 볼륨 막대는 배경음만 움직입니다 —
   음악을 작게 틀어둔 채로도 "누가 올라왔는지" 신호는 들려야 합니다.
   =================================================================== */
.rc-sound{
  display:inline-flex;align-items:center;gap:6px;
  padding:0 6px;
  border:1px solid var(--v23-line, #263242);
  border-radius:10px;
}
.rc-vol{
  -webkit-appearance:none;appearance:none;
  width:84px;height:22px;margin:0;
  background:none;cursor:pointer;vertical-align:middle;
}
.rc-vol:disabled{opacity:.35;cursor:default}
.rc-vol::-webkit-slider-runnable-track{
  height:4px;border-radius:999px;
  background:var(--v23-line-strong, #334154);
}
.rc-vol::-moz-range-track{
  height:4px;border-radius:999px;
  background:var(--v23-line-strong, #334154);
}
.rc-vol::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:13px;height:13px;margin-top:-4.5px;border-radius:50%;
  background:var(--v23-accent, #ff4f7d);
  border:2px solid var(--v23-surface, #0f1520);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
}
.rc-vol::-moz-range-thumb{
  width:13px;height:13px;border-radius:50%;
  background:var(--v23-accent, #ff4f7d);
  border:2px solid var(--v23-surface, #0f1520);
}
.rc-vol:focus-visible{outline:2px solid var(--v23-accent, #ff4f7d);outline-offset:3px;border-radius:999px}
html:not([data-theme="dark"]) .rc-sound{border-color:#cfd6e0}
html:not([data-theme="dark"]) .rc-vol::-webkit-slider-runnable-track{background:#cfd6e0}
html:not([data-theme="dark"]) .rc-vol::-moz-range-track{background:#cfd6e0}
html:not([data-theme="dark"]) .rc-vol::-webkit-slider-thumb{border-color:#fff}
html:not([data-theme="dark"]) .rc-vol::-moz-range-thumb{border-color:#fff}
@media (max-width:860px){
  .rc-vol{width:64px}
  .rc-sound{gap:4px;padding:0 4px}
}

/* [v2719] 음원을 못 찾았을 때. 꺼진 것도 켜진 것도 아닌 상태라
   분홍(정상)과 회색(꺼짐) 어느 쪽으로도 보이면 안 됩니다. */
.rc-mini.is-warn{
  color:#ffd79a;border-color:#b5802f;
  background:rgba(181,128,47,.18);
}
html:not([data-theme="dark"]) .rc-mini.is-warn{
  color:#7a4e00;border-color:#d9a441;background:#fdf3e0;
}

/* ── 월간 점호 방송 달력 VOD 미리보기 ───────────────────────────────
   통계 상세 달력과 같은 동작: 방송한 날 hover → 썸네일/제목,
   항목 클릭 → SOOP 다시보기. 팝업은 body 직속이라 rc-fit 축소에 안 잘립니다. */
.rc-cal-day.is-on{
  cursor:pointer;
  transition:border-color .14s ease,box-shadow .14s ease,transform .14s ease;
}
.rc-cal-day.is-on:hover,
.rc-cal-day.is-on:focus-visible{
  border-color:#43c6a3;
  box-shadow:inset 3px 0 0 #43c6a3,0 0 0 1px rgba(67,198,163,.18);
  outline:none;
}
.rc-calpop{
  position:fixed;
  z-index:3200;
  width:min(390px,calc(100vw - 20px));
  padding:12px;
  border:1px solid #253044;
  border-radius:14px;
  background:#0d131d;
  box-shadow:0 18px 55px rgba(0,0,0,.42);
  color:#eef2f7;
  font-family:inherit;
}
.rc-calpop[hidden]{display:none}
.rc-calpop-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 2px 9px;
  border-bottom:1px solid #202a39;
  margin-bottom:8px;
}
.rc-calpop-head b{font-size:13px;font-weight:900}
.rc-calpop-head span{font-size:10.5px;font-weight:800;color:#8d98a8}
.rc-calpop ul{list-style:none;margin:0;padding:0;display:grid;gap:7px;max-height:min(430px,60vh);overflow:auto}
.rc-calpop-item{
  display:grid;
  grid-template-columns:132px minmax(0,1fr);
  gap:10px;
  align-items:center;
  min-height:74px;
  padding:7px;
  border:1px solid transparent;
  border-radius:10px;
  color:inherit;
  text-decoration:none;
  background:#111925;
  transition:.14s ease;
}
.rc-calpop-item[href]:hover{border-color:#334158;background:#162131;transform:translateY(-1px)}
.rc-calpop-item.is-disabled{opacity:.78;cursor:default}
.rc-calpop-thumb{
  position:relative;
  display:grid;
  width:132px;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:8px;
  background:linear-gradient(135deg,#1b2534,#111722);
}
.rc-calpop-thumb>*{grid-area:1/1}
.rc-calpop-thumb img{width:100%;height:100%;object-fit:cover;display:block;z-index:1}
.rc-calpop-thumb b{
  z-index:2;
  align-self:end;
  justify-self:start;
  margin:6px;
  padding:3px 6px;
  border-radius:999px;
  background:rgba(5,9,14,.78);
  color:#dce6f1;
  font-size:9px;
  font-weight:900;
  line-height:1;
  backdrop-filter:blur(4px);
}
.rc-calpop-body{display:grid;gap:5px;min-width:0;align-content:center}
.rc-calpop-body>b{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  color:#eef2f7;
  font-size:11.5px;
  font-weight:900;
  line-height:1.35;
  word-break:break-all;
}
.rc-calpop-body em{font-style:normal;color:#8996a8;font-size:10px;font-weight:700;line-height:1.35}
.rc-calpop-body .rc-calpop-nums{color:#ff648d;font-weight:900}
html:not([data-theme="dark"]) .rc-calpop{
  border-color:#dbe2eb;
  background:#fff;
  color:#17202d;
  box-shadow:0 18px 50px rgba(26,38,55,.18);
}
html:not([data-theme="dark"]) .rc-calpop-head{border-color:#e6ebf1}
html:not([data-theme="dark"]) .rc-calpop-head span{color:#778394}
html:not([data-theme="dark"]) .rc-calpop-item{background:#f7f9fc}
html:not([data-theme="dark"]) .rc-calpop-item[href]:hover{border-color:#cfd8e5;background:#f1f5fa}
html:not([data-theme="dark"]) .rc-calpop-body>b{color:#17202d}
html:not([data-theme="dark"]) .rc-calpop-body em{color:#6d7888}
@media (max-width:700px){
  .rc-calpop{display:none !important}
}

/* ===== poster-members.css ===== */
/* [v2600] poster-members.css — 포스터 참가 멤버
   ===================================================================
   포스터 카드 오른쪽 아래에 참가자 아바타를 얹고,
   관리 폼에는 도감 멤버를 고르는 줄을 만듭니다.

   왜 별도 파일인가
     포스터 스타일은 app.bundle.css 에 있고 v24-unify.css 가 그 위를
     덮습니다. 두 큰 파일을 건드리면 되돌리기가 어려워서, 새 규칙만
     따로 담아 css-bundle.json 의 tail 에 싣습니다.
     기능을 빼려면 이 파일 한 줄만 빼면 됩니다.

   색은 --v23-* / --ja-* 토큰을 그대로 빌려 라이트·다크를 함께 맞춥니다.
   =================================================================== */

.poster-card-people,
.poster-member-field{
  --pm-line:var(--v23-line, #dfe5ec);
  --pm-soft:var(--v23-surface-2, #f3f6fa);
  --pm-panel:var(--v23-surface, #fff);
  --pm-ink:var(--v23-text, #16202f);
  --pm-muted:var(--v23-muted, #7a8697);
  --pm-accent:var(--v23-accent, #e85c84);
}
html[data-theme="dark"] .poster-card-people,
html[data-theme="dark"] .poster-member-field{
  --pm-line:var(--ja-line, #263242);
  --pm-soft:var(--ja-surface-2, #131b27);
  --pm-panel:var(--ja-surface, #0f1520);
  --pm-ink:var(--ja-text, #f4f6f9);
  --pm-muted:var(--ja-muted, #8d98a8);
  --pm-accent:var(--ja-accent, #ff4f7d);
}

/* ── 카드 아래 참가자 줄 ──────────────────────────────────────────
   인원이 많으면 접지 않고 줄바꿈합니다. 누가 참가했는지가 요점이라
   "+3" 으로 숨기면 기능의 의미가 없어집니다. 푸터가 그만큼 높아집니다. */
/* 제목·날짜는 왼쪽, 참가자는 오른쪽.
   원래 오른쪽에 있던 ↗ 화살표를 빼고 그 자리를 참가자에게 줬습니다.
   (카드 전체가 링크라 화살표가 따로 알려주는 게 없었습니다.)

   바탕이 되는 .poster-card-footer 가 justify-content:space-between 이라
   두 덩어리가 알아서 양끝으로 갈립니다. 참가자가 여러 줄이 돼도
   제목이 가운데로 내려오지 않도록 위 기준으로 맞춥니다. */
.poster-archive-card .poster-card-footer{
  align-items:flex-start;
  gap:10px;
}
/* 한 줄에 다섯 명씩 오른쪽 끝을 맞춰 쌓입니다.
   인원이 많으면 "+3" 으로 접지 않고 줄을 늘립니다.
   누가 참가했는지가 이 기능의 요점이라 숨기면 의미가 없어서요. */
.poster-card-people{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-content:flex-start;
  gap:4px;
  flex:0 0 auto;
  max-width:140px;
}
.poster-person{
  display:block;
  width:24px;
  height:24px;
  border-radius:50%;
  overflow:hidden;
  border:1.5px solid var(--pm-panel, #fff);
  box-shadow:0 0 0 1px var(--pm-line, #dfe5ec);
  background:var(--pm-soft, #f3f6fa);
  transition:transform .14s ease;
}
.poster-person img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.poster-archive-card:hover .poster-person{transform:translateY(-1px)}

/* ── 관리 폼의 멤버 선택 ─────────────────────────────────────────── */
.poster-member-field{
  display:grid;
  gap:9px;
  padding:13px 14px 14px;
  border:1px solid var(--pm-line, #dfe5ec);
  border-radius:12px;
  background:var(--pm-soft, #f3f6fa);
}
.poster-member-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.poster-member-head b{
  display:block;
  color:var(--pm-ink, #16202f);
  font-size:12px;
  font-weight:850;
}
.poster-member-head small{
  display:block;
  margin-top:3px;
  color:var(--pm-muted, #7a8697);
  font-size:10px;
  line-height:1.5;
}
.poster-member-count{
  flex:0 0 auto;
  padding:3px 9px;
  border-radius:999px;
  background:var(--pm-panel, #fff);
  border:1px solid var(--pm-line, #dfe5ec);
  color:var(--pm-muted, #7a8697);
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
}
.poster-member-picker{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.poster-member-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px 4px 4px;
  border:1px solid var(--pm-line, #dfe5ec);
  border-radius:999px;
  background:var(--pm-panel, #fff);
  color:var(--pm-ink, #16202f);
  font-size:11.5px;
  font-weight:700;
  cursor:pointer;
  transition:border-color .14s ease, background .14s ease, color .14s ease;
}
.poster-member-chip img{
  width:22px;
  height:22px;
  border-radius:50%;
  object-fit:cover;
  background:var(--pm-soft, #f3f6fa);
}
.poster-member-chip:hover{border-color:var(--pm-accent, #e85c84)}
.poster-member-chip.is-on{
  border-color:var(--pm-accent, #e85c84);
  background:color-mix(in srgb, var(--pm-accent, #e85c84) 12%, var(--pm-panel, #fff));
  color:var(--pm-accent, #e85c84);
}
.poster-member-empty{
  margin:0;
  color:var(--pm-muted, #7a8697);
  font-size:11px;
}

@media (max-width:760px){
  .poster-person{width:22px;height:22px}
  .poster-card-people{max-width:108px}
  .poster-member-head{flex-direction:column;gap:6px}
}

@media (prefers-reduced-motion: reduce){
  .poster-person,.poster-member-chip{transition:none}
  .poster-archive-card:hover .poster-person{transform:none}
}

/* ===== hall-of-fame.css ===== */
/* [v2600] hall-of-fame.css — 명예의 전당 (도감 카드)
   ===================================================================
   분류마다 한 줄, 그 안에 1·2·3위 카드가 놓입니다.
   1위는 금테에 은은한 홀로그램, 2위 은테, 3위 동테.
   1위 카드만 조금 커서 시선이 먼저 갑니다.

   팝업이 아니라 통계 페이지의 화면 자체를 바꿉니다.
   위쪽 탭(.stats-view-tabs)으로 "방송 통계" 와 오갑니다.

   색은 --v23-* / --ja-* 를 빌려 라이트·다크를 함께 맞춥니다.

   되돌리기
     css-bundle.json 의 tail 에서 이 파일만 빼고 node build-css.mjs.
   =================================================================== */

.stats-view-tabs,
.hof-tip,
#page-stats .hof-view{
  --hof-line:var(--v23-line, #dfe5ec);
  --hof-soft:var(--v23-surface-2, #f3f6fa);
  --hof-panel:var(--v23-surface, #fff);
  --hof-ink:var(--v23-text, #16202f);
  --hof-muted:var(--v23-muted, #7a8697);
  --hof-accent:var(--v23-accent, #e85c84);
}
html[data-theme="dark"] .stats-view-tabs,
html[data-theme="dark"] .hof-tip,
html[data-theme="dark"] #page-stats .hof-view{
  --hof-line:var(--ja-line, #263242);
  --hof-soft:var(--ja-surface-2, #131b27);
  --hof-panel:var(--ja-surface, #0f1520);
  --hof-ink:var(--ja-text, #f4f6f9);
  --hof-muted:var(--ja-muted, #8d98a8);
  --hof-accent:var(--ja-accent, #ff4f7d);
}

/* ── 화면 전환 탭 ────────────────────────────────────────────────
   관리자 전용인 .stats-view-switcher 와 달리 누구에게나 보입니다. */
.stats-view-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:6px 0 16px;
}
.stats-view-tabs button{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:9px 17px;
  border:1px solid var(--hof-line, #dfe5ec);
  border-radius:999px;
  background:var(--hof-panel, #fff);
  color:var(--hof-muted, #7a8697);
  font-size:12.5px;
  font-weight:800;
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.stats-view-tabs button:hover{color:var(--hof-ink, #16202f)}
.stats-view-tabs button.is-on{
  border-color:#e8b63c;
  background:color-mix(in srgb, #e8b63c 12%, var(--hof-panel, #fff));
  color:var(--hof-ink, #16202f);
}

/* 명예의 전당을 보는 동안에는 방송 통계용 도구를 숨깁니다.
   (과거 기록 가져오기 · 통계 정상화 · 중간결산 등) */
#page-stats.is-hof .stats-view-switcher,
#page-stats.is-hof .stats-public-actions{display:none!important}

/* ── 명예의 전당 화면 ─────────────────────────────────────────────
   바깥에 큰 테두리를 하나 두르면 화면이 넓을 때 오른쪽이 텅 비어 보입니다.
   그래서 분류마다 하나씩 카드를 만들어 아래 멤버별 기록과 같은 결로 맞췄습니다. */
.hof-body{
  display:grid;
  gap:10px;
}

/* ── 분류 한 줄 ──────────────────────────────────────────────────── */
.hof-row{
  padding:14px 15px 15px;
  border:1px solid var(--hof-line, #dfe5ec);
  border-radius:14px;
  background:var(--hof-panel, #fff);
}
.hof-row-head h3{
  margin:0;
  color:var(--hof-ink, #16202f);
  font-size:15px;
  font-weight:850;
  letter-spacing:-.02em;
}
.hof-row-head p{
  margin:3px 0 0;
  color:var(--hof-muted, #7a8697);
  font-size:10.5px;
}
.hof-cards{
  display:flex;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:9px;
  margin-top:10px;
}
.hof-empty{
  margin:13px 0 0;
  padding:18px;
  border:1px dashed var(--hof-line, #dfe5ec);
  border-radius:13px;
  color:var(--hof-muted, #7a8697);
  font-size:11.5px;
  text-align:center;
}
.hof-empty-all{
  margin:0;
  padding:44px 18px;
  border:1px dashed var(--hof-line, #dfe5ec);
  border-radius:16px;
  background:var(--hof-panel, #fff);
  line-height:1.7;
}

/* ── 도감 카드 ───────────────────────────────────────────────────── */
.hof-card{
  --hof-frame:#c08457;
  --hof-glow:rgba(192, 132, 87, .3);
  position:relative;
  width:158px;
  padding:12px 11px 13px;
  border:2px solid var(--hof-frame);
  border-radius:16px;
  background:var(--hof-soft, #f3f6fa);
  box-shadow:0 8px 22px var(--hof-glow);
  overflow:hidden;
  isolation:isolate;
}
.hof-card.is-gold{--hof-frame:#e8b63c;--hof-glow:rgba(232, 182, 60, .42)}
.hof-card.is-silver{--hof-frame:#b3bdca;--hof-glow:rgba(179, 189, 202, .34)}
.hof-card.is-bronze{--hof-frame:#c08457;--hof-glow:rgba(192, 132, 87, .3)}

/* 1위만 크게. 줄의 아래쪽을 맞춰 두었으므로 위로 자랍니다. */
.hof-card.is-lead{width:184px;padding:14px 13px 15px}

/* 홀로그램. 금테에만 얹고, 움직임을 싫어하는 설정에서는 멈춥니다. */
.hof-card-sheen{
  position:absolute;
  inset:-40%;
  z-index:-1;
  opacity:0;
  background:linear-gradient(115deg,
    transparent 30%,
    rgba(255, 255, 255, .55) 44%,
    rgba(255, 233, 170, .5) 50%,
    rgba(255, 255, 255, .55) 56%,
    transparent 70%);
}
.hof-card.is-gold .hof-card-sheen{
  opacity:.5;
  animation:hofSheen 5.5s ease-in-out infinite;
}
html[data-theme="dark"] .hof-card.is-gold .hof-card-sheen{opacity:.3}
@keyframes hofSheen{
  0%,100%{transform:translateX(-32%)}
  50%{transform:translateX(32%)}
}

.hof-card-rank{
  display:flex;
  align-items:center;
  gap:4px;
  margin-bottom:7px;
}
.hof-medal{font-size:13px;line-height:1}
.hof-card-rank b{
  color:var(--hof-frame);
  font-size:13.5px;
  font-weight:900;
  letter-spacing:-.02em;
}
.hof-card-rank small{margin-left:1px;font-size:9.5px;font-weight:800}

.hof-card-photo{
  aspect-ratio:1/1;
  border-radius:12px;
  overflow:hidden;
  background:var(--hof-panel, #fff);
  border:1px solid var(--hof-line, #dfe5ec);
}
.hof-card-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.hof-card-body{margin-top:8px}
/* 이름 줄. 이름은 왼쪽, 동점자 배지는 오른쪽 끝입니다. */
.hof-card-namerow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:5px;
  min-width:0;
}
.hof-card-name{
  display:block;
  min-width:0;
  flex:1 1 auto;
  color:var(--hof-ink, #16202f);
  font-size:12.5px;
  font-weight:850;
  letter-spacing:-.02em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.hof-card.is-lead .hof-card-name{font-size:14px}
.hof-card-role{
  display:block;
  margin-top:2px;
  color:var(--hof-muted, #7a8697);
  font-size:9.5px;
  font-style:normal;
  font-weight:700;
  letter-spacing:.04em;
}
.hof-card-value{
  margin-top:6px;
  padding-top:6px;
  border-top:1px solid var(--hof-line, #dfe5ec);
  color:var(--hof-ink, #16202f);
  font-size:13.5px;
  font-weight:900;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;
}
.hof-card.is-lead .hof-card-value{font-size:16px}

/* 동점자 배지 — 같은 기록을 가진 사람이 더 있다는 표시입니다.
   기록 숫자와 헷갈리지 않게 테두리 달린 알약으로 확실히 떼어 둡니다.
   누르거나 마우스를 올리면 이름 말풍선이 열립니다. */
.hof-card-tied{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  margin:0;
  padding:1.5px 6px;
  border:1px solid var(--hof-frame, #b3bdca);
  border-radius:999px;
  background:transparent;
  color:var(--hof-frame, #b3bdca);
  font:inherit;
  font-size:9.5px;
  font-weight:900;
  line-height:1.35;
  letter-spacing:-.01em;
  white-space:nowrap;
  cursor:pointer;
  transition:background .14s ease, color .14s ease;
}
.hof-card-tied:hover,
.hof-card-tied:focus-visible,
.hof-card-tied.is-open{
  background:var(--hof-frame, #b3bdca);
  color:#10161f;
  outline:none;
}
.hof-card.is-lead .hof-card-tied{font-size:10.5px;padding:2px 7px}

/* 동점자 이름 말풍선. 카드가 overflow:hidden 이라 body 에 띄웁니다. */
.hof-tip{
  position:fixed;
  z-index:2147483000;
  max-width:220px;
  padding:9px 11px 10px;
  border:1px solid var(--hof-line, #dfe5ec);
  border-radius:11px;
  background:var(--hof-panel, #fff);
  box-shadow:0 12px 30px rgba(9, 14, 22, .28);
  color:var(--hof-ink, #16202f);
  pointer-events:none;
}
.hof-tip[hidden]{display:none}
.hof-tip-head{
  display:block;
  margin-bottom:5px;
  padding-bottom:5px;
  border-bottom:1px solid var(--hof-line, #dfe5ec);
  font-size:10px;
  font-weight:900;
  letter-spacing:.02em;
  color:var(--hof-muted, #7a8697);
}
.hof-tip-list{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:3px 5px;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:-.01em;
}
.hof-tip-list li{white-space:nowrap}
.hof-tip-list li+li::before{content:'·';margin-right:5px;opacity:.45}

.hof-card-no{
  position:absolute;
  right:11px;
  bottom:10px;
  color:var(--hof-frame);
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
  opacity:.72;
}

/* ── 모바일 ──────────────────────────────────────────────────────── */
@media (max-width:760px){
  .stats-view-tabs button{flex:1 1 auto;justify-content:center;padding:9px 12px}
  .hof-row{padding:14px 13px 15px;border-radius:13px}
  .hof-body{gap:11px}
  .hof-cards{gap:10px}
  .hof-card{width:calc(50% - 5px);padding:11px 10px 12px}
  .hof-card.is-lead{width:100%;padding:14px 13px 15px}
  .hof-card.is-lead .hof-card-photo{max-width:190px}
}

@media (prefers-reduced-motion: reduce){
  .stats-view-tabs button{transition:none}
  .hof-card.is-gold .hof-card-sheen{animation:none}
}

/* ── 기간 고르기 ──────────────────────────────────────────────────
   통산 / 상반기 / 하반기. 분류 카드들 위에 한 줄로 놓습니다. */
.hof-periods{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:2px;
}
.hof-periods button{
  padding:7px 14px;
  border:1px solid var(--hof-line, #dfe5ec);
  border-radius:10px;
  background:var(--hof-panel, #fff);
  color:var(--hof-muted, #7a8697);
  font-size:11.5px;
  font-weight:800;
  cursor:pointer;
  transition:border-color .14s ease, color .14s ease, background .14s ease;
}
.hof-periods button:hover{color:var(--hof-ink, #16202f)}
.hof-periods button.is-on{
  border-color:#e8b63c;
  background:color-mix(in srgb, #e8b63c 14%, var(--hof-panel, #fff));
  color:var(--hof-ink, #16202f);
}
@media (prefers-reduced-motion: reduce){
  .hof-periods button{transition:none}
}

/* ── 넓은 화면: 세 분류를 나란히 ──────────────────────────────────
   세로로 쌓으면 3분류만으로도 화면을 넘겨서 스크롤이 생겼습니다.
   그런데 정작 오른쪽 절반은 비어 있었습니다.
   가로를 쓰면 스크롤 없이 한 화면에 들어갑니다.

   카드는 고정 폭 대신 칸을 나눠 가지므로 창 크기에 따라 같이 줄어듭니다.
   1위 칸을 조금 넓게 줘서 "1위가 크다"는 느낌은 그대로 남깁니다.
   동점으로 카드가 4장이 되면 네 번째는 아랫줄로 넘어갑니다. */
@media (min-width:1100px){
  .hof-body{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    align-items:start;
    gap:12px;
  }
  /* 기간 줄은 세 칸을 가로질러 위에 놓습니다. */
  .hof-periods{grid-column:1 / -1}

  /* 제목 줄을 줄여 전당이 시작하는 자리를 위로 올립니다.
     (방송 통계 화면은 그대로 두고 전당에서만 좁힙니다.) */
  #page-stats.is-hof .v23-page-intro{margin-bottom:2px}
  #page-stats.is-hof .v23-page-intro h1{font-size:26px;margin:2px 0 0}
  #page-stats.is-hof .v23-page-intro p{margin-top:4px}
  #page-stats.is-hof .stats-view-tabs{margin:4px 0 10px}

  .hof-row{display:flex;flex-direction:column}
  /* 칸을 나눠 갖는 가로 배치.
     동점으로 카드가 4장이 돼도 아랫줄로 넘어가지 않고 폭만 나눠 갖습니다.
     예전에는 3칸 격자여서 4장째가 줄바꿈되며 그 분류만 두 배로 길어졌고,
     그것 때문에 화면을 넘겼습니다. */
  .hof-cards{
    display:flex;
    flex-wrap:nowrap;
    align-items:flex-end;
    gap:7px;
  }
  .hof-card{
    flex:1 1 0;
    width:auto;
    min-width:0;
    /* 화면이 아주 넓어도 카드가 무한정 커지지 않게 상한을 둡니다.
       사진이 정사각형이라 폭이 커지면 높이도 같이 커져서
       결국 화면을 넘기게 됩니다. */
    max-width:168px;
    padding:10px 9px 11px;
  }
  /* 1위는 조금 더 넓게 가져가 시선이 먼저 가게 합니다. */
  .hof-card.is-lead{flex:1.22 1 0;width:auto;max-width:198px;padding:12px 11px 13px}
  .hof-card-no{right:8px;bottom:8px}
  .hof-empty{padding:20px 12px}

  /* 통계 페이지에는 화면이 덜컥거리지 않도록 min-height 가 걸려 있습니다.
     내용이 짧은 명예의 전당에서는 그게 빈 공간으로 남아 스크롤을 만듭니다. */
  #page-stats.is-hof{min-height:0!important;padding-bottom:18px!important}
}

/* 아주 넓은 화면에서는 카드가 너무 커지지 않게 살짝 여유만 줍니다. */
@media (min-width:1500px){
  .hof-card{padding:12px 11px 13px}
  .hof-card.is-lead{padding:14px 13px 15px}
}

/* ===== member-finder.css ===== */
/* member-finder.css — 멤버 검색·정렬·중복 표시
   ------------------------------------------------------------------
   「참여 멤버 선택」과 「스트리머 DB 관리」가 같은 구성요소를 씁니다.
   두 화면의 배경색이 달라서 색은 전부 기존 변수에 기대고,
   없을 때를 대비해 폴백 값을 같이 적어둡니다. */

.member-finder{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin:0 0 14px;padding:12px;
  border:1px solid var(--line,#283148);border-radius:14px;
  background:var(--panel-2,rgba(255,255,255,.03));
}

.member-finder-search{position:relative;flex:1 1 220px;min-width:180px;display:block}
.member-finder-search input{
  width:100%;box-sizing:border-box;
  padding:9px 34px 9px 12px;
  border:1px solid var(--line,#283148);border-radius:10px;
  background:var(--bg,#0b0f18);color:inherit;
  font:inherit;font-size:14px;
}
.member-finder-search input:focus{outline:2px solid var(--accent,#7ee5a1);outline-offset:1px}
.member-finder-search input::-webkit-search-cancel-button{display:none}
.member-finder-search button{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:24px;height:24px;line-height:1;
  border:0;border-radius:50%;cursor:pointer;
  background:var(--line,#283148);color:inherit;font-size:15px;
}

.member-finder-sort{display:flex;gap:4px;flex:0 0 auto}
.member-finder-sort button{
  padding:8px 12px;font-size:13px;white-space:nowrap;
  border:1px solid var(--line,#283148);border-radius:9px;
  background:transparent;color:var(--muted,#8b94a8);cursor:pointer;
}
.member-finder-sort button:hover{color:inherit}
.member-finder-sort button.active{
  border-color:var(--accent,#7ee5a1);
  background:color-mix(in srgb,var(--accent,#7ee5a1) 16%,transparent);
  color:var(--accent,#7ee5a1);font-weight:700;
}

.member-finder-meta{
  display:flex;align-items:center;gap:8px;
  flex:1 1 100%;font-size:12px;color:var(--muted,#8b94a8);
}
.member-finder-meta em{font-style:normal;opacity:.65}
.member-finder-dupe{
  padding:5px 10px;font-size:12px;cursor:pointer;
  border:1px solid #d9a441;border-radius:999px;
  background:rgba(217,164,65,.12);color:#e6b860;
}
.member-finder-dupe.active{background:#d9a441;color:#171205;font-weight:700}

/* 그리드 안에 들어가면 칸 하나 크기로 쪼그라들어서, 전체 폭을 쓰게 합니다. */
.member-finder-empty{
  grid-column:1/-1;
  margin:18px 0;padding:22px;text-align:center;
  font-size:13px;color:var(--muted,#8b94a8);
  border:1px dashed var(--line,#283148);border-radius:12px;
}

/* 고른 멤버는 목록 위에 따로 붙여둡니다. 몇 명 골랐는지 놓치지 않도록. */
.member-chosen-head{
  margin:0 0 8px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted,#8b94a8);
}
.member-chosen-row{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;
  margin:0 0 16px;padding:0 0 16px;
  border-bottom:1px solid var(--line,#283148);
}

/* 중복 의심 표식 */
.member-dupe-flag{
  display:inline-block;margin-left:5px;padding:1px 6px;
  border-radius:999px;background:#d9a441;color:#171205;
  font-size:10px;font-style:normal;font-weight:700;line-height:1.6;vertical-align:middle;
}
.member-option{position:relative}
.member-option .member-dupe-flag{position:absolute;top:5px;right:5px;margin:0}
.member-option.has-dupe,.member-admin-row.has-dupe{box-shadow:inset 0 0 0 1px #d9a441}

.member-dupe-report{
  margin:0 0 14px;padding:12px 14px;
  border:1px solid #d9a441;border-radius:14px;
  background:rgba(217,164,65,.08);
}
.member-dupe-report summary{cursor:pointer;font-weight:700;color:#e6b860}
.member-dupe-note{margin:10px 0 14px;font-size:12px;line-height:1.7;color:var(--muted,#8b94a8)}
.member-dupe-group{margin:0 0 14px}
.member-dupe-group>b{display:block;margin:0 0 7px;font-size:12px;color:#e6b860}
.member-dupe-members{display:flex;flex-wrap:wrap;gap:8px}
.member-dupe-chip{
  display:flex;align-items:center;gap:8px;
  padding:7px 12px 7px 7px;text-align:left;cursor:pointer;
  border:1px solid var(--line,#283148);border-radius:999px;
  background:var(--bg,#0b0f18);color:inherit;
}
.member-dupe-chip:hover{border-color:#d9a441}
.member-dupe-chip img{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.member-dupe-chip span{font-size:13px;font-weight:600}
.member-dupe-chip small{font-size:11px;color:var(--muted,#8b94a8)}

@media (max-width:560px){
  .member-finder{gap:8px;padding:10px}
  .member-finder-sort{flex:1 1 100%}
  .member-finder-sort button{flex:1;padding:8px 6px;font-size:12px}
  .member-dupe-chip{width:100%;border-radius:12px}
}

/* 방송 기록을 아직 못 받아왔을 때.
   0 으로 채운 화면을 보여주면 "기록이 없다" 는 잘못된 사실로 읽혀서,
   빈 값 대신 불러오는 중이라고 분명히 말합니다. */
.ct-stats-loading{display:grid;place-items:center;min-height:320px}
.ct-stats-loading-box{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:40px 28px;text-align:center;
  border:1px dashed var(--line,#283148);border-radius:16px;
}
.ct-stats-loading-box strong{font-size:15px}
.ct-stats-loading-box small{font-size:12px;color:var(--muted,#8b94a8)}
.ct-stats-spinner{
  width:26px;height:26px;border-radius:50%;
  border:2px solid var(--line,#283148);
  border-top-color:var(--accent,#7ee5a1);
  animation:ct-stats-spin .8s linear infinite;
}
@keyframes ct-stats-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ct-stats-spinner{animation-duration:2.4s}}

/* ===== 날짜 상세: 같은 날 일정 칩 + 「오늘 방송」 글 =====
   하루에 방송이 여러 개인 날 모달을 닫지 않고 오갈 수 있게 합니다.
   일정이 하나뿐인 날은 JS 가 hidden 처리해서 아래 규칙이 아예 안 보입니다. */
.event-popover-dayhead{display:flex;flex-direction:column;gap:2px;margin:0 0 12px}
.event-popover-dayhead span{font-size:11.5px;letter-spacing:.08em;color:var(--muted,#8b94a8)}
.event-popover-dayhead b{font-size:17px;font-weight:800}
.event-popover-chips{
  display:flex;gap:6px;flex-wrap:wrap;align-items:center;
  margin:0 0 16px;padding:0 0 14px;
  border-bottom:1px solid var(--line,#283148);
}
.event-popover-chips .day-chip{
  display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  max-width:150px;padding:7px 12px;cursor:pointer;font:inherit;text-align:left;
  border:1px solid var(--line,#283148);border-radius:11px;
  background:transparent;color:var(--muted,#8b94a8);
}
.event-popover-chips .day-chip b{
  max-width:126px;font-size:12.5px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.event-popover-chips .day-chip small{font-size:10.5px;opacity:.8}
.event-popover-chips .day-chip:hover{color:inherit}
.event-popover-chips .day-chip.on{
  border-color:var(--chip);color:var(--chip);
  background:color-mix(in srgb,var(--chip) 18%,transparent);
}
.day-chip-count{margin-left:auto;font-size:11px;color:var(--muted,#8b94a8)}

.day-notice{margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--line,#283148)}
.day-notice-label{
  display:flex;align-items:center;gap:7px;margin:0 0 9px;
  font-size:11px;letter-spacing:.08em;color:var(--muted,#8b94a8);
}
.day-notice-label i{
  padding:2px 7px;border-radius:999px;font-size:10px;font-weight:700;
  font-style:normal;letter-spacing:0;
  background:color-mix(in srgb,var(--accent,#7ee5a1) 18%,transparent);color:var(--accent,#7ee5a1);
}
.day-notice .np{
  display:flex;gap:10px;align-items:flex-start;
  margin:0 0 7px;padding:11px 13px;
  border:1px solid var(--line,#283148);border-radius:12px;
  background:color-mix(in srgb,var(--line,#283148) 22%,transparent);
}
.day-notice .np:last-child{margin-bottom:0}
.day-notice .np img{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.day-notice .np-main{flex:1;min-width:0}
.day-notice .np-main b{display:block;margin:0 0 3px;font-size:13px;line-height:1.5}
.day-notice .np-main small{font-size:11px;color:var(--muted,#8b94a8)}
.day-notice .np-go{
  flex:0 0 auto;align-self:center;padding:5px 9px;
  font-size:11px;text-decoration:none;color:var(--muted,#8b94a8);
  border:1px solid var(--line,#283148);border-radius:8px;
}
.day-notice .np-go:hover{color:inherit}

@media (max-width:560px){
  .event-popover-chips .day-chip{flex:1 1 calc(50% - 6px);max-width:none}
  .event-popover-chips .day-chip b{max-width:none}
  .day-notice .np{flex-wrap:wrap}
  .day-notice .np-go{width:100%;text-align:center}
}

/* ===== vod-archive.css ===== */
/* [v2501] vod-archive.css — 다시보기 페이지 카드/띠 개편
   ===================================================================
   왜 클래스 이름을 새로 만들었나

   기존 .vod-library-card 계열은 app.bundle.css → v24-unify.css 를 거치며
   거의 모든 속성이 !important 로 잠겨 있습니다. (app.core.css 16624줄 부근)
   거기에 덮어쓰려면 같은 선택자에 !important 를 또 쌓아야 하는데,
   그러면 예전 규칙이 살아 있는지 죽었는지 아무도 알 수 없게 됩니다.

   그래서 카드는 .vod-card2 로 이름을 갈아서 충돌 자체를 없앴습니다.
   예전 .vod-library-card 규칙은 그대로 두되, 그 이름을 쓰는 곳이 없어졌습니다.
   되돌리고 싶으면 app.js 의 vodCard() 만 예전 것으로 바꾸면 됩니다.

   격자(.vod-library-grid)와 멤버 줄(.vod-member-row)은 이름을 그대로 씁니다.
   격자는 이미 4열이라 손댈 게 없고, 멤버 줄은 !important 가 없어서
   이 파일이 tail 맨 뒤에 있는 것만으로 덮입니다.
   =================================================================== */

/* ── LATEST HIGHLIGHT 띠 접기 ───────────────────────────────────
   app.js 에서 renderVodHero(null) 로 section.hidden=true 를 걸지만,
   그것만으로는 안 숨겨집니다. app.core.css 16466줄의
     #page-vod .vod-hero{display:grid!important}
   가 브라우저 기본 [hidden]{display:none} 을 이기기 때문입니다.
   (원래도 VOD 가 하나도 없을 때 빈 띠가 남는 버그였습니다.)                */
#page-vod .vod-hero[hidden]{display:none!important}

/* ── 본문 2단: 왼쪽 영상, 오른쪽 멤버 ──────────────────────── */
#page-vod .vod-split{
  display:grid;
  grid-template-columns:minmax(0,1fr) 214px;
  gap:22px;
  align-items:start;
}
#page-vod .vod-main{min-width:0}

#page-vod .vod-rail-label{
  display:block;
  margin:0 0 9px;
  color:var(--v23-muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
}

/* ── 오른쪽 멤버 칸 ───────────────────────────────────────── */
#page-vod .vod-side{
  position:sticky;
  top:16px;
  padding-left:18px;
  border-left:1px solid var(--v23-line);
}
#page-vod .vod-side[hidden]{display:none}
#page-vod .vod-side .vod-member-row{
  display:flex;
  flex-direction:column;
  gap:5px;
}
/* 칩이 아니라 한 줄짜리 항목이 됩니다. 기존 .vod-chip-row 모양을 여기서 덮어씁니다. */
#page-vod .vod-side .vod-member-row button{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  padding:6px 11px 6px 6px;
  border:1px solid var(--v23-line);
  border-radius:999px;
  background:transparent;
  color:var(--v23-muted);
  font:inherit;
  font-size:12.5px;
  text-align:left;
  cursor:pointer;
}
#page-vod .vod-side .vod-member-row button img{
  width:24px;
  height:24px;
  flex:none;
  border-radius:50%;
  object-fit:cover;
  display:block;
}
#page-vod .vod-side .vod-member-row button>span{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:700;
}
#page-vod .vod-side .vod-member-row button>i{
  flex:none;
  margin-left:auto;
  font-style:normal;
  font-size:10.5px;
  font-weight:800;
  padding:2px 7px;
  border-radius:999px;
  background:color-mix(in srgb,var(--v23-surface-2) 70%,transparent);
  font-variant-numeric:tabular-nums;
}
#page-vod .vod-side .vod-member-row button.active{
  border-color:var(--v23-accent);
  background:var(--v23-accent);
  color:#fff;
}
#page-vod .vod-side .vod-member-row button.active>i{background:rgba(255,255,255,.26)}
#page-vod .vod-member-more{
  width:100%;
  margin-top:8px;
  padding:7px 0;
  border:0;
  border-top:1px solid var(--v23-line);
  background:transparent;
  color:var(--v23-muted);
  font:inherit;
  font-size:11.5px;
  font-weight:700;
  cursor:pointer;
}
#page-vod .vod-member-more[hidden]{display:none}
#page-vod .vod-member-more:hover{color:var(--v23-accent)}

/* ── 검색·필터 한 덩어리로 접기 ─────────────────────────────── */
#page-vod .vod-filter-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 14px;
  padding:9px 15px 9px 13px;
  border:1px solid var(--v23-line);
  border-radius:999px;
  background:color-mix(in srgb,var(--v23-surface) 96%,transparent);
  color:var(--v23-muted);
  font:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}
#page-vod .vod-filter-toggle:hover{
  border-color:color-mix(in srgb,var(--v23-accent) 40%,var(--v23-line));
  color:var(--v23-text);
}
#page-vod .vod-filter-toggle svg{
  width:16px;
  height:16px;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:2.3;
  stroke-linecap:round;
}
#page-vod .vod-filter-toggle>i{
  font-style:normal;
  font-size:11px;
  font-weight:800;
  min-width:18px;
  padding:1px 6px;
  border-radius:999px;
  background:var(--v23-accent);
  color:#fff;
  text-align:center;
}
#page-vod .vod-filter-toggle>i[hidden]{display:none}
/* ▾ 는 CSS 로 그립니다. 펼치면 뒤집힙니다. */
#page-vod .vod-filter-toggle>em{
  width:0;
  height:0;
  margin-left:2px;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid currentColor;
  transition:transform .16s ease;
}
#page-vod .vod-filter-toggle.open>em{transform:rotate(180deg)}
#page-vod .vod-filter-toggle.open,
#page-vod .vod-filter-toggle.has-filter{
  border-color:color-mix(in srgb,var(--v23-accent) 45%,var(--v23-line));
  color:var(--v23-text);
}

#page-vod .vod-toolbar[hidden]{display:none!important}
/* 원래는 grid 라 select 가 width:100% 로 깔려 있습니다.
   flex 로 바꾸면 그 100% 가 한 줄을 통째로 먹어서 여러 줄로 쪼개집니다. */
#page-vod .vod-toolbar{
  display:flex!important;
  align-items:center;
  flex-wrap:wrap;
  gap:10px!important;
}
#page-vod .vod-toolbar>select{
  flex:1 1 150px!important;
  width:auto!important;
  min-width:0!important;
  max-width:240px;
}
#page-vod .vod-toolbar .vod-search{
  flex:1 1 100%;
  width:auto!important;
  min-width:0;
  grid-column:auto!important;
}

/* 오른쪽 칸이 자리를 가져가므로 카드는 한 줄에 3장으로 줄입니다.
   (코어는 4장을 !important 로 박아둬서 여기서 덮습니다) */
#page-vod .vod-main .vod-library-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}

/* ── 카드 ───────────────────────────────────────────────────────
   세 줄만 둡니다. 셋 다 한 줄짜리라 카드 높이가 저절로 맞습니다.
     제목   16px / 700   한 줄, 넘치면 …
     태그   12px / 600   한 줄, 최대 3칸
     아랫줄 날짜 15px / 700  (왼쪽)  +  멤버 12.5px (오른쪽)
   썸네일 위에는 아무것도 얹지 않습니다.                              */
#page-vod .vod-card2{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--v23-line);
  border-radius:16px;
  background:color-mix(in srgb,var(--v23-surface) 98%,transparent);
  color:var(--v23-text);
  text-decoration:none;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
#page-vod .vod-card2:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--v23-accent) 34%,var(--v23-line));
  box-shadow:0 16px 30px color-mix(in srgb,var(--v23-accent) 9%,transparent);
}
#page-vod .vod-card2-thumb{
  position:relative;
  display:block;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--v23-surface-2);
}
#page-vod .vod-card2-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
#page-vod .vod-card2-thumb>b{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:var(--v23-muted);
  font-size:13px;
  font-weight:800;
  letter-spacing:.1em;
}
#page-vod .vod-card2-body{
  display:block;
  padding:15px 16px 16px;
}
#page-vod .vod-card2-title{
  display:block;
  margin:0 0 12px;
  color:var(--v23-text);
  font-size:16px;
  font-weight:700;
  line-height:1.4;
  letter-spacing:-.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#page-vod .vod-card2-tags{
  display:flex;
  flex-wrap:nowrap;
  gap:6px;
  overflow:hidden;
  margin:0 0 13px;
  min-height:25px;
}
#page-vod .vod-card2-tags i{
  flex:0 0 auto;
  padding:5px 12px;
  border:1px solid var(--v23-line);
  border-radius:999px;
  background:color-mix(in srgb,var(--v23-surface-2) 55%,transparent);
  color:var(--v23-muted);
  font-size:12px;
  font-style:normal;
  font-weight:600;
  line-height:1.3;
  letter-spacing:-.01em;
  white-space:nowrap;
}
#page-vod .vod-card2-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
#page-vod .vod-card2-date{
  color:var(--v23-text);
  font-size:15px;
  font-weight:700;
  letter-spacing:.01em;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
#page-vod .vod-card2-date s{
  margin-left:6px;
  color:var(--v23-muted);
  font-size:13.5px;
  font-weight:500;
  text-decoration:none;
}
#page-vod .vod-card2-who{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-width:0;
  overflow:hidden;
  color:var(--v23-muted);
  font-size:12.5px;
  font-weight:600;
  white-space:nowrap;
}
#page-vod .vod-card2-who img{
  width:19px;
  height:19px;
  flex:none;
  border-radius:50%;
  object-fit:cover;
  display:block;
}

/* ── 좁은 화면 ──────────────────────────────────────────────────
   예전 카드는 768px 아래에서 가로형(썸네일 왼쪽)으로 꺾였는데,
   그 규칙은 .vod-library-card 를 가리켜서 이제 걸리지 않습니다.
   세로형 그대로 한 줄에 한 장씩 둡니다. 썸네일이 커서 오히려 보기 낫습니다. */
/* ── 좁은 화면 ──────────────────────────────────────────────
   1180px 아래로는 오른쪽 칸을 접고 멤버를 가로 줄로 되돌립니다.
   세로 칸을 그대로 두면 카드가 들어갈 자리가 안 남습니다.            */
@media(max-width:1180px){
  #page-vod .vod-split{grid-template-columns:minmax(0,1fr)}
  #page-vod .vod-side{
    position:static;
    order:-1;                       /* 멤버를 영상 위로 */
    padding-left:0;
    margin:0 0 18px;
    border-left:0;
  }
  #page-vod .vod-side .vod-member-row{
    flex-direction:row;
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:4px;
  }
  #page-vod .vod-side .vod-member-row button{width:auto;flex:0 0 auto}
  #page-vod .vod-side .vod-member-row button>i{margin-left:0}
  #page-vod .vod-member-more{
    width:auto;
    margin-top:6px;
    padding:4px 0;
    border-top:0;
  }
}
@media(max-width:768px){
  #page-vod .vod-card2-body{padding:13px 14px 14px}
  #page-vod .vod-card2-title{font-size:15.5px;margin-bottom:11px}
  #page-vod .vod-card2-date{font-size:14.5px}
}

/* ===== calendar-fill.css ===== */
/* [v2503] calendar-fill.css — 라이트 캘린더: 일정 블록을 카테고리 색으로 채웁니다
   ===================================================================
   무엇을 바꾸나

   지금은 블록이 흰 바탕이고 카테고리 색이 1px 테두리에만 있습니다.
   한 달을 훑을 때 색이 눈에 안 잡혀서, 바탕을 그 색으로 채웁니다.

   왜 글씨는 검정인가 — 이게 핵심입니다.
   바탕을 색으로 채우면서 글씨까지 같은 색 계열로 쓰면 대비가 무너집니다.
   실제로 재보면 이렇습니다 (바탕 26% 틴트 기준):

     보라   #A3FF12 … 1.6:1      크루 #FFD54F … 1.8:1
     풀트뱅 #FFA500 … 2.2:1      게임 #16A34A … 3.2:1

   작은 글씨는 4.5:1 은 넘어야 편하게 읽히는데 거의 다 미달입니다.
   그래서 색은 바탕이 맡고 글씨는 #16191f 로 고정했습니다. 전부 11:1 을 넘깁니다.

   JS 는 건드리지 않았습니다. app.js 의 pill() 이 이미
   style="--event:…;--sub:…" 를 블록에 꽂아주고 있어서, 그 변수만 쓰면 됩니다.

   어두운 테마는 그대로 둡니다. 거기는 이미 색이 옅게 깔려 있고,
   선택자가 html[data-theme="dark"] 라 아래 규칙보다 우선순위가 높아 영향받지 않습니다.
   (아래를 html:not([data-theme="dark"]) 로 쓴 이유 — data-theme 이 없을 때도 라이트입니다)

   되돌리려면 css-bundle.json 의 tail 배열에서 이 파일 한 줄만 빼면 됩니다.
   =================================================================== */

html:not([data-theme="dark"]) #page-calendar .event-pill,
html:not([data-theme="dark"]) #page-calendar .day-summary-item,
html:not([data-theme="dark"]) #page-calendar .mobile-event-item{
  background:color-mix(in srgb,var(--event,var(--ja-accent)) 26%,#ffffff)!important;
  border:1px solid color-mix(in srgb,var(--event,var(--ja-accent)) 45%,#ffffff)!important;
  color:#16191f!important;
  box-shadow:none!important;
}
html:not([data-theme="dark"]) #page-calendar .event-pill:hover,
html:not([data-theme="dark"]) #page-calendar .day-summary-item:hover,
html:not([data-theme="dark"]) #page-calendar .mobile-event-item:hover{
  background:color-mix(in srgb,var(--event,var(--ja-accent)) 36%,#ffffff)!important;
  border-color:color-mix(in srgb,var(--event,var(--ja-accent)) 58%,#ffffff)!important;
}

/* 제목 — 카테고리와 무관하게 검정 */
html:not([data-theme="dark"]) #page-calendar .event-title,
html:not([data-theme="dark"]) #page-calendar .day-summary-item strong,
html:not([data-theme="dark"]) #page-calendar .mobile-event-item strong{
  color:#16191f!important;
}
/* 시간 — 같은 검정에 투명도만 낮춰서 제목 뒤로 물러나되 읽히게 */
html:not([data-theme="dark"]) #page-calendar .event-pill time,
html:not([data-theme="dark"]) #page-calendar .day-summary-time,
html:not([data-theme="dark"]) #page-calendar .mobile-event-item time{
  color:#16191f!important;
  opacity:.78;
  text-shadow:none!important;
}

/* 작은 카테고리 배지 — 채워진 바탕 위에서도 떠 보이게 흰 알약으로 */
html:not([data-theme="dark"]) #page-calendar .event-sub-badge,
html:not([data-theme="dark"]) #page-calendar .sub-category-badge{
  background:rgba(255,255,255,.9)!important;
  border:1px solid color-mix(in srgb,var(--sub,var(--ja-accent)) 42%,#ffffff)!important;
  color:color-mix(in srgb,var(--sub,var(--ja-accent)) 72%,#12151b)!important;
  text-shadow:none!important;
  box-shadow:none!important;
}

/* 관심 별 — 채워진 바탕 위에서 묻히지 않게 */
html:not([data-theme="dark"]) #page-calendar .event-pill .event-star{
  color:#16191f!important;
  opacity:.5;
}
html:not([data-theme="dark"]) #page-calendar .event-pill .event-star:hover{opacity:1}

/* ===== home-recent.css ===== */
/* [v2505] home-recent.css — 홈 「최근 영상」 세 칸
   ===================================================================
   칸이 3개가 되면서 격자만 맞춥니다.

   기존 규칙이 4열로 박혀 있습니다 (app.core.css, body.home-v23-page 접두사):
     #page-home .home-v23-vod-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
   그대로 두면 3칸만 차고 오른쪽 한 칸이 빈 채로 남습니다.
   선택자 깊이를 맞춰야 이깁니다 — #page-home .x 로는 밀립니다.

   되돌리려면 css-bundle.json 의 tail 에서 이 한 줄만 빼면 됩니다.
   =================================================================== */
body.home-v23-page #page-home .home-v23-vod-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
@media(max-width:900px){
  body.home-v23-page #page-home .home-v23-vod-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:560px){
  body.home-v23-page #page-home .home-v23-vod-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }
}

/* ===== home-sections.css ===== */
/* [v2706] home-sections.css — 홈 구역 레이아웃
   ===================================================================
   이 파일이 왜 따로인가

   지난번 홈 리뉴얼(home-renewal.css)은 여섯 군데를 한 번에 바꿔서
   화면이 깨졌을 때 어디가 원인인지 알 수가 없었습니다. 그래서 되돌렸습니다.
   이번에는 한 단계씩 넣고, 단계마다 실제로 렌더해서 눈으로 봅니다.

   되돌리려면 css-bundle.json 의 tail 에서 이 한 줄만 빼면 됩니다.
   원본 CSS 는 한 글자도 안 건드렸습니다. 마크업도 안 건드립니다.

   ── 여기까지 온 과정 (다음 사람을 위해) ──────────────────────────
   처음엔 01/02/03 을 좌우 번갈이(지그재그)로 만들었습니다. 그런데
   실제로 쓰고 보니 두 가지가 걸렸습니다.

     1) 넓은 화면에서 글 칸이 너무 넓어 제목만 덩그러니 남았습니다.
        2000px 에서 글 칸 714px 에 제목 하나뿐이었습니다.
     2) 라이브 카드를 칸 안에 맞추려다 보니 250px 로 묶이면서
        "현재 방송 중" 이 너무 작아 보였습니다.

   그래서 bugatti.com 처럼 「가운데 제목 + 아래 전체 폭」 으로 바꿨습니다.
   같은 2000px 에서 카드가 250px → 470px 이 됐습니다.
   04·05·06 구역이 원래 그 모양이라, 페이지 전체가 한 결로 읽힙니다.

   선택자 깊이 주의
     원본이 body.home-v23-page #page-home … !important (0,2,2,0) 라서
     같은 깊이로 맞추지 않으면 한 줄도 안 먹습니다. 처음에 한 단계
     얕게 썼다가 display:grid 가 통째로 무시됐고, 렌더해 보고서야
     알았습니다.
   =================================================================== */


/* ═══ 1단계 · 구역 제목을 가운데로 (04 멤버 / 05 최근 영상) ════════
   지금 구조는 이렇습니다.
     .home-v23-wide-head  (display:flex, space-between)
       ├─ div  ├─ span(눈표) ├─ h2(제목) └─ p(설명)
       └─ button 또는 .home-v23-head-actions
   flex 를 세로로 세우고 가운데 정렬하면 됩니다.
   ────────────────────────────────────────────────────────────── */

#page-home .home-v23-wide-head{
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  text-align:center;
  margin-bottom:clamp(26px,3.5vw,44px);
}
#page-home .home-v23-wide-head>div{
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:52ch;
}
/* 눈표에 짧은 선을 붙입니다. 가운데 정렬에서는 글자만 있으면 허전합니다. */
#page-home .home-v23-wide-head>div>span{
  display:inline-flex;
  align-items:center;
  gap:9px;
  letter-spacing:.2em;
}
#page-home .home-v23-wide-head>div>span::before,
#page-home .home-v23-wide-head>div>span::after{
  content:"";
  width:18px;
  height:1px;
  background:currentColor;
  opacity:.55;
  flex:none;
}
#page-home .home-v23-wide-head h2{
  font-size:clamp(23px,2.9vw,34px);
  letter-spacing:-.035em;
}
#page-home .home-v23-wide-head p{
  margin-top:11px;
  max-width:46ch;
  font-size:13px;
  line-height:1.75;
}
/* 「전체 보기 →」 를 제목 아래 가운데로.
   오른쪽 끝에 두면 가운데 제목과 축이 안 맞아 비뚤어 보입니다. */
#page-home .home-v23-wide-head>button,
#page-home .home-v23-wide-head>.home-v23-head-actions{
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
#page-home .home-v23-wide-head>button{
  padding:0 0 5px;
  border-bottom:1px solid currentColor;
  font-size:11px;
  letter-spacing:.08em;
}

/* 06 아카이브 블록의 글 묶음도 같은 규칙으로 */
#page-home .home-v23-archive-copy{text-align:center}
#page-home .home-v23-archive-copy>span{
  display:inline-flex;
  align-items:center;
  gap:9px;
  letter-spacing:.2em;
}
#page-home .home-v23-archive-copy>span::before,
#page-home .home-v23-archive-copy>span::after{
  content:"";
  width:18px;
  height:1px;
  background:currentColor;
  opacity:.55;
  flex:none;
}

/* 원래 규칙이 좁은 화면에서 설명문(p)을 숨깁니다. 가운데 정렬에서는
   제목만 덩그러니 남으면 더 허전해서 다시 보여줍니다. */
@media(max-width:720px){
  #page-home .home-v23-wide-head p{display:block;font-size:12.5px}
  #page-home .home-v23-wide-head{align-items:center}
}


/* ═══ 2단계 · 구역을 한 화면에 가두던 것 풀기 ══════════════════════
   무엇이 잘렸나

   홈은 「한 구역 = 한 화면」 으로 짜여 있었습니다.
     html.home-v23-snap { scroll-snap-type: y mandatory }
     .home-v23-scene    { scroll-snap-align:start; scroll-snap-stop:always }
     .home-v23-overview { min-height:100svh }

   mandatory 는 "반드시 구역 시작에 붙인다" 는 뜻이라, 구역이 화면보다
   길면 그 아래는 스크롤로 닿을 수가 없습니다. 가로 3칸이던 때는 한
   화면에 들어갔지만, 세로로 쌓으면서 넘쳐 02 가 잘렸습니다.

   실측 (1920×863)
     구역 높이 1833px · 화면 863px → 970px 넘침

   세 구역을 아무리 줄여도 일정·라이브·활동을 FHD 한 화면(여백 빼면
   711px)에 다 넣을 수는 없었습니다. 억지로 구겨넣는 대신 가둬두는
   쪽을 풀었습니다. 이제 페이지가 쭉 이어서 스크롤됩니다.

   ※ 스크롤하면 요소가 올라오며 나타나는 연출(jaHomeColumnIn)은
     그대로 둡니다. 잘림의 원인이 아니었고, 그건 보기 좋습니다.
   ────────────────────────────────────────────────────────────── */

@media (min-width:901px){
  html.home-v23-snap{scroll-snap-type:none!important}
  body.home-v23-page #page-home .home-v23-overview,
  body.home-v23-page #page-home .home-v23-members,
  body.home-v23-page #page-home .home-v23-vods{
    min-height:0!important;
  }
  body.home-v23-page #page-home .home-v23-scene{
    scroll-snap-align:none!important;
    scroll-snap-stop:normal!important;
  }
}


/* ═══ 3단계 · 01 / 02 / 03 도 같은 모양으로 ════════════════════════
   지금 구조는 이렇습니다.
     .home-v23-overview  (grid, 가로 3칸)
       ├─ article.home-v23-today     ├ header(눈표+제목+버튼) └ .home-v23-schedule-list
       ├─ article.home-v23-onair     ├ header                 └ .home-v23-onair-grid
       └─ article.home-v23-activity  ├ header                 └ .home-v23-activity-list

   세 칸을 나란히 놓으니 칸마다 좁아 내용이 눌렸고, 길이가 서로 달라
   빈 자리가 크게 남았습니다. 게다가 원본에 이런 줄이 있었습니다.

     min-height : clamp(500px,64svh,720px)   ← 1440px 창에서 720px 고정
     border / radius / background            ← 카드 테두리

   세 칸이 전부 720px 로 고정돼 있어서, 내용이 짧으면 그만큼이 그대로
   빈 자리가 됐습니다. 「똑같은 카드 세 개에 여백만 크다」가 이 한 줄이었습니다.

   그래서 가로 3칸을 세로 3구역으로 바꾸고, 구역마다
     가운데 눈표 · 제목 · 전체 보기
     그 아래 전체 폭 내용
   으로 둡니다. 04·05·06 과 같은 모양입니다. 마크업은 안 건드립니다.
   ────────────────────────────────────────────────────────────── */

/* 바깥 틀: 3칸 grid → 세로 쌓기.
   원본과 1180/1280/900px 미디어쿼리가 전부 grid-template-columns 로
   칸 수를 조절하는데, display:block 이면 그 줄들이 다 무력해집니다.
   (그래서 미디어쿼리를 하나하나 덮을 필요가 없습니다.) */
body.home-v23-page #page-home .home-v23-overview{
  display:block!important;
  grid-template-columns:none!important;
  border-top:1px solid var(--home-line)!important;
  border-bottom:1px solid var(--home-line)!important;
}

/* 구역 하나 */
body.home-v23-page #page-home .home-v23-overview>.home-v23-section{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:clamp(22px,2.4vh,36px);
  align-items:start;
  justify-items:center;
  min-height:0!important;
  padding:clamp(40px,4.8vh,82px) 0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  overflow:visible;
}
body.home-v23-page #page-home .home-v23-overview>.home-v23-section+.home-v23-section{
  border-top:1px solid var(--home-line)!important;
  border-left:0!important;
}

/* 머리: 가운데 정렬. 원래는 가로 flex(제목 ↔ 버튼)였습니다. */
body.home-v23-page #page-home .home-v23-overview>.home-v23-section>header{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  width:100%;
  margin-bottom:0!important;
  text-align:center;
}
body.home-v23-page #page-home .home-v23-overview>.home-v23-section>header>div{
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:52ch;
}
/* 눈표에 선 — 04·05 와 같은 모양 */
body.home-v23-page #page-home .home-v23-overview>.home-v23-section>header>div>span{
  display:inline-flex;
  align-items:center;
  gap:9px;
  letter-spacing:.2em;
}
body.home-v23-page #page-home .home-v23-overview>.home-v23-section>header>div>span::before,
body.home-v23-page #page-home .home-v23-overview>.home-v23-section>header>div>span::after{
  content:"";
  width:18px;
  height:1px;
  background:currentColor;
  opacity:.55;
  flex:none;
}
body.home-v23-page #page-home .home-v23-overview>.home-v23-section>header h2{
  font-size:clamp(26px,2.4vw,40px)!important;
  letter-spacing:-.035em;
  line-height:1.2;
}
body.home-v23-page #page-home .home-v23-overview>.home-v23-section>header>button{
  margin-top:14px;
  padding:0 0 5px;
  border-bottom:1px solid currentColor;
  font-size:11px;
  letter-spacing:.08em;
}

/* 내용: 제목 아래 전체 폭 */
body.home-v23-page #page-home .home-v23-overview>.home-v23-section>:not(header){
  width:100%;
}

/* 큰 숫자(01/02/03)는 뺍니다.
   원래는 칸 오른쪽 아래 구석에 4.5% 로 깔려 있었는데, 가운데 제목
   옆에 큰 숫자가 붙으면 축이 어긋나 보입니다. 번호는 눈표
   (01 / TODAY) 에 그대로 남아 있습니다. */
body.home-v23-page #page-home .home-v23-overview>.home-v23-section::after{
  content:none!important;
}

/* 라이브 카드: 전체 폭을 쓰고 크게.
   좁은 칸에 맞추느라 작던 것을 푸는 게 이번 변경의 핵심입니다.
   2000px 에서 카드 250px → 455px.

   칸 수를 auto-fit 으로 두지 않고 4칸·2칸으로 못박은 이유
     홈에 뜨는 라이브 카드는 최대 4장입니다(home-v23.js 의 slice(0,4)).
     auto-fit minmax(360px,1fr) 로 뒀더니 1440px 에서 3칸이 되면서
     넷째 장이 혼자 다음 줄로 떨어졌습니다. 4 또는 2 로 고정하면
     어떤 폭에서도 외톨이 줄이 안 생깁니다. */
body.home-v23-page #page-home .home-v23-overview .home-v23-onair-grid{
  width:100%!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:clamp(16px,1.4vw,26px)!important;
}

/* 최근 활동: 전체 폭이니 세 줄로 */
body.home-v23-page #page-home .home-v23-overview .home-v23-activity-list{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  column-gap:clamp(18px,2vw,34px)!important;
}

/* 오늘의 일정: 한 줄짜리 목록이라 전체 폭으로 늘리면 시각 점이 멀리
   떨어져 읽기 나쁩니다. 가운데로 모아 둡니다. */
body.home-v23-page #page-home .home-v23-overview .home-v23-schedule-list{
  max-width:980px;
  margin:0 auto;
}
/* 「오늘 일정이 없습니다」 같은 빈 안내문도 가운데로 */
body.home-v23-page #page-home .home-v23-overview .home-v23-empty{
  text-align:center;
}


/* ═══ 좁은 화면 ═══════════════════════════════════════════════════
   901px 밑에서는 원본이 이미 세로로 쌓고 카드 테두리도 없습니다
   (위에서 덮은 원본 규칙들이 통째로 @media (min-width:901px) 안입니다).
   여기서는 넓은 화면용으로 벌려둔 것만 되돌립니다. */
@media(max-width:900px){
  body.home-v23-page #page-home .home-v23-overview>.home-v23-section{
    padding:26px 0 30px!important;
    gap:16px;
  }
  body.home-v23-page #page-home .home-v23-overview .home-v23-activity-list{
    grid-template-columns:1fr!important;
  }
  body.home-v23-page #page-home .home-v23-overview .home-v23-onair-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:1280px) and (min-width:901px){
  body.home-v23-page #page-home .home-v23-overview .home-v23-activity-list{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.home-v23-page #page-home .home-v23-overview .home-v23-onair-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:620px){
  body.home-v23-page #page-home .home-v23-overview .home-v23-onair-grid{
    grid-template-columns:1fr!important;
  }
}


/* ═══ 4단계 · 구역을 흐리게 하던 것 끄기 ═══════════════════════════
   원본에 이런 규칙이 있습니다.

     .home-v23-scene[data-home-scene]:not(.is-current) > ...{
       opacity:.72;
       transform:translateY(10px) scale(.992);
     }

   「지금 보고 있는 구역만 선명하고 나머지는 흐리게」 입니다. 한 번에
   한 화면만 보이던 때는 맞는 연출이었지만, 쭉 이어서 스크롤하는
   지금은 화면에 두 구역이 같이 보이는 순간이 계속 생깁니다. 그때마다
   한쪽이 흐려졌다 선명해졌다 하면서 스크롤이 뚝뚝 끊겨 보입니다.

   그래서 전부 선명하게 둡니다. 처음 나타날 때 올라오며 뜨는 연출
   (jaHomeColumnIn, .is-visible)은 그대로 살아 있습니다.
   ────────────────────────────────────────────────────────────── */

body.home-v23-page #page-home .home-v23-scene[data-home-scene]:not(.is-current)>.home-v23-wide-head,
body.home-v23-page #page-home .home-v23-scene[data-home-scene]:not(.is-current)>.home-v23-member-carousel,
body.home-v23-page #page-home .home-v23-scene[data-home-scene]:not(.is-current)>.home-v23-member-pager,
body.home-v23-page #page-home .home-v23-scene[data-home-scene]:not(.is-current)>.home-v23-vod-grid,
body.home-v23-page #page-home .home-v23-scene[data-home-scene]:not(.is-current)>.home-v23-archive-compact{
  opacity:1!important;
  transform:none!important;
}

/* ===== home-hero.css ===== */
/* [v2707] home-hero.css — 히어로를 조용하게
   ===================================================================
   되돌리려면 css-bundle.json 의 tail 에서 이 한 줄만 빼면 됩니다.
   원본 CSS 는 한 글자도 안 건드렸습니다. 마크업도 안 건드립니다.

   바꾸는 것 다섯
     1) 영상을 키워 가장자리를 버리던 것 멈춤 (자막 잘림의 원인)
     2) 왼쪽 80% 검은 띠 그늘 → 위아래만 옅게, 노이즈 막 제거
     3) 스크롤 패럴랙스(확대·이동) 끄기
     4) 글: 설명을 한 줄로 줄이고 버튼을 하나만
     5) 조작 단추·LAST UPDATE·SCROLL 은 마우스를 올렸을 때만

   버튼 글자는 손대지 않습니다. home-v23.js 의 renderHero 가 이미
   방송 중이면 「▶ 라이브 보기」, 아니면 「SOOP 보기」로 바꿔 줍니다.
   =================================================================== */


/* ── 1. 영상을 꽉, 그러나 자르지 않고 ───────────────────────────
   원래 값
     .home-v23-video / .home-v23-poster : inset:-4% 0 0; height:108%
     .home-v23-youtube / .home-v23-soop : inset:-6% -4%; width:108%; height:112%
     거기에 scale(var(--hero-scale)) 가 1.025~1.06 으로 더 곱해집니다.

   1920px 화면에서 실제로 잘려 나가던 양
     좌우 각 102px · 위아래 각 70px   (스크롤 중에는 좌우 139px)

   가로로 버리는 몫은 패럴랙스와 아무 상관이 없습니다. 세로 이동
   52px 을 위한 여유만 남기고 나머지는 돌려줍니다. SOOP 자막·채팅이
   화면 가장자리에 뜨기 때문에 그게 제일 먼저 잘리고 있었습니다. */
#page-home .home-v23-video,
#page-home .home-v23-poster{
  inset:0!important;
  width:100%!important;
  height:100%!important;
}
#page-home .home-v23-youtube,
#page-home .home-v23-soop{
  inset:0!important;
  width:100%!important;
  height:100%!important;
}

/* ── 2. 스크롤 패럴랙스 끄기 ────────────────────────────────────
   home-v23.js 의 onScroll 이 스크롤 1px 마다 --hero-shift(0~52px)와
   --hero-scale(1.025~1.06)을 다시 씁니다. 그때마다 영상이 확대·이동
   하면서 다시 그려집니다. 스페이스X 가 부드러워 보이는 이유 중
   하나가 히어로가 가만히 있는 것입니다.
   JS 는 그대로 두고 결과만 무시합니다(변수는 계속 들어오지만
   transform 을 쓰지 않으므로 화면은 움직이지 않습니다). */
#page-home .home-v23-video,
#page-home .home-v23-poster,
#page-home .home-v23-youtube,
#page-home .home-v23-soop{
  transform:none!important;
  will-change:auto!important;
}

/* ── 3. 그늘 ────────────────────────────────────────────────────
   원래는 왼쪽에 80% 짜리 검은 띠가 가로로 통째로 깔려 있어서
   영상의 왼쪽 절반이 사실상 가려졌습니다. 글을 읽히게 하려던 건데,
   아래쪽만 어둡게 해도 글은 충분히 읽힙니다. */
#page-home .home-v23-video-shade{
  background:linear-gradient(180deg,
    rgba(4,5,8,.66) 0%,
    rgba(4,5,8,.42) 5%,
    rgba(4,5,8,.14) 13%,
    rgba(4,5,8,0) 38%,
    rgba(4,5,8,.30) 70%,
    rgba(4,5,8,.72) 100%)!important;
}
/* 위쪽 5% 를 따로 진하게 둔 이유
   헤더가 영상 위에 떠 있어서, 밝은 장면이 지나가면 흰 메뉴 글자가
   사라집니다. 라이트 모드에서 실제로 안 보였습니다.
   헤더 높이(62px)만 덮고 바로 옅어지도록 짧게 끊었습니다. */
/* 노이즈 막은 영상 위에 모래알을 뿌립니다. 뺍니다. */
#page-home .home-v23-video-noise{display:none!important}


/* ── 4. 글 ──────────────────────────────────────────────────────
   눈표(ARCHIVE / LIVE NOW) · 큰 제목 · 한 줄 설명 · 버튼 하나.
   설명문은 지우지 않았습니다. 「다음 일정 · 10월 5일 · … · D-1」
   같은 쓸모 있는 정보가 들어가는 자리라, 지우는 대신 한 줄로
   조용하게 줄였습니다. */
#page-home .home-v23-hero-copy>p{
  margin-top:14px!important;
  max-width:52ch!important;
  font-size:13px!important;
  line-height:1.6!important;
  color:rgba(255,255,255,.66)!important;
  display:-webkit-box!important;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
#page-home .home-v23-live-state{
  letter-spacing:.22em!important;
  font-weight:600!important;
  color:rgba(255,255,255,.82)!important;
}
#page-home .home-v23-hero h1{
  letter-spacing:-.03em!important;
  font-weight:800!important;
  text-shadow:0 6px 30px rgba(0,0,0,.34)!important;
}

/* 글 묶음을 바닥에서 조금 띄웁니다. 원래 52~64px 이라 버튼이
   화면 아래끝에 거의 붙어 있었습니다. */
#page-home .home-v23-hero-inner{
  padding-bottom:clamp(76px,8.5vh,112px)!important;
}

/* 버튼: 테두리만 있는 네모 하나.
   「오늘 일정」은 숨깁니다 — 바로 아래 01 구역이 오늘의 일정입니다. */
#page-home .home-v23-hero-actions{margin-top:30px!important}
#page-home .home-v23-secondary{display:none!important}
#page-home .home-v23-primary{
  height:46px!important;
  padding:0 22px!important;
  border:1px solid rgba(255,255,255,.72)!important;
  border-radius:0!important;
  background:transparent!important;
  color:#fff!important;
  box-shadow:none!important;
  font-size:11.5px!important;
  font-weight:600!important;
  letter-spacing:.14em!important;
  transition:background .2s ease,border-color .2s ease!important;
}
#page-home .home-v23-primary:hover{
  transform:none!important;
  background:rgba(255,255,255,.14)!important;
  border-color:#fff!important;
}
/* 화살표. 글자는 JS 가 넣으므로 가상 요소로 붙입니다.
   (선 하나에 그림자로 머리를 만들어 봤더니 머리가 안 그려져서
    SVG 로 바꿨습니다.) */
#page-home .home-v23-primary::after{
  content:"";
  width:18px;height:10px;
  margin-left:14px;
  flex:none;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h15.5M12.4 1.4 16.6 5l-4.2 3.6' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h15.5M12.4 1.4 16.6 5l-4.2 3.6' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat center/contain;
}


/* ── 5. 조작 단추는 올렸을 때만 ─────────────────────────────────
   LAST UPDATE · 음소거 · 정지 · CC · SCROLL 이 늘 떠 있으면
   영상 위가 번잡합니다. 히어로에 마우스를 올리면 나타납니다.
   키보드로 탭 이동할 때도 보이게 focus-within 을 같이 겁니다.
   손가락 화면(마우스 없는 기기)에서는 항상 보이게 둡니다. */
@media (hover:hover){
  #page-home .home-v23-hero-foot,
  #page-home .home-v23-scroll{
    opacity:0;
    transition:opacity .3s ease;
  }
  #page-home .home-v23-hero:hover .home-v23-hero-foot,
  #page-home .home-v23-hero:hover .home-v23-scroll,
  #page-home .home-v23-hero:focus-within .home-v23-hero-foot,
  #page-home .home-v23-hero:focus-within .home-v23-scroll{
    opacity:1;
  }
}
/* 조작 단추도 알약 → 네모로 맞춥니다. */
#page-home .home-v23-hero-controls button{
  border-radius:0!important;
  border-color:rgba(255,255,255,.3)!important;
  background:rgba(8,9,13,.3)!important;
  font-weight:600!important;
}


/* ── 6. 홈으로 들어올 때 흰 섬광 ────────────────────────────────
   다른 탭에서 홈을 누르면 화면이 한 번 희게 번쩍였습니다.

   원인
     .app-page{ animation: v8PageIn .36s … }
     @keyframes v8PageIn{ from{ opacity:0; transform:translateY(10px) } }

     페이지가 opacity 0 에서 1 로 떠오르는 동안 뒤가 비칩니다.
     그 뒤에 있는 것은 body 배경인데, 라이트 테마에서는 밝은 색
     (--light-bg) 입니다. 그래서 어두운 히어로가 선명해지기 전까지
     0.36초 동안 밝은 화면이 비쳐 섬광처럼 보입니다.
     다크 테마에서는 뒤도 어두워서 티가 안 납니다.

   왜 '배경을 어둡게' 가 아니라 '애니메이션을 끄기' 인가
     opacity 는 배경까지 같이 투명하게 만듭니다. #page-home 에 검은
     배경을 깔아도 중간 지점에서는 「반투명한 검정 + 밝은 body」가
     섞여 회색으로 번쩍입니다. 떠오르는 연출 자체를 빼야 사라집니다.

   홈만 끕니다. 다른 탭은 지금처럼 떠오릅니다. */
#page-home.app-page{
  animation:none!important;
}
/* 혹시 모를 한 프레임을 위해 히어로에 어두운 바닥을 깔아 둡니다. */
#page-home .home-v23-hero{
  background:#07080b!important;
}

/* ===== v23-header.css ===== */
/* [v2707] v23-header.css — 헤더를 조용하게
   ===================================================================
   되돌리려면 css-bundle.json 의 tail 에서 이 한 줄만 빼면 됩니다.
   원본 CSS 는 한 글자도 안 건드렸습니다. 마크업도 안 건드립니다.

   바꾸는 것 셋
     1) 메뉴를 가운데 → 로고 옆 왼쪽으로
     2) 분홍 알약 → 테두리만 있는 상자. 색은 방송 중일 때만 켜집니다.
     3) 현재 페이지 표시: 짧은 분홍 대시 → 글자 폭만큼의 1px 밑줄

   본문은 안 건드립니다. 배경·테두리·글자색 전부 지금 쓰는 테마 변수
   (--v23-text, --v23-line, --v23-accent …)를 그대로 씁니다. 그래서
   라이트/다크가 따로 손볼 것 없이 같이 따라옵니다.

   선택자 깊이 주의
     원본이 .v23-global-nav .v23-nav-tab.sidebar-tab{…!important} 이고
     1101px 이상에서는 body.v23-ui #… 로 한 겹 더 덮습니다.
     그래서 아래도 같은 깊이로 맞춰 둡니다.
   =================================================================== */


/* ── 1. 메뉴를 왼쪽으로 ──────────────────────────────────────────
   헤더는 3칸 격자입니다.  로고(168px) | 메뉴(1fr) | 오른쪽 버튼
   메뉴 칸은 그대로 두고 그 안에서 왼쪽 정렬로만 바꿉니다.
   칸 구조를 건드리면 1500/1240px 미디어쿼리를 전부 다시 맞춰야 합니다. */
@media (min-width:1101px){
  body.v23-ui .v23-global-header .v23-global-nav{
    justify-content:flex-start!important;
  }
  /* 로고와 첫 메뉴가 붙어 보이지 않게 숨 쉴 자리를 줍니다. */
  body.v23-ui .v23-global-header{
    column-gap:clamp(22px,2.4vw,46px)!important;
  }
}

/* ── 2. 메뉴 글자 ───────────────────────────────────────────────
   720 은 꽤 굵습니다. 600 으로 낮추고 자간을 조금 벌리면
   한글에서도 스페이스X 메뉴 같은 담백한 인상이 납니다. */
.v23-global-nav .v23-nav-tab.sidebar-tab{
  font-weight:600!important;
  letter-spacing:.035em!important;
  padding:0 clamp(9px,.82vw,15px)!important;
}

/* 현재 페이지 밑줄: 가운데 짧은 분홍 대시 → 글자 폭 1px 선.
   원본은 left:50%/right:50% 를 12px 로 좁히는 방식이라
   left/right 와 색·두께를 같이 덮어야 합니다. */
.v23-global-nav .v23-nav-tab.sidebar-tab::after{
  height:1px!important;
  background:currentColor!important;
  opacity:0;
  transition:left .18s ease,right .18s ease,opacity .18s ease!important;
}
.v23-global-nav .v23-nav-tab.sidebar-tab.active::after{
  left:clamp(9px,.82vw,15px)!important;
  right:clamp(9px,.82vw,15px)!important;
  opacity:1;
}


/* ── 3. 오른쪽 버튼들 ───────────────────────────────────────────
   알약(둥근 테두리 + 채운 배경) → 네모난 테두리 상자.
   분홍은 전부 빼고, 방송 중일 때만 되살립니다. */
.v23-global-header #themeToggle,
.v23-global-header .v23-soop-pill,
.v23-global-header .v23-guide-pill{
  height:34px!important;
  min-height:34px!important;
  padding:0 14px!important;
  border:1px solid color-mix(in srgb,var(--v23-text) 26%,transparent)!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--v23-text)!important;
  box-shadow:none!important;
  font-size:11px!important;
  font-weight:600!important;
  letter-spacing:.06em!important;
  transition:background .18s ease,border-color .18s ease!important;
}
.v23-global-header #themeToggle:hover,
.v23-global-header .v23-soop-pill:hover,
.v23-global-header .v23-guide-pill:hover{
  background:color-mix(in srgb,var(--v23-text) 8%,transparent)!important;
  border-color:color-mix(in srgb,var(--v23-text) 46%,transparent)!important;
}
/* 테마 단추는 글자가 짧아 더 얇게 */
.v23-global-header #themeToggle{
  border-color:var(--v23-line)!important;
  color:var(--v23-muted)!important;
}

/* SOOP 단추: 평소엔 조용한 상자, 방송 중이면 분홍 LIVE.
   「방송 중일 때만 색이 켜진다」가 이 두 줄입니다. */
.v23-global-header .v23-soop-pill i{
  width:5px!important;height:5px!important;
  background:var(--v23-muted)!important;
  box-shadow:none!important;
}
body.is-live .v23-global-header .v23-soop-pill{
  border-color:color-mix(in srgb,var(--v23-accent) 62%,transparent)!important;
  background:color-mix(in srgb,var(--v23-accent) 10%,transparent)!important;
  color:var(--v23-accent)!important;
}
body.is-live .v23-global-header .v23-soop-pill i{
  background:var(--v23-accent)!important;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--v23-accent) 16%,transparent)!important;
}

/* 「최근 갱신」은 글자만 남깁니다.
   원본에 background:transparent!important 가 있는데도 실제로는 회색
   칩이 깔려 있었습니다(계산된 값 rgb(24,34,49)). data-mode 별 규칙이
   뒤에서 다시 칠하고 있어서, 여기서 한 번 더 지웁니다. */
.v23-global-header .cloud-status,
.v23-global-header .cloud-status[data-mode]{
  border:0!important;
  background:transparent!important;
  font-size:10px!important;
  font-weight:600!important;
  letter-spacing:.02em!important;
  opacity:.8;
}


/* ── 4. 홈 히어로 위 ────────────────────────────────────────────
   영상 위에서는 배경 띠를 완전히 걷어내고 흰 글자만 남깁니다.
   (원본에도 home-v23-at-top 상태가 있어서 그 위에 얹습니다.) */
body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header{
  background:transparent!important;
  border-bottom-color:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header .v23-global-nav .v23-nav-tab.sidebar-tab{
  color:rgba(255,255,255,.74)!important;
}
body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header .v23-global-nav .v23-nav-tab.sidebar-tab:hover,
body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header .v23-global-nav .v23-nav-tab.sidebar-tab.active{
  color:#fff!important;
}
body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header #themeToggle,
body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header .v23-soop-pill,
body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header .v23-guide-pill{
  border-color:rgba(255,255,255,.4)!important;
  color:#fff!important;
}
body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header #themeToggle{
  border-color:rgba(255,255,255,.22)!important;
  color:rgba(255,255,255,.78)!important;
}
body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header #themeToggle:hover,
body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header .v23-soop-pill:hover,
body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header .v23-guide-pill:hover{
  background:rgba(255,255,255,.12)!important;
  border-color:rgba(255,255,255,.6)!important;
}
body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header .cloud-status{
  color:rgba(255,255,255,.6)!important;
}
body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header .v23-soop-pill i{
  background:rgba(255,255,255,.6)!important;
}


/* ── 좁은 화면 ──────────────────────────────────────────────────
   1100px 밑에서는 원본이 헤더를 flex 로 바꾸고 메뉴를 숨긴 뒤
   햄버거를 씁니다. 거기엔 손대지 않고, 버튼 모양만 따라가게 둡니다. */
@media (max-width:1100px){
  .v23-global-header #themeToggle,
  .v23-global-header .v23-soop-pill,
  .v23-global-header .v23-guide-pill{
    height:32px!important;
    min-height:32px!important;
    padding:0 11px!important;
  }
}


/* ── 5. 라이트 모드에서도 히어로 위는 투명하게 ──────────────────
   라이트 모드만 흰 띠가 남아 있었습니다. 원인은 선택자 깊이입니다.

     원본 : html[data-theme="light"] body.v23-ui.home-v23-page
            .home-v23-at-top header.v23-global-header
            ← 끝에 요소명 header 가 붙어 있습니다. 이걸 못 보고
              .v23-global-header 로만 썼다가 한 번 더 졌습니다.
     위 4번: body.v23-ui.home-v23-page.home-v23-at-top
            .v23-global-header                     → 클래스 4

   둘 다 !important 라 깊은 쪽이 이깁니다. 그래서 테마별로 한 번 더
   같은 깊이로 씁니다.

   라이트 모드인데 글자를 흰색으로 두는 이유
     히어로는 테마와 무관하게 영상입니다. 그 위에서는 흰 글자가 맞고,
     위쪽 그늘(rgba(4,5,8,.52))이 깔려 있어 읽는 데 지장 없습니다.
     스크롤해서 히어로를 벗어나면 home-v23-at-top 이 떨어지면서
     원래 라이트 헤더로 돌아갑니다. */
html[data-theme="light"] body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header,
html[data-theme="dark"] body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header{
  background:transparent!important;
  border-bottom-color:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
/* 메뉴 색에도 header.v23-global-header 를 끼운 변형이 따로 있습니다.
   (html[data-theme="light"] … header.v23-global-header .v23-global-nav
    .v23-nav-tab.sidebar-tab → rgb(105,101,107))
   그걸 못 보고 한 겹 얕게 썼다가 라이트 모드에서 메뉴가 거의
   안 보였습니다. 두 테마 모두 같은 깊이로 다시 씁니다. */
html[data-theme="light"] body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header .v23-global-nav .v23-nav-tab.sidebar-tab,
html[data-theme="dark"] body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header .v23-global-nav .v23-nav-tab.sidebar-tab{
  color:rgba(255,255,255,.74)!important;
}
html[data-theme="light"] body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header .v23-global-nav .v23-nav-tab.sidebar-tab:hover,
html[data-theme="light"] body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header .v23-global-nav .v23-nav-tab.sidebar-tab.active,
html[data-theme="dark"] body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header .v23-global-nav .v23-nav-tab.sidebar-tab:hover,
html[data-theme="dark"] body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header .v23-global-nav .v23-nav-tab.sidebar-tab.active{
  color:#fff!important;
}
html[data-theme="light"] body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header #themeToggle,
html[data-theme="light"] body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header .v23-soop-pill,
html[data-theme="light"] body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header .v23-guide-pill{
  border-color:rgba(255,255,255,.4)!important;
  color:#fff!important;
  background:transparent!important;
}
html[data-theme="light"] body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header #themeToggle{
  border-color:rgba(255,255,255,.22)!important;
  color:rgba(255,255,255,.78)!important;
}
html[data-theme="light"] body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header .cloud-status{
  color:rgba(255,255,255,.6)!important;
}
/* 로고: 히어로 위에서는 어두운 바탕용 그림을 씁니다.

   로고는 두 장입니다.
     .v23-logo-light  밝은 바탕용 (글자가 검정)  ← 라이트 테마 기본
     .v23-logo-dark   어두운 바탕용 (글자가 흰색) ← 다크 테마 기본

   히어로는 테마와 무관하게 영상이라 늘 어둡습니다. 그런데 라이트
   테마에서는 밝은 바탕용 그림이 나와서, 흰 네모 상자가 영상 위에
   그대로 얹힌 것처럼 보였습니다.

   처음에는 filter:brightness(0) invert(1) 로 통째로 희게 칠했는데,
   그러면 로고의 분홍색까지 사라지고 그림에 불투명한 바탕이 있으면
   그 바탕까지 하얗게 됩니다. 그림을 바꿔 끼우는 쪽이 맞습니다. */
html[data-theme="light"] body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header .v23-global-brand .v23-logo-light{
  display:none!important;
}
html[data-theme="light"] body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header .v23-global-brand .v23-logo-dark{
  display:block!important;
}
/* 사이트에 이미 이런 규칙이 있습니다.
     body.home-v23-page.home-v23-at-top .v23-global-brand img{
       filter:brightness(0) invert(1); opacity:.96 }
   「히어로 위에서는 로고를 희게」 라는 뜻인데, 라이트 테마에서만
   filter:none 으로 취소하고 있었습니다. 예전엔 라이트 헤더에 밝은
   배경 띠가 깔려 있어서 그게 맞았지만, 이제 그 띠를 걷어냈으니
   다크 때와 똑같이 희게 찍는 게 맞습니다. */
html[data-theme="light"] body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header .v23-global-brand img{
  filter:brightness(0) invert(1)!important;
  opacity:.96!important;
}

/* 메뉴 글자에 옅은 그림자. 밝은 장면이 지나갈 때를 위한 보험입니다. */
body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header .v23-nav-tab.sidebar-tab,
body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header .cloud-status,
html[data-theme="light"] body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header .v23-global-nav .v23-nav-tab.sidebar-tab{
  text-shadow:0 1px 10px rgba(0,0,0,.55)!important;
}


/* ── 6. 탭마다 뜨던 페이지 제목 없애기 ──────────────────────────
   지금 어느 탭인지는 헤더 메뉴가 이미 말해 줍니다. 그 아래에서
   「02 / CALENDAR · 캘린더 · 방송 일정과 기록을…」 을 또 보여 주면
   화면 위쪽을 100~150px 씩 그냥 차지합니다.

   덩어리가 페이지마다 다른 이름으로 일곱 군데에 흩어져 있습니다.
     .v23-page-intro          캘린더 · 최근 활동 · 통계
     .live-hub-header         라이브      (눈표가 ::before 내용)
     .vod-page-head           다시보기    (눈표가 ::before + span 둘)
     .up-rank-head            업 순위
     .poster-archive-header   포스터
     .schedule-page-head      일정
     .dogam5-page-head        도감

   ※ 글만 지우고 단추는 남깁니다.
     이 덩어리들 안에는 「멤버 추가」「포스터 등록」「새로고침」
     「업 순위 설정」「실시간 수집」 같은 것이 같이 들어 있습니다.
     통째로 숨기면 그 기능들이 사라집니다. 그래서 글 묶음(첫 div와
     직계 span/h1/h2/p)만 숨기고 나머지는 그대로 둡니다.

   ※ 다시보기 탭에 눈표가 두 개(06 / VOD, 01 / VOD ARCHIVE) 겹쳐
     있었는데, 이걸 지우면서 같이 사라집니다. */

/* 눈표가 ::before 로 들어가는 것들 */
.v23-ui .live-hub-header::before,
.v23-ui .vod-page-head::before,
.v23-ui .up-rank-head::before,
.v23-ui .poster-archive-header::before,
.v23-ui .schedule-page-head::before{
  content:none!important;
}

/* 글 묶음 */
.v23-ui .v23-page-intro>span,
.v23-ui .v23-page-intro>h1,
.v23-ui .v23-page-intro>h2,
.v23-ui .v23-page-intro>p,
.v23-ui .v23-page-intro>div:first-child,
.v23-ui .live-hub-header>div:first-child,
.v23-ui .vod-page-head>div:first-child,
.v23-ui .up-rank-head>div:first-child,
.v23-ui .poster-archive-header>div:first-child,
.v23-ui .schedule-page-head>div:first-child,
.v23-ui .dogam5-page-head>div:first-child{
  display:none!important;
}

/* 글만 있던 덩어리(캘린더·통계)는 흔적 없이 접힙니다. */
.v23-ui .v23-page-intro{
  padding:0!important;
  margin:0!important;
  border:0!important;
  min-height:0!important;
}
/* 최근 활동 탭에만 남는 「실시간 수집」 배지에 자리를 줍니다. */
.v23-ui .activity-modern-intro .activity-modern-live{
  margin:2px 0 20px!important;
}

/* 단추가 남는 덩어리들은 한 줄짜리 띠로 줄입니다.
   아래 선은 남겨 둡니다 — 단추 줄과 본문을 갈라 주는 역할입니다. */
.v23-ui .live-hub-header,
.v23-ui .vod-page-head,
.v23-ui .up-rank-head,
.v23-ui .poster-archive-header,
.v23-ui .schedule-page-head{
  padding:16px 2px 14px!important;
  margin:0 0 20px!important;
}
.v23-ui .dogam5-page-head{
  padding-top:16px!important;
  padding-bottom:14px!important;
}

/* 다크 모드에서 테마 단추만 배경이 남아 있었습니다(--v23-surface).
   히어로 위에서는 세 단추 모두 테두리만 남깁니다. */
html[data-theme="dark"] body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header #themeToggle,
html[data-theme="dark"] body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header .v23-soop-pill,
html[data-theme="dark"] body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header .v23-guide-pill,
html[data-theme="light"] body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header #themeToggle,
html[data-theme="light"] body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header .v23-soop-pill,
html[data-theme="light"] body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header .v23-guide-pill{
  background:transparent!important;
}


/* ── 7. 로고 뒤에 깔리던 분홍 상자 ──────────────────────────────
   증상
     로고 둘레에 분홍 상자와 왼쪽 빨간 막대가 깔려 있었는데,
     마우스를 올리면 사라졌습니다.

   원인 — 로고 그림이 아니라 버튼 배경이었습니다.
     로고는 <button class="sidebar-tab v23-global-brand" data-page="home">
     입니다. 홈에 있을 때 SPA 가 data-page="home" 인 탭에 .active 를
     붙이는데, 그러면 사이드바 탭용 규칙이 같이 걸립니다.

       .sidebar-tab.active{
         background:linear-gradient(90deg,rgba(188,25,68,.27),rgba(72,11,30,.12));
         border:1px solid rgba(226,46,92,.33);
         box-shadow:inset 3px 0 #e32e5c;     ← 왼쪽 빨간 막대
       }

     그리고 이 배경을 지우는 규칙이 :hover 에만 있었습니다.

       .v23-global-header .v23-global-brand.sidebar-tab:hover{
         background:transparent!important }

     그래서 「마우스를 올리면 정상」 이었던 겁니다. 올리기 전에는
     지우는 규칙이 없으니 분홍 상자가 그대로 남습니다.

   원래부터 있던 문제인데, 헤더 배경을 걷어내면서 영상 위에 그대로
   드러나 눈에 띄게 됐습니다. 로고는 누르는 버튼이지 선택된 탭이
   아니므로, 어떤 상태에서도 배경을 두지 않습니다.
   (자리가 밀리지 않게 padding·높이 같은 치수는 안 건드립니다) */
.v23-global-header .v23-global-brand.sidebar-tab,
.v23-global-header .v23-global-brand.sidebar-tab.active,
.v23-global-header .v23-global-brand.sidebar-tab:hover,
.v23-global-header .v23-global-brand.sidebar-tab:focus,
.v23-global-header .v23-global-brand.sidebar-tab:focus-visible{
  background:none!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  color:inherit!important;
  transform:none!important;
}
/* 배경을 지웠는데도 상자가 남아 있었습니다. 계산된 값을 찍어 보니
   ::before 에 보라색 그라디언트가 하나 더 깔려 있었습니다.

     ::before  background-image: linear-gradient(110deg, rgba(139,92,246,.12), …)

   게다가 ::before 는 자리를 잡은(positioned) 요소라서, 자리를 안 잡은
   <img> 보다 위에 그려집니다. 그래서 로고를 덮고 있었습니다. */
.v23-global-header .v23-global-brand.sidebar-tab::before,
.v23-global-header .v23-global-brand.sidebar-tab::after,
.v23-global-header .v23-global-brand.sidebar-tab.active::before,
.v23-global-header .v23-global-brand.sidebar-tab.active::after{
  content:none!important;
  display:none!important;
}

/* ===== home-members.css ===== */
/* [v2708] home-members.css — 04 멤버: 흐르는 띠
   ===================================================================
   되돌리려면 css-bundle.json 의 tail 에서 이 한 줄을 빼고,
   home-v23.js 의 renderMembers 안 [v2708] 블록을 쪽 나눔 코드로
   되돌리면 됩니다. 원본 CSS 는 한 글자도 안 건드렸습니다.

   무엇이 문제였나 (라이트 모드 기준)
     · 영문 유령 글씨가 거의 안 보이는데 세로 60px 을 차지하고,
       글자가 커서 아바타와 부딪쳤습니다. 어두운 바탕용 연출입니다.
     · 민트색 네온 링도 밝은 바탕에서 뜹니다.
     · 그 둘 때문에 아바타 위쪽에 빈 공간이 크게 남았습니다.
     · 14명 중 7명만 보이고 나머지는 화살표를 눌러야 나왔습니다.

   그래서
     멤버를 알약 모양으로 바꿔 두 줄로 계속 흘려보냅니다. 위아래 줄이
     반대로 움직이고 양끝은 흐려집니다. 마우스를 올리면 그 줄이 멈춥니다.
     화살표도 페이저도 필요 없어지고, 멤버가 몇 명이 되든 그대로 돕니다.

   선택자 깊이 주의
     원본이 이 깊이로 쓰여 있습니다.
       body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase
         > .home-v23-member-roman { …!important }
     처음에 .home-v23-member-roman 한 겹으로 썼다가 한 줄도 안 먹었습니다.
     아래는 전부 같은 깊이로 맞춰 둡니다.
   =================================================================== */

/* ── 화살표·페이저는 가립니다 (만드는 코드는 그대로 둡니다) ────── */
body.home-v23-page #page-home .home-v23-member-arrow,
body.home-v23-page #page-home .home-v23-member-pager{
  display:none!important;
}
body.home-v23-page #page-home .home-v23-member-carousel{
  width:100%!important;
  margin:0!important;
}

/* ── 띠 틀 ──────────────────────────────────────────────────────
   원본은 가로 스크롤 + 스크롤 스냅입니다. 이제 손으로 미는 게 아니라
   스스로 흐르므로 스크롤을 끕니다. */
body.home-v23-page #page-home .home-v23-member-strip{
  display:block!important;
  grid-template-columns:none!important;
  overflow:hidden!important;
  padding:0!important;
  scroll-snap-type:none!important;
}
body.home-v23-page #page-home .home-v23-member-row{
  position:relative;
  overflow:hidden;
  /* 양끝을 흐리게 — 잘린 알약이 뚝 끊겨 보이지 않게 합니다 */
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
body.home-v23-page #page-home .home-v23-member-row+.home-v23-member-row{
  margin-top:clamp(10px,1.1vh,16px);
}
body.home-v23-page #page-home .home-v23-member-track{
  display:flex;
  align-items:center;
  gap:clamp(13px,1.2vw,20px);
  width:max-content;
  padding:6px 0;
  animation:jaMemberMarquee var(--marquee,36s) linear infinite;
  will-change:transform;
}
/* 아래 줄은 반대 방향으로 */
body.home-v23-page #page-home .home-v23-member-row.is-rev .home-v23-member-track{
  animation-direction:reverse;
}
/* 올리면 그 줄만 멈춥니다 */
body.home-v23-page #page-home .home-v23-member-row:hover .home-v23-member-track,
body.home-v23-page #page-home .home-v23-member-row:focus-within .home-v23-member-track{
  animation-play-state:paused;
}
/* -50% 는 "복제본이 원본 자리에 정확히 겹치는 지점" 입니다.
   줄 안에 원본 한 벌 + 복제본 한 벌이 들어 있기 때문입니다. */
@keyframes jaMemberMarquee{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

/* ── 멤버 알약 ──────────────────────────────────────────────── */
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase{
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  display:flex!important;
  flex-direction:row!important;   /* 원본은 column 입니다 */
  align-items:center!important;
  justify-content:flex-start!important;
  gap:13px!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  padding:10px 24px 10px 10px!important;
  border:1px solid var(--home-line)!important;
  border-radius:999px!important;
  background:var(--home-surface)!important;
  text-align:left!important;
  scroll-snap-align:none!important;
  animation:none!important;
  opacity:1!important;
  transition:transform .25s cubic-bezier(.16,1,.3,1),border-color .25s ease!important;
}
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase:hover{
  transform:translateY(-3px)!important;
  border-color:var(--home-accent)!important;
}

/* 영문 유령 글씨: 뺍니다. 영문명은 도감에 그대로 남아 있습니다. */
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase>.home-v23-member-roman{
  display:none!important;
}

/* 초상: 네온 링 없는 작은 원 */
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase>.home-v23-member-portrait{
  position:static!important;
  flex:none!important;
  width:clamp(44px,2.8vw,54px)!important;
  height:clamp(44px,2.8vw,54px)!important;
  margin:0!important;
  overflow:hidden!important;
  border-radius:50%!important;
  background:color-mix(in srgb,var(--home-text) 5%,transparent)!important;
  box-shadow:none!important;
  filter:none!important;
}
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase>.home-v23-member-portrait::before,
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase>.home-v23-member-portrait::after{
  content:none!important;
}
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase>.home-v23-member-portrait img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  border-radius:50%!important;
  border:0!important;
  box-shadow:none!important;
  filter:none!important;
}

/* 이름 · 기수 */
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase>.home-v23-member-bottom{
  width:auto!important;
  align-items:flex-start!important;
  gap:2px!important;
  text-align:left!important;
}
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase>.home-v23-member-bottom b{
  font-size:14px!important;
  font-weight:700!important;
  letter-spacing:-.02em!important;
  white-space:nowrap!important;
}
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase>.home-v23-member-bottom small{
  font-size:9.5px!important;
  font-weight:600!important;
  letter-spacing:.14em!important;
  color:var(--home-muted)!important;
  white-space:nowrap!important;
}

/* ── 움직임을 줄여 달라고 설정한 사람 ───────────────────────────
   흐름을 멈추고 한 번에 펼칩니다. 복제본은 숨겨서 두 번 안 보이게. */
@media (prefers-reduced-motion:reduce){
  body.home-v23-page #page-home .home-v23-member-track{
    animation:none!important;
    width:100%!important;
    flex-wrap:wrap!important;
    justify-content:center!important;
  }
  body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase[aria-hidden="true"]{
    display:none!important;
  }
  body.home-v23-page #page-home .home-v23-member-row{
    -webkit-mask:none!important;
    mask:none!important;
  }
}


/* ── 인원수 ─────────────────────────────────────────────────────
   띠는 흘러가기 때문에 「총 몇 명인지」가 안 보입니다.
   화살표·페이저를 없애면서 그 정보도 같이 사라졌으므로 한 줄로 되돌려 둡니다. */
body.home-v23-page #page-home .home-v23-member-count{
  margin:clamp(14px,1.6vh,22px) 0 0!important;
  text-align:center!important;
  font-size:10px!important;
  font-weight:600!important;
  letter-spacing:.18em!important;
  color:var(--home-muted)!important;
}

/* ===== group-views.css ===== */
/* [v2711] 그룹 화면 나누기 — 도감 탭 · 찐드기 통계 탭
   ===================================================================
   무엇인가
     찐드기를 진드기와 섞지 않고 별도 화면으로 봅니다.
     명예의 전당(.stats-view-tabs)과 같은 방식이라 생김새도 거기에 맞췄습니다.
       통계  #statsViewTabs  에 「찐드기 통계」 탭이 하나 늘었습니다.
       도감  #jintaViewTabs  가 새로 생겼습니다 (진드기 도감 / 찐드기 도감).

   왜 새 파일인가
     activity-events.css 와 app.bundle.css 는 app.core.css(약 840KB)에
     묶입니다. 거기에 몇 줄 넣자고 재방문자가 840KB 를 다시 받게 할 이유가
     없어서 app.tail.css(약 60KB) 쪽에 둡니다.

   색
     진드기 #2169bf (라이트) / #5598e7 (다크)
     찐드기 #b26a00 (라이트) / #f0a73a (다크)
     validate_palette.js 로 확인했습니다 — 적록색약 ΔE 24.9 / 26.4,
     정상시 29.1 / 30.4 로 전부 통과합니다.
     탭의 '켜짐' 색은 기존 탭과 같은 금색을 그대로 씁니다. 그룹 구분은
     점(i)이 맡고, 점 옆에 항상 글자 라벨이 있어 색만으로 읽히지 않습니다.

   되돌리기
     css-bundle.json 의 tail 에서 이 파일만 빼고 node build-css.mjs.
   =================================================================== */

/* ── 그룹 점 ──────────────────────────────────────────────────── */
.stats-view-dot,
.dex-view-tab > i{
  width:8px;
  height:8px;
  border-radius:2px;
  flex:none;
  display:inline-block;
  background:#b26a00;
}
.dex-view-tab.dex-view-jindegi > i{background:#2169bf}
.dex-view-tab.dex-view-jjindegi > i{background:#b26a00}
html[data-theme="dark"] .stats-view-dot,
html[data-theme="dark"] .dex-view-tab.dex-view-jjindegi > i{background:#f0a73a}
html[data-theme="dark"] .dex-view-tab.dex-view-jindegi > i{background:#5598e7}

/* 찐드기 통계를 보는 동안에는 관리자용 수집 도구를 숨깁니다.
   그 버튼들은 그룹과 무관하게 전체 기록을 건드리므로, 찐드기 화면 안에
   놓여 있으면 "찐드기만 가져온다" 로 잘못 읽힙니다.
   중간결산 버튼(.stats-public-actions)은 그대로 둡니다 — 거기에 VS 가 있습니다. */
#page-stats.is-jjin .stats-view-switcher{display:none!important}

/* ── 도감 그룹 탭 ─────────────────────────────────────────────── */
.dex-view-tabs{
  --dex-line:var(--v23-line, #dfe5ec);
  --dex-panel:var(--v23-surface, #fff);
  --dex-ink:var(--v23-text, #16202f);
  --dex-muted:var(--v23-muted, #7a8697);
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:4px 0 16px;
}
html[data-theme="dark"] .dex-view-tabs{
  --dex-line:var(--ja-line, #263242);
  --dex-panel:var(--ja-surface, #0f1520);
  --dex-ink:var(--ja-text, #e9edf2);
  --dex-muted:var(--ja-muted, #788291);
}
.dex-view-tab{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 17px;
  border:1px solid var(--dex-line, #dfe5ec);
  border-radius:999px;
  background:var(--dex-panel, #fff);
  color:var(--dex-muted, #7a8697);
  font-family:inherit;
  font-size:12.5px;
  font-weight:800;
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.dex-view-tab:hover{color:var(--dex-ink, #16202f)}
.dex-view-tab small{
  font-weight:700;
  font-size:11px;
  opacity:.7;
}
.dex-view-tab.is-on{color:var(--dex-ink, #16202f)}
.dex-view-tab.dex-view-jindegi.is-on{
  border-color:#2169bf;
  background:color-mix(in srgb, #2169bf 11%, var(--dex-panel, #fff));
}
.dex-view-tab.dex-view-jjindegi.is-on{
  border-color:#b26a00;
  background:color-mix(in srgb, #b26a00 11%, var(--dex-panel, #fff));
}
html[data-theme="dark"] .dex-view-tab.dex-view-jindegi.is-on{
  border-color:#5598e7;
  background:color-mix(in srgb, #5598e7 16%, var(--dex-panel, #0f1520));
}
html[data-theme="dark"] .dex-view-tab.dex-view-jjindegi.is-on{
  border-color:#f0a73a;
  background:color-mix(in srgb, #f0a73a 16%, var(--dex-panel, #0f1520));
}

@media (max-width:640px){
  .dex-view-tab{padding:8px 13px;font-size:11.5px}
}

/* ── [v2712] 과거 기록 가져오기 · 대상 멤버 고르기 ──────────────────
   예전에는 도감 전원을 무조건 돌렸습니다. 한 명만 다시 받고 싶어도
   전부 긁어야 했고, 그때마다 되돌리기 지점을 하나 썼습니다(3개 보관).
   색은 도감·통계와 같은 그룹 색을 그대로 씁니다. */
.stats-backfill-who{
  --sbw-line:var(--v23-line, #dfe5ec);
  --sbw-panel:var(--v23-surface, #fff);
  --sbw-soft:var(--v23-surface-2, #f3f6fa);
  --sbw-ink:var(--v23-text, #16202f);
  --sbw-muted:var(--v23-muted, #7a8697);
  margin:14px 0 0;
  padding:13px 14px;
  border:1px solid var(--sbw-line);
  border-radius:12px;
  background:var(--sbw-soft);
}
html[data-theme="dark"] .stats-backfill-who{
  --sbw-line:var(--ja-line, #263242);
  --sbw-panel:var(--ja-surface, #0f1520);
  --sbw-soft:var(--ja-surface-2, #131b27);
  --sbw-ink:var(--ja-text, #e9edf2);
  --sbw-muted:var(--ja-muted, #788291);
}
.stats-backfill-who .sbw-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;flex-wrap:wrap;margin-bottom:10px;
}
.stats-backfill-who .sbw-head>span{font-size:12px;font-weight:800;color:var(--sbw-muted)}
.stats-backfill-who .sbw-head>span b{color:var(--sbw-ink);margin-left:5px}
.stats-backfill-who .sbw-quick{display:flex;gap:5px;flex-wrap:wrap}
.stats-backfill-who .sbw-quick button{
  padding:5px 10px;border:1px solid var(--sbw-line);border-radius:7px;
  background:var(--sbw-panel);color:var(--sbw-muted);
  font-family:inherit;font-size:11px;font-weight:700;cursor:pointer;
}
.stats-backfill-who .sbw-quick button:hover{color:var(--sbw-ink)}
.sbw-list{display:flex;flex-wrap:wrap;gap:5px;max-height:168px;overflow:auto}
.sbw-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 11px;border:1px solid var(--sbw-line);border-radius:999px;
  background:var(--sbw-panel);color:var(--sbw-muted);
  font-family:inherit;font-size:11.5px;font-weight:700;cursor:pointer;
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.sbw-chip>i{
  width:7px;height:7px;border-radius:2px;flex:none;display:block;
  background:var(--sbw-line);
}
.sbw-chip.is-on{color:var(--sbw-ink)}
.sbw-chip.sbw-jindegi.is-on{border-color:#2169bf;background:color-mix(in srgb,#2169bf 10%,var(--sbw-panel))}
.sbw-chip.sbw-jindegi.is-on>i{background:#2169bf}
.sbw-chip.sbw-jjindegi.is-on{border-color:#b26a00;background:color-mix(in srgb,#b26a00 10%,var(--sbw-panel))}
.sbw-chip.sbw-jjindegi.is-on>i{background:#b26a00}
html[data-theme="dark"] .sbw-chip.sbw-jindegi.is-on{border-color:#5598e7;background:color-mix(in srgb,#5598e7 16%,var(--sbw-panel))}
html[data-theme="dark"] .sbw-chip.sbw-jindegi.is-on>i{background:#5598e7}
html[data-theme="dark"] .sbw-chip.sbw-jjindegi.is-on{border-color:#f0a73a;background:color-mix(in srgb,#f0a73a 16%,var(--sbw-panel))}
html[data-theme="dark"] .sbw-chip.sbw-jjindegi.is-on>i{background:#f0a73a}
.sbw-hint{display:block;margin-top:9px;font-size:11px;line-height:1.7;color:var(--sbw-muted)}
.sbw-empty{margin:4px 0;font-size:11.5px;color:var(--sbw-muted)}

/* ===== vod-clean.css ===== */
/* ==========================================================================
   vod-clean.css — 다시보기 화면 (v2718)
   --------------------------------------------------------------------------
   새 마크업(.vc-*)만 꾸밉니다. 예전 클래스(.vod-card2, .vod-page-head …)는
   마크업에서 빠졌기 때문에 예전 CSS 160여 줄과 서로 부딪히지 않습니다.
   색은 사이트 공용 변수(--v23-*)만 써서 라이트/다크 테마를 그대로 따라갑니다.
   ========================================================================== */
#page-vod.vod-clean{
  --vc-gap:18px;
  --vc-radius:14px;
  --vc-surface:var(--v23-surface,#121318);
  --vc-surface-2:var(--v23-surface-2,#17191f);
  --vc-line:var(--v23-line,#292b32);
  --vc-text:var(--v23-text,#f5f3f5);
  --vc-muted:var(--v23-muted,#9d99a2);
  --vc-faint:var(--v23-soft-text,#74727a);
  --vc-accent:var(--v23-accent,#ff547d);
  --vc-accent-soft:var(--v23-accent-soft,rgba(255,84,125,.1));
  max-width:1280px;
  margin:0 auto;
}

/* ── 1단: 제목·개수 + 검색·필터 ───────────────────────────────────────── */
#page-vod .vc-top{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:6px 0 18px;margin-bottom:14px;border-bottom:1px solid var(--vc-line);
}
#page-vod .vc-title{display:flex;align-items:baseline;gap:10px;min-width:0}
/* 페이지 제목은 상단 공용 헤더에 이미 있으므로 화면에서는 숨기고(읽어주기용으로만 남김) 개수만 크게 보여줍니다. */
#page-vod .vc-title h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#page-vod .vc-count{font-size:15px;color:var(--vc-muted);white-space:nowrap}
#page-vod .vc-count strong{color:var(--vc-text);font-size:22px;font-weight:700;letter-spacing:-.02em;margin-right:4px}

#page-vod .vc-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#page-vod .vc-tools[hidden]{display:flex!important}
#page-vod .vc-search{
  position:relative;display:flex;align-items:center;
  height:38px;min-width:220px;padding:0 12px 0 34px;border-radius:10px;
  background:var(--vc-surface);border:1px solid var(--vc-line);
}
#page-vod .vc-search svg{position:absolute;left:11px;width:16px;height:16px;fill:none;stroke:var(--vc-muted);stroke-width:2;stroke-linecap:round}
#page-vod .vc-search input{
  width:100%;height:100%;border:0;outline:0;background:transparent;
  color:var(--vc-text);font-size:14px;
}
#page-vod .vc-search input::placeholder{color:var(--vc-faint)}
#page-vod .vc-search:focus-within{border-color:var(--vc-accent);box-shadow:0 0 0 3px var(--vc-accent-soft)}
#page-vod .vc-tools select{
  height:38px;padding:0 30px 0 12px;border-radius:10px;
  background:var(--vc-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23999' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 11px center/10px 7px;
  border:1px solid var(--vc-line);color:var(--vc-text);font-size:13px;
  -webkit-appearance:none;appearance:none;cursor:pointer;
}
#page-vod .vc-tools select:focus{outline:0;border-color:var(--vc-accent)}
#page-vod .vc-reset{
  height:38px;padding:0 12px;border-radius:10px;border:1px solid transparent;
  background:transparent;color:var(--vc-muted);font-size:13px;cursor:pointer;
}
#page-vod .vc-reset:hover:not(:disabled){color:var(--vc-text);border-color:var(--vc-line)}
#page-vod .vc-reset:disabled{opacity:.35;cursor:default}

/* ── 2단: 멤버 한 줄 (넘치면 가로 스크롤) ─────────────────────────────── */
#page-vod .vc-members{margin:0 0 22px}
#page-vod .vc-members[hidden]{display:none}
#page-vod .vc-member-row{
  display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;
  scrollbar-width:thin;scroll-snap-type:x proximity;
}
#page-vod .vc-member-row button{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
  height:36px;padding:0 12px 0 5px;border-radius:999px;scroll-snap-align:start;
  background:var(--vc-surface);border:1px solid var(--vc-line);
  color:var(--vc-text);font-size:13px;font-weight:500;cursor:pointer;
  transition:border-color .15s,background .15s;
}
#page-vod .vc-member-row button:first-child{padding-left:14px}
#page-vod .vc-member-row button img{width:26px;height:26px;border-radius:50%;object-fit:cover}
#page-vod .vc-member-row button i{font-style:normal;font-size:11px;color:var(--vc-faint)}
#page-vod .vc-member-row button:hover{border-color:var(--vc-muted)}
#page-vod .vc-member-row button.active{background:var(--vc-accent-soft);border-color:var(--vc-accent);color:var(--vc-accent)}
#page-vod .vc-member-row button.active i{color:inherit;opacity:.8}
#page-vod .vc-member-more{display:none!important}

/* ── 3단: 영상 ────────────────────────────────────────────────────────── */
#page-vod .vc-grid{
  display:grid;gap:26px var(--vc-gap);
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
}
#page-vod .vc-month{
  grid-column:1/-1;margin:6px 0 -10px;
  font-size:15px;font-weight:700;color:var(--vc-text);letter-spacing:-.01em;
  display:flex;align-items:center;gap:12px;
}
#page-vod .vc-month::after{content:"";flex:1;height:1px;background:var(--vc-line)}
#page-vod .vc-month:first-child{margin-top:0}

#page-vod .vc-card{display:flex;flex-direction:column;gap:10px;color:inherit;text-decoration:none;min-width:0}
#page-vod .vc-thumb{
  position:relative;display:block;aspect-ratio:16/9;overflow:hidden;
  border-radius:var(--vc-radius);background:var(--vc-surface-2);
  border:1px solid var(--vc-line);
}
#page-vod .vc-ph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;
  background:
    radial-gradient(120% 90% at 20% 0%,var(--vc-accent-soft),transparent 60%),
    var(--vc-surface-2);
  color:var(--vc-faint);font-size:13px;font-weight:600;letter-spacing:.02em;
}
#page-vod .vc-ph-face{width:38px;height:38px;border-radius:50%;object-fit:cover;opacity:.75}
#page-vod .vc-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .25s ease,transform .35s ease;
}
#page-vod .vc-img.is-ready{opacity:1}
#page-vod .vc-card:hover .vc-img{transform:scale(1.03)}
#page-vod .vc-card:hover .vc-thumb{border-color:var(--vc-muted)}
#page-vod .vc-dur,#page-vod .vc-part{
  position:absolute;z-index:1;
  padding:3px 7px;border-radius:6px;
  background:rgba(0,0,0,.72);color:#fff;
  font-size:11px;font-weight:600;font-style:normal;line-height:1.3;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
/* 재생시간은 오른쪽 아래, 회차는 왼쪽 위. 썸네일 그림 안의 날짜·제목 글씨(왼쪽 아래)를 가리지 않게 합니다. */
#page-vod .vc-dur{right:8px;bottom:8px}
#page-vod .vc-part{left:8px;top:8px;background:var(--vc-accent)}

#page-vod .vc-body{display:flex;flex-direction:column;gap:6px;min-width:0;padding:0 2px}
#page-vod .vc-name{
  font-size:15px;font-weight:600;line-height:1.45;color:var(--vc-text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  word-break:keep-all;overflow-wrap:anywhere;
}
#page-vod .vc-card:hover .vc-name{color:var(--vc-accent)}
#page-vod .vc-meta{
  display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:nowrap;
  font-size:12.5px;color:var(--vc-muted);white-space:nowrap;
}
#page-vod .vc-meta>*{flex:0 0 auto}
#page-vod .vc-cat{overflow:hidden;text-overflow:ellipsis;flex:0 1 auto!important;min-width:0}
#page-vod .vc-cat::before,#page-vod .vc-who::before{content:"·";margin-right:6px;color:var(--vc-faint)}
#page-vod .vc-who{display:inline-flex;align-items:center;gap:5px;margin-left:auto;color:var(--vc-text)}
#page-vod .vc-who::before{content:none}
#page-vod .vc-who img{width:18px;height:18px;border-radius:50%;object-fit:cover}

#page-vod .vc-empty{
  grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:60px 16px;border:1px dashed var(--vc-line);border-radius:var(--vc-radius);color:var(--vc-muted);
}
#page-vod .vc-empty strong{color:var(--vc-text);font-size:15px}

#page-vod .vc-pagination{margin-top:32px}

/* ── 모바일 ──────────────────────────────────────────────────────────── */
@media (max-width:768px){
  #page-vod .vc-top{padding-top:2px;margin-bottom:12px}
  #page-vod .vc-title h1{font-size:20px}
  /* 검색 한 줄 + 기간·카테고리·정렬 한 줄. 초기화는 필터가 걸렸을 때만 보입니다. */
  #page-vod .vc-tools{width:100%;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  #page-vod .vc-search{grid-column:1/-1;min-width:0}
  #page-vod .vc-tools select{width:100%;min-width:0;height:36px;padding:0 24px 0 10px;font-size:12.5px;background-position:right 8px center}
  #page-vod .vc-reset{grid-column:1/-1;height:30px;justify-self:end}
  #page-vod .vc-reset:disabled{display:none}
  #page-vod .vc-members{margin-bottom:16px}
  #page-vod .vc-grid{grid-template-columns:1fr 1fr;gap:20px 12px}
  #page-vod .vc-name{font-size:13.5px}
  #page-vod .vc-meta{font-size:11.5px}
  #page-vod .vc-who{display:none}
  #page-vod .vc-dur,#page-vod .vc-part{font-size:10px;padding:2px 6px}
  #page-vod .vc-dur{right:6px;bottom:6px}
  #page-vod .vc-part{left:6px;top:6px}
}
@media (max-width:420px){
  #page-vod .vc-grid{grid-template-columns:1fr}
  #page-vod .vc-name{font-size:14.5px}
  #page-vod .vc-who{display:inline-flex}
}

/* ===== typography.css ===== */
/* ==========================================================================
   typography.css — 사이트 기본 폰트: IBM Plex Sans KR  (v2717)
   --------------------------------------------------------------------------
   왜
     CSS 는 'Pretendard' 를 쓰라고 되어 있었지만 폰트 파일을 불러오는 곳이
     한 군데도 없었습니다. 그래서 Pretendard 가 설치되지 않은 PC 에서는
     윈도우 기본 '맑은 고딕'으로 대체되고, 800~1000 굵기는 억지 굵게로
     뭉개져 보였습니다.
   무엇을
     1. 폰트는 index.html 에서 IBM Plex Sans KR 400/500/600/700 을 불러옵니다.
        (@fontsource, unicode-range 분할이라 화면에 쓰인 글자 묶음만 받습니다)
     2. 아래 변수 하나로 전 사이트 글꼴을 지정합니다.
     3. Plex 는 최대 굵기가 700 이라 800 이상은 자동으로 700 으로 그려집니다.
        (굵은 면이 있으므로 억지 굵게는 생기지 않습니다)
     4. 9px 이하 글자는 10px 로, 과하게 좁힌 자간(-.03em 이하)은 -.02em 으로
        올립니다. 이 부분은 손으로 하나씩 고치면 빠뜨리기 쉬워서
        기존 규칙과 "같은 선택자 · 같은 미디어쿼리 · 같은 !important 여부"로
        자동 생성했습니다. 맨 아래 [자동 생성] 구역입니다.
   되돌리기
     css-bundle.json 에서 typography.css 한 줄을 지우고, index.html 의
     IBM Plex 링크를 지운 뒤 deploy.bat 을 돌리면 끝입니다.
   ========================================================================== */
:root{
  --font-sans:'IBM Plex Sans KR','Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
}
html,body,button,input,textarea,select{
  font-family:var(--font-sans)!important;
}
body{
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:normal;
  overflow-wrap:break-word;
}
/* 개별로 Pretendard/Noto 를 박아 둔 곳도 같은 글꼴로 맞춥니다.
   (손글씨 제목 .home-v2-hero h1, 고정폭 숫자 타이머는 의도된 것이라 그대로 둡니다) */
.detail-heading h2,
.sidebar-onair-copy small,
.sidebar-onair-copy strong,
.rc-board,
.rc-tip{
  font-family:var(--font-sans)!important;
}
/* 숫자가 많은 표·통계는 자릿수가 흔들리지 않게 고정폭 숫자를 씁니다. */
table,.ct-summary,.ct-calendar,.up-rank-table,.up-rank-summary,[class*="-stat"],[class*="count"]{
  font-variant-numeric:tabular-nums;
}

/* ==== [자동 생성] 작은 글자 · 좁은 자간 보정 — 기존 규칙과 같은 선택자로 뽑아낸 값입니다 ==== */
@media (max-width: 768px){
#page-live .live-card-body small{font-size:10px!important}
#page-live .live-hub-header .eyebrow{font-size:10px!important}
#page-live .live-overview small{font-size:10px!important}
#page-live .live-card-meta span{font-size:10px!important}
}
#page-live .live-card-meta span{font-size:10px!important}
.up-rank-shell .up-rank-crew-pins-head span{font-size:10px!important}
#page-uprank .up-rank-shell .up-rank-summary article>span{font-size:10px!important}
#page-uprank .up-rank-detail-empty>span,#page-uprank .up-rank-detail-kicker{font-size:10px}
#page-uprank .up-rank-detail-comment>span,#page-uprank .up-rank-detail-meta>span{font-size:10px}
.home-v23-hero-update{font-size:10px}
.home-v23-scroll{font-size:10px}
.home-v23-section header>div>span,.home-v23-wide-head>div>span,.home-v23-archive-copy>span{font-size:10px}
.home-v23-live-thumb em{font-size:10px}
.home-v23-activity-row small{font-size:10px}
.home-v23-activity-row time{font-size:10px}
.home-v23-member small{font-size:10px}
.home-v23-vod-card em{font-size:10px}
.home-v23-vod-card>small{font-size:10px}
.home-v23-archive-links small{font-size:10px}
.home-v23-live-duration{font-size:10px!important}
.home-v23-activity-line em{font-size:10px}
.home-v23-activity-copy>small{font-size:10px}
.home-v23-activity-row>time{font-size:10px}
.home-v23-settings-panel>header span{font-size:10px}
.home-v23-settings-panel label>small{font-size:10px}
#page-home .home-v23 .home-v23-activity-row>time{font-size:10px!important}
body>.home-v23-settings-layer .home-v23-settings-panel>header span{font-size:10px!important}
#page-home .home-v23-live-state{font-size:10px!important}
body>.home-v23-settings-layer .home-v23-position-settings>label>small{font-size:10px!important}
body>.home-v23-settings-layer .home-v23-video-upload-head>small{font-size:10px!important}
body>.home-v23-settings-layer .home-v23-toggle-row>span>small{font-size:10px!important}
#page-activity .activity-type-dock-label span,#page-activity .activity-side-head span{font-size:10px}
#page-activity .activity-new-badge{font-size:10px!important}
.home-v23-member-name-panel>header span{font-size:10px}
.home-v23-member-name-row small{font-size:10px}
#page-profiles .dogam5-jinho-facts span{font-size:10px}
#page-profiles .dogam5-roster-title>div>span{font-size:10px}
#page-profiles .dogam5-filters button{font-size:10px}
#page-profiles .dogam5-roster-item em{font-size:10px}
#page-profiles .dogam5-facts span{font-size:10px}
#page-profiles .dogam5-tags span{font-size:10px}
#page-profiles .dogam5-social>span{font-size:10px}
#page-profiles .dogam5-platform{font-size:10px}
#page-profiles .dogam5-platform i{font-size:10px}
#page-profiles .dogam5-preview-nav button{font-size:10px}
#page-stats .ct-cal-stats s{font-size:10px}
#page-stats .ct-subplus-badge,
.ct-calpop .ct-subplus-badge{font-size:10px}
body.activity-dense #page-activity .activity-kind{font-size:10px!important}
body.activity-dense #page-activity .activity-new-badge{font-size:10px!important}
.mnav-sheet-panel header span{font-size:10px}
.rc-title>span{font-size:10px}
.rc-vs .rc-mx thead th{font-size:10px}
.rc-vs .rc-d{font-size:10px}
.rc-panel header>div>span{font-size:10px}
.rc-barcol-d{font-size:10px!important}
.rc-cal-nums s{font-size:10px}
.rc-calpop-thumb b{font-size:10px}
.hof-card-rank small{font-size:10px}
.hof-card-role{font-size:10px}
.hof-card-tied{font-size:10px}
.hof-card-no{font-size:10px}
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase>.home-v23-member-bottom small{font-size:10px!important}
.detail-heading h2{letter-spacing:-.02em}
.event-notice-main h3{letter-spacing:-.02em}
.day-summary-head h2{letter-spacing:-.02em}
.summary-head h2{letter-spacing:-.02em}
.entry-notice-copy h2{letter-spacing:-.02em}
.section-title h2{letter-spacing:-.02em}
.memo-panel-head h2{letter-spacing:-.02em}
.hero-copy h1{letter-spacing:-.02em}
.dashboard-card strong{letter-spacing:-.02em}
.month-control h1{letter-spacing:-.02em}
.section-title h2,.section-title h3{letter-spacing:-.02em}
.page-section-head h1{letter-spacing:-.02em}
.memo-drawer-sheet h2{letter-spacing:-.02em}
.home-section-head h2{letter-spacing:-.02em}
.memo-inline-sheet h2{letter-spacing:-.02em}
.home-section-head h2,.page-section-head h1{letter-spacing:-.02em}
.live-hub-header h1{letter-spacing:-.02em}
.live-card-thumb:after{letter-spacing:-.02em}
.live-member-thumb:after{letter-spacing:-.02em}
.home-v2-hero:not(.is-live)::after{letter-spacing:-.02em}
.vod-page-head h1{letter-spacing:-.02em}
.archive-loader-title{letter-spacing:-.02em!important}
.pwa-install-head strong{letter-spacing:-.02em}
#page-calendar #monthTitle{letter-spacing:-.02em!important}
.event-popover h2{letter-spacing:-.02em}
#daySummaryModal .day-summary-heading h2{letter-spacing:-.02em!important}
.stats-v2-toolbar h2{letter-spacing:-.02em}
.stats-v2-kpi>strong{letter-spacing:-.02em}
.stats-v2-panel-head h3{letter-spacing:-.02em}
.up-rank-head h1{letter-spacing:-.02em}
.up-rank-summary strong{letter-spacing:-.02em}
.up-rank-section-head h2,.up-rank-panel-head h2{letter-spacing:-.02em}
.up-rank-podium-rank>b{letter-spacing:-.02em}
.up-rank-podium-up strong{letter-spacing:-.02em}
.up-rank-rank>b{letter-spacing:-.02em}
.ur-rank b{letter-spacing:-.02em}
.up-rank-shell .up-rank-summary article>strong{letter-spacing:-.02em!important}
.up-rank-shell .ur-rank b{letter-spacing:-.02em}
.up-rank-shell .up-rank-head h1{letter-spacing:-.02em!important}
.up-rank-shell .ur-cutline-center b{letter-spacing:-.02em}
.up-rank-shell.is-summary-only .up-rank-crew-pins-head strong{letter-spacing:-.02em!important}
#page-uprank .up-rank-detail-empty>strong{letter-spacing:-.02em}
.stats-backfill-modal>h2{letter-spacing:-.02em}
.stats-manual-modal>h2{letter-spacing:-.02em}
.v23-page-intro h1{letter-spacing:-.02em}
.v23-ui .live-hub-header h2,.v23-ui .poster-archive-header h2,.v23-ui .vod-page-head h1,.v23-ui .up-rank-head h1,.v23-ui .schedule-page-head h1{letter-spacing:-.02em!important}
.home-v23-hero h1{letter-spacing:-.02em}
.home-v23-section h2,.home-v23-wide-head h2{letter-spacing:-.02em}
.home-v23-archive-copy h2{letter-spacing:-.02em}
.home-v23-settings-panel>header h2{letter-spacing:-.02em}
body>.home-v23-settings-layer .home-v23-settings-panel>header h2{letter-spacing:-.02em!important}
#page-home .home-v23-hero h1{letter-spacing:-.02em!important}
html[data-theme="dark"] .ct-favorite-value{letter-spacing:-.02em!important}
.app-scene-transition::before,.app-scene-transition::after{letter-spacing:-.02em}
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase>.home-v23-member-roman{letter-spacing:-.02em!important}
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase>.home-v23-member-bottom>b{letter-spacing:-.02em!important}
.home-v23-member-name-panel>header h2{letter-spacing:-.02em}
#page-profiles .dogam5-page-head h1{letter-spacing:-.02em}
#page-profiles .dogam5-jinho-name-row h2{letter-spacing:-.02em}
#page-profiles .dogam5-jinho-wordmark{letter-spacing:-.02em}
#page-profiles .dogam5-roster-title h2{letter-spacing:-.02em}
#page-profiles .dogam5-preview-copy h2{letter-spacing:-.02em}
#page-vod .vod-page-head h1{letter-spacing:-.02em!important}
#page-vod .vod-page-count strong{letter-spacing:-.02em!important}
#page-vod .vod-hero-copy h2{letter-spacing:-.02em!important}
#page-vod .vod-archive-head h2{letter-spacing:-.02em!important}
#page-live .live-extinct-title{letter-spacing:-.02em!important}
#page-live .live-extinct-timer strong{letter-spacing:-.02em!important}
.mnav-sheet-panel header strong{letter-spacing:-.02em}
.rc-title h2{letter-spacing:-.02em}
.rc-who b{letter-spacing:-.02em}
.rc-stat>b{letter-spacing:-.02em}
.rc-best>b{letter-spacing:-.02em}
.rc-intro-words em{letter-spacing:-.02em}
.hof-card-value{letter-spacing:-.02em}
#page-home .home-v23-wide-head h2{letter-spacing:-.02em}
body.home-v23-page #page-home .home-v23-overview>.home-v23-section>header h2{letter-spacing:-.02em}
@media (max-width:1100px){
.v23-global-header .page-heading span{font-size:10px!important}
}
@media(max-width:680px){
#page-home .home-v23-member small{font-size:10px!important}
}
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
body.home-v23-page #page-home .home-v23-scene-nav button span{font-size:10px}
}
@media(max-width:460px){
#page-live .live-extinct-kicker{font-size:10px!important}
}
@media (max-width:1180px){
#page-stats .ct-cal-stats s{font-size:10px}
}
@media(max-width:560px){
#page-stats .ct-cal-top .ct-subplus-badge{font-size:10px}
}
@media (max-width:900px){
.live-hub-header .eyebrow, .v23-page-intro>span{font-size:10px!important}
.live-hub-header h1, .live-hub-header h2,
  .up-rank-head h1, .up-rank-head h2,
  .vod-page-head h1, .vod-page-head h2,
  .poster-archive-header h1, .poster-archive-header h2,
  .schedule-page-head h1, .schedule-page-head h2,
  .v23-page-intro h1{letter-spacing:-.02em!important}
}
@media(max-width:760px){
.mobile-week-head h1{letter-spacing:-.02em}
}
@media (min-width: 901px){
#page-calendar .month-control h1{letter-spacing:-.02em}
.home-v23-hero h1{letter-spacing:-.02em!important}
}
@media (min-width:901px){
body.home-v23-page #page-home .home-v23-overview .home-v23-section::after{letter-spacing:-.02em}
}

/* ===== vod-calendar.css ===== */
/* [v2721] vod-calendar.css — 다시보기 달력 (천타버스 달력 구성)
   ===================================================================
   [달력 (넓게)] [옆줄 280px: 멤버 얼굴 격자 · 기간]
   - 칸 = 날짜·아이콘 한 줄 + 16:9 썸네일. 썸네일이 칸을 꽉 채웁니다.
   - 색은 사이트 공용 변수(--v23-*)만 써서 라이트/다크 테마를 그대로 따라갑니다.

   예전 화면 감추기
     #page-vod.is-calendar 아래에서 카드 목록(.vc-main)과 검색·필터 줄을
     감춥니다. app.js 가 그 안의 id 를 계속 찾으므로 지우지는 않습니다.
   =================================================================== */

#page-vod.is-calendar .vc-main,
#page-vod.is-calendar .vc-tools,
#page-vod.is-calendar .vc-members,
#page-vod.is-calendar .vc-pagination,
#page-vod.is-calendar .vod-pagination{display:none!important}
#page-vod.is-calendar.vod-clean{max-width:1600px}
#page-vod.is-calendar .vc-top{margin-bottom:16px;padding-bottom:14px}

.vcal{
  --vcal-line:var(--v23-line,#292b32);
  --vcal-surface:var(--v23-surface,#121318);
  --vcal-surface-2:var(--v23-surface-2,#17191f);
  --vcal-text:var(--v23-text,#f5f3f5);
  --vcal-muted:var(--v23-muted,#9d99a2);
  --vcal-faint:var(--v23-soft-text,#74727a);
  --vcal-accent:var(--v23-accent,#ff547d);
  --vcal-accent-soft:var(--v23-accent-soft,rgba(255,84,125,.1));
  --vcal-sun:#ff6b6b;
  --vcal-sat:#5aa9ff;
  display:block;
}
.vcal-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:20px;align-items:start}
.vcal-main,.vcal-side{min-width:0}

/* ── 달력 판 ─────────────────────────────────────────────────────── */
.vcal-board{
  background:var(--vcal-surface);border:1px solid var(--vcal-line);
  border-radius:14px;padding:12px;
}
.vcal-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:2px 4px 10px}
.vcal-head b{font-size:17px;font-weight:700;color:var(--vcal-text)}
.vcal-head span{font-size:12.5px;color:var(--vcal-muted)}
.vcal-head em{font-style:normal;font-weight:700;color:var(--vcal-text)}

.vcal-week,.vcal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.vcal-wd{text-align:center;font-size:12px;font-weight:700;color:var(--vcal-text);padding:6px 0}
.vcal-wd.is-sun{color:var(--vcal-sun)}
.vcal-wd.is-sat{color:var(--vcal-sat)}

.vcal-day{
  position:relative;display:flex;flex-direction:column;gap:4px;
  min-width:0;min-height:96px;padding:5px;
  background:var(--vcal-surface-2);border:1.5px solid transparent;border-radius:8px;
  color:var(--vcal-text);text-decoration:none;text-align:left;font:inherit;
  transition:border-color .15s,transform .15s;
}
button.vcal-day{cursor:pointer;width:100%}
.vcal-day.is-blank{background:transparent;min-height:0}
.vcal-day.is-off .vcal-num{color:var(--vcal-faint)}
.vcal-day.is-on:hover,.vcal-day.is-on:focus-visible{border-color:var(--vcal-accent);outline:0}
.vcal-day.is-today{box-shadow:inset 0 0 0 1.5px var(--vcal-accent)}

.vcal-top{display:flex;align-items:center;justify-content:space-between;gap:4px;line-height:14px}
.vcal-num{font-size:13px;font-weight:700}
.vcal-day.is-sun .vcal-num{color:var(--vcal-sun)}
.vcal-day.is-sat .vcal-num{color:var(--vcal-sat)}
.vcal-day.is-off.is-sun .vcal-num,.vcal-day.is-off.is-sat .vcal-num{opacity:.6}

.vcal-chip{display:inline-flex;align-items:center;gap:2px;color:var(--vcal-accent);opacity:.75}
.vcal-chip svg{width:13px;height:13px}
.vcal-chip b{font-size:11.5px;font-weight:700;line-height:1}
.vcal-chip.is-many{opacity:1}

.vcal-thumb{
  position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;
  border-radius:5px;background:var(--vcal-surface);
}
.vcal-thumb-ph,.vcal-item-thumb-ph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 90% at 20% 0%,var(--vcal-accent-soft),transparent 60%),var(--vcal-surface);
}
.vcal-thumb-ph img,.vcal-item-thumb-ph img{width:34%;max-width:40px;aspect-ratio:1;border-radius:50%;object-fit:cover;opacity:.7}
.vcal-thumb-img,.vcal-item-thumb-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .25s ease,transform .3s ease;
}
.vcal-thumb-img.is-ready,.vcal-item-thumb-img.is-ready{opacity:1}
.vcal-day.is-on:hover .vcal-thumb-img{transform:scale(1.04)}
/* 칸 안에서는 재생시간을 숨깁니다(작은 칸에 글자가 겹쳐 지저분해짐). 마우스를 올리면 제목과 함께 보이고, 여러 개인 날 창에서는 크게 보입니다. */
.vcal-day .vcal-thumb .vcal-dur{display:none}
.vcal-dur{
  position:absolute;right:4px;bottom:4px;z-index:1;
  padding:1px 5px;border-radius:4px;background:rgba(0,0,0,.72);color:#fff;
  font-size:10.5px;font-weight:600;line-height:1.4;
}

/* ── 옆줄 ────────────────────────────────────────────────────────── */
.vcal-side{display:flex;flex-direction:column;gap:20px}
.vcal-side-block h3{margin:0 0 8px;font-size:13px;font-weight:700;color:var(--vcal-text)}

.vcal-faces{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.vcal-face{
  position:relative;aspect-ratio:1;padding:0;overflow:hidden;cursor:pointer;
  background:var(--vcal-surface-2);border:1.5px solid transparent;border-radius:10px;
  color:var(--vcal-text);font:inherit;transition:border-color .15s;
}
.vcal-face img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .15s,filter .15s}
.vcal-face:not(.is-on) img{opacity:.35;filter:grayscale(1)}
.vcal-face b{font-size:12px;font-weight:700}
.vcal-face:not(.is-on) b{color:var(--vcal-muted)}
.vcal-face:hover{border-color:var(--vcal-accent)}
.vcal-face:hover img{opacity:.8;filter:none}
.vcal-face.is-on{border-color:var(--vcal-accent)}
.vcal-face-all.is-on{background:var(--vcal-accent-soft)}
.vcal-face-all.is-on b{color:var(--vcal-accent)}

.vcal-years{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.vcal-years b{font-size:14px;font-weight:700;color:var(--vcal-text)}
.vcal-years button{
  width:30px;height:30px;border-radius:8px;cursor:pointer;
  background:var(--vcal-surface-2);border:1px solid var(--vcal-line);color:var(--vcal-text);font-size:16px;
}
.vcal-years button:disabled{opacity:.3;cursor:default}
.vcal-mons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.vcal-mon{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  aspect-ratio:1;padding:0;border-radius:10px;cursor:pointer;font:inherit;
  background:var(--vcal-surface-2);border:1.5px solid transparent;color:var(--vcal-text);
  transition:border-color .15s;
}
.vcal-mon span{font-size:10.5px;color:var(--vcal-muted)}
.vcal-mon b{font-size:14px;font-weight:700}
.vcal-mon:hover:not(:disabled){border-color:var(--vcal-accent)}
.vcal-mon.is-on{border-color:var(--vcal-accent);background:var(--vcal-accent-soft)}
.vcal-mon.is-on b{color:var(--vcal-accent)}
.vcal-mon.is-empty{opacity:.3;cursor:default}

/* ── 여러 개인 날 창 ─────────────────────────────────────────────── */
body.vcal-modal-open{overflow:hidden}
.vcal-overlay{
  position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  animation:vcalFade .15s ease;
}
@keyframes vcalFade{from{opacity:0}to{opacity:1}}
.vcal-modal{
  width:min(620px,100%);max-height:min(80vh,760px);display:flex;flex-direction:column;
  background:var(--vcal-surface);border:1px solid var(--vcal-line);border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.45);overflow:hidden;
}
.vcal-modal-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--vcal-line)}
.vcal-modal-head b{font-size:15px;color:var(--vcal-text)}
.vcal-modal-head span{font-size:12.5px;color:var(--vcal-muted)}
.vcal-modal-close{
  margin-left:auto;width:32px;height:32px;border-radius:8px;cursor:pointer;
  background:transparent;border:1px solid transparent;color:var(--vcal-muted);font-size:15px;
}
.vcal-modal-close:hover{color:var(--vcal-text);border-color:var(--vcal-line)}
.vcal-modal-list{display:flex;flex-direction:column;gap:12px;padding:14px 16px 16px;overflow-y:auto}
.vcal-item{
  display:grid;grid-template-columns:200px minmax(0,1fr);align-items:center;gap:12px;padding:8px;border-radius:12px;
  color:var(--vcal-text);text-decoration:none;border:1.5px solid transparent;
  background:var(--vcal-surface-2);transition:border-color .15s;
}
.vcal-item:hover{border-color:var(--vcal-accent)}
.vcal-item-thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:8px;background:var(--vcal-surface)}
.vcal-item-copy{display:flex;flex-direction:column;gap:4px;padding:0 2px 2px}
.vcal-item-copy b{font-size:14px;font-weight:600;line-height:1.45}
.vcal-item-copy small{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--vcal-muted)}
.vcal-item-who{display:inline-flex;align-items:center;gap:4px;color:var(--vcal-text)}
.vcal-item-who img{width:16px;height:16px;border-radius:50%;object-fit:cover}
.vcal-item-who::after{content:"·";margin-left:2px;color:var(--vcal-faint)}

.vcal-empty{
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:60px 16px;
  border:1px dashed var(--vcal-line);border-radius:14px;color:var(--vcal-muted);text-align:center;
}
.vcal-empty b{color:var(--vcal-text);font-size:15px}

/* ── 좁은 화면 ───────────────────────────────────────────────────── */
@media (max-width:1100px){
  .vcal-layout{grid-template-columns:minmax(0,1fr) 220px}
  .vcal-faces{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* 태블릿·모바일: 옆줄을 달력 위로 올리고 가로 한 줄로 펼칩니다. */
@media (max-width:860px){
  .vcal-layout{grid-template-columns:minmax(0,1fr);gap:14px}
  .vcal-side{order:-1;position:static;gap:12px;min-width:0}
  .vcal-side-block,.vcal-main{min-width:0}
  .vcal-side-block h3{display:none}
  .vcal-faces{display:flex;overflow-x:auto;gap:6px;padding-bottom:4px;scrollbar-width:thin}
  .vcal-face{flex:0 0 44px;width:44px;border-radius:50%}
  .vcal-face-all{flex-basis:56px;width:56px;border-radius:22px;aspect-ratio:auto;height:44px}
  .vcal-years{margin-bottom:6px}
  .vcal-mons{display:flex;overflow-x:auto;gap:6px;padding-bottom:4px;scrollbar-width:thin}
  .vcal-mon{flex:0 0 52px;aspect-ratio:auto;height:44px}
  .vcal-board{padding:8px;border-radius:12px}
  .vcal-week,.vcal-grid{gap:3px}
  .vcal-day{min-height:62px;padding:3px;gap:3px;border-radius:6px}
  .vcal-num{font-size:11px}
  .vcal-chip svg{width:10px;height:10px}
  .vcal-chip b{font-size:10px}
  .vcal-thumb{border-radius:4px}
  .vcal-dur{display:none}
}
@media (max-width:560px){
  .vcal-item{grid-template-columns:1fr;gap:8px}
}
@media (max-width:480px){
  .vcal-head{flex-direction:column;align-items:flex-start;gap:2px}
  .vcal-day{min-height:50px}
  .vcal-overlay{padding:12px;align-items:flex-end}
  .vcal-modal{max-height:85vh;border-radius:16px 16px 12px 12px}
}

/* ===== recap-luxe.css ===== */
/* [v2723] recap-luxe.css — 진드기 월간 점호 · 차분한 디자인
   ===================================================================
   recap.css 위에 덮어씁니다. 이 파일 한 줄을 css-bundle.json 에서 빼고
   recap.js 의 LUXE 를 false 로 두면 예전 모양으로 돌아갑니다.

   원칙
     · 칸을 색으로 칠하지 않습니다. 숫자는 차분한 회색, 그 멤버의 최고 달만
       흰 알약, 최저 달은 옅은 테두리. 눈이 꼭 봐야 할 칸에만 갑니다.
     · 강조색은 분홍 하나 = "지금 보는 달". 초록/빨강 = 늘고 줄음.
     · 결산판은 PNG 로 굽기 때문에 var() 를 쓰지 않고 실제 값을 씁니다
       (recap.css 맨 위 설명 참고). 다크/라이트 두 벌입니다.
     · #rcBoard 로 시작해서 recap.css 의 .rc-board.is-light 규칙보다 항상 이깁니다.

   다크  바탕 #0c0c0e · 면 #131316 · 선 #1f1f24 / #18181c
         글씨 #f2f0ee · 흐림 #8c8a90 · 더 흐림 #5d5b62 · 분홍 #ff4f7d
         초록 #38c98b · 빨강 #ff6b81
   라이트 바탕 #ffffff · 면 #f6f5f3 · 선 #e9e7e3 / #f0eeeb
         글씨 #17161a · 흐림 #66636a · 더 흐림 #a3a0a6 · 분홍 #d1134b
         초록 #0f7a2e · 빨강 #c62828
   =================================================================== */

.rc-layer{background:#08080a}
html:not([data-theme="dark"]) .rc-layer{background:#efeeeb}

/* ── 판 ─────────────────────────────────────────────────────────── */
#rcBoard{
  background:#0c0c0e;border-color:#1f1f24;color:#f2f0ee;
  border-radius:20px;padding:34px 34px 24px;
  font-family:'IBM Plex Sans KR','Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
}
#rcBoard .rc-head{border-bottom-color:#1f1f24;padding-bottom:20px}
#rcBoard .rc-title>span{font-size:10px;font-weight:500;letter-spacing:.3em;color:#ff4f7d;margin-bottom:10px}
#rcBoard .rc-title h2{font-size:32px;font-weight:700;letter-spacing:-.04em;color:#f2f0ee}
#rcBoard .rc-title p{margin-top:9px;font-size:13px;font-weight:400;color:#8c8a90}

/* 지표 탭 · 성장률 토글 */
#rcBoard .rc-tabs .rc-tab{
  padding:8px 14px;border:1px solid #232328;border-radius:999px;background:transparent;
  color:#8c8a90;font-size:12.5px;font-weight:500;
}
#rcBoard .rc-tabs .rc-tab:hover{color:#f2f0ee;border-color:#3a3a42}
#rcBoard .rc-tabs .rc-tab.is-on{background:#f2f0ee;border-color:#f2f0ee;color:#0c0c0e;font-weight:700}

/* 월 고르기 — 칸 대신 글자 줄 */
#rcBoard .rc-months{gap:2px;margin-top:16px;padding:3px;border-radius:12px;background:#131316;border:1px solid #1f1f24}
#rcBoard .rc-months button{border:0;border-radius:9px;background:transparent;color:#8c8a90;font-weight:500;padding:8px 4px}
#rcBoard .rc-months button:hover{color:#f2f0ee;background:#18181c}
#rcBoard .rc-months button.is-on{background:#ff4f7d;color:#fff;font-weight:700}
#rcBoard .rc-months button.is-off{color:#4a484f}
#rcBoard .rc-months button.is-off.is-on{color:#fff}

/* 그룹 버튼 */
#rcBoard .rc-group{border-radius:999px;border-color:#232328;background:transparent;color:#8c8a90;font-weight:500;padding:7px 14px}
#rcBoard .rc-group:hover{color:#f2f0ee;border-color:#3a3a42}
#rcBoard .rc-group[data-rc-group="jindegi"].is-on,
#rcBoard .rc-group[data-rc-group="jjindegi"].is-on,
#rcBoard .rc-group-vs.is-on{background:#1c1c21;border-color:#3a3a42;color:#f2f0ee;font-weight:700}
#rcBoard .rc-group-dot{border-radius:50%;width:7px;height:7px}

/* ── 성적표 표 ───────────────────────────────────────────────────── */
#rcBoard .rc-mx{border-collapse:collapse;border-spacing:0;margin-top:18px}
#rcBoard .rc-mx thead th{font-size:11.5px;font-weight:500;color:#5d5b62;padding:6px 0 12px}
#rcBoard .rc-mx thead th.rc-mx-now{color:#ff4f7d;font-weight:700;background:rgba(255,79,125,.05);border-radius:10px 10px 0 0}
#rcBoard .rc-mx thead th.rc-mx-who{padding-left:6px}
#rcBoard .rc-mx tbody th,
#rcBoard .rc-mx tbody td{border-top:1px solid #18181c;height:54px;text-align:center;vertical-align:middle}
#rcBoard .rc-mx tbody th{width:176px}
#rcBoard .rc-mx td.rc-mx-now{background:rgba(255,79,125,.05);width:96px}
#rcBoard .rc-mx tbody tr:hover>th,
#rcBoard .rc-mx tbody tr:hover>td{background:#121215}
#rcBoard .rc-mx tbody tr:hover>td.rc-mx-now{background:#1a1316}

#rcBoard .rc-mx-name{padding:2px 8px 2px 6px;gap:11px;color:#f2f0ee;font-size:13.5px;font-weight:500}
#rcBoard .rc-mx-name img{width:30px;height:30px;background:#1f1f24}
#rcBoard .rc-mx-name:hover span{color:#ff4f7d}

/* 칸 — 색 없이 숫자만. 알약 모양은 최고/최저 달에만 보입니다. */
#rcBoard .rc-mx .rc-cell{
  display:inline-flex;width:auto;min-width:48px;height:30px;padding:0 10px;
  border-radius:999px;background:transparent !important;box-shadow:none !important;filter:none !important;
  color:#8c8a90 !important;font-size:13.5px;font-weight:500;
}
#rcBoard .rc-mx button.rc-cell:hover{color:#f2f0ee !important;box-shadow:inset 0 0 0 1px #3a3a42 !important}
#rcBoard .rc-mx .rc-cell.rc-hi{background:#f2f0ee !important;color:#0c0c0e !important;font-weight:700}
#rcBoard .rc-mx .rc-cell.rc-lo{box-shadow:inset 0 0 0 1px #2c2c33 !important;color:#5d5b62 !important}
#rcBoard .rc-mx .rc-cell .rc-d{color:inherit}

/* 지금 보는 달 */
#rcBoard .rc-mx td.rc-mx-now .rc-cell{color:#f2f0ee !important;font-size:16px;font-weight:700}
#rcBoard .rc-mx td.rc-mx-now .rc-cell.rc-hi{color:#0c0c0e !important}
#rcBoard .rc-mx td.rc-mx-now .rc-cell.rc-lo{color:#f2f0ee !important}
#rcBoard .rc-d-out{display:block;margin-top:2px;font-size:10.5px;font-weight:700}
#rcBoard .rc-mx td.rc-mx-now .rc-cellcol .rc-d{font-size:10.5px}

/* 데뷔 전 · 장기휴방 · 지표 없음 */
#rcBoard .rc-mx .rc-cell.rc-pre{background:transparent !important;color:#3c3a40 !important;font-size:13px}
#rcBoard .rc-mx .rc-cell.rc-rest{color:#5d5b62 !important;font-size:11px}
#rcBoard .rc-mx .rc-cell.rc-nodata{color:#3c3a40 !important}

/* 평균 줄 */
#rcBoard .rc-mx-avg>th,#rcBoard .rc-mx-avg>td{background:#101013}
#rcBoard .rc-mx .rc-cell.rc-avgcell{color:#f2f0ee !important;font-weight:700}
#rcBoard .rc-mx-avg td.rc-mx-now .rc-cell.rc-avgcell{box-shadow:none !important}
#rcBoard .rc-mx-name-static span{color:#ff4f7d;font-weight:700}
#rcBoard .rc-avg-dot{width:30px;height:30px;border:1.5px dashed #ff4f7d}

/* 추이 */
#rcBoard .rc-mx thead th.rc-mx-trendh{width:116px}
#rcBoard .rc-mx td.rc-mx-trend{width:116px}
#rcBoard .rc-trend{display:block;margin:0 auto}
#rcBoard .rc-trend-none{color:#3c3a40;font-size:12px}

/* 연초 대비 성장률 표 */
#rcBoard .rc-mx .rc-cellcol small{font-size:10.5px;font-weight:500;color:#5d5b62}

/* VS — 좌우로 나뉘어 좁습니다 */
#rcBoard .rc-vs .rc-mx tbody th,#rcBoard .rc-vs .rc-mx tbody td{height:42px}
#rcBoard .rc-vs .rc-mx tbody th{width:104px}
#rcBoard .rc-vs .rc-mx .rc-cell{min-width:34px;height:26px;padding:0 6px;font-size:12px}
#rcBoard .rc-vs .rc-mx td.rc-mx-now .rc-cell{font-size:13.5px}
#rcBoard .rc-vs .rc-mx-name img,#rcBoard .rc-vs .rc-avg-dot{width:20px;height:20px}
#rcBoard .rc-vs .rc-mx-name{font-size:11.5px}
#rcBoard .rc-vs .rc-d-out{font-size:9px}
#rcBoard .rc-vs-mid s{background:#1f1f24}
#rcBoard .rc-vs-mid b{color:#5d5b62;font-weight:700}
#rcBoard .rc-vs-name{font-weight:700}

/* 범례 */
#rcBoard .rc-legend{margin-top:18px;gap:20px;color:#8c8a90;font-size:12px}
#rcBoard .rc-key{gap:8px}
#rcBoard .rc-key s{border-radius:999px}
#rcBoard .rc-key-hi{width:26px !important;height:14px !important;background:#f2f0ee}
#rcBoard .rc-key-lo{width:26px !important;height:14px !important;box-shadow:inset 0 0 0 1px #2c2c33}
#rcBoard .rc-key-pre{background:none;color:#3c3a40;width:auto !important;height:auto !important}
#rcBoard .rc-key-pre::before{content:"—";font-size:12px}
#rcBoard .rc-key-now{width:14px !important;height:14px !important;border-radius:4px !important;box-shadow:none;background:rgba(255,79,125,.35)}
#rcBoard .rc-key-text{color:#5d5b62}

/* ── 멤버 상세 ───────────────────────────────────────────────────── */
#rcBoard .rc-back{border-radius:999px;border-color:#232328;color:#8c8a90;font-weight:500}
#rcBoard .rc-back:hover{color:#f2f0ee;border-color:#3a3a42}
#rcBoard .rc-who img{width:52px;height:52px;background:#1f1f24}
#rcBoard .rc-who b{font-size:24px;font-weight:700}
#rcBoard .rc-who small{color:#8c8a90;font-weight:400}
#rcBoard .rc-memnav{color:#8c8a90;font-weight:500}

#rcBoard .rc-stats{gap:10px;margin-top:20px}
#rcBoard .rc-stat{background:#131316;border-color:#1f1f24;border-radius:14px;padding:16px 18px}
#rcBoard .rc-stat>span{color:#8c8a90;font-weight:500;font-size:12px}
#rcBoard .rc-stat>b{font-size:26px;font-weight:700;margin-top:8px}

#rcBoard .rc-panel{border-top-color:#1f1f24;margin-top:26px;padding-top:22px}
#rcBoard .rc-panel header>div>span{font-weight:500;letter-spacing:.28em;color:#ff4f7d}
#rcBoard .rc-panel header h3{font-size:17px;font-weight:700;color:#f2f0ee}
#rcBoard .rc-panel header>p{color:#8c8a90;font-weight:400}
#rcBoard .rc-panel-note{color:#5d5b62}
#rcBoard .rc-subtabs button{border-radius:999px;border-color:#232328;color:#8c8a90;font-weight:500}
#rcBoard .rc-subtabs button:hover{color:#f2f0ee;border-color:#3a3a42}
#rcBoard .rc-subtabs button.is-on{background:#f2f0ee;border-color:#f2f0ee;color:#0c0c0e;font-weight:700}

/* 월별 막대 · 분포 막대 — 회색, 지금 보는 달만 분홍 */
#rcBoard .rc-bars,#rcBoard .rc-dbars{border-bottom-color:#1f1f24}
#rcBoard .rc-barcol i,#rcBoard .rc-dbar i{width:26px;border-radius:7px 7px 2px 2px;background:#2e2e35}
#rcBoard .rc-barcol u,#rcBoard .rc-dbar u{color:#8c8a90;font-weight:500;font-size:12px}
#rcBoard .rc-barcol.is-on i{background:#ff4f7d}
#rcBoard .rc-barcol.is-on u{color:#ff4f7d;font-weight:700}
#rcBoard .rc-barcol-stick,#rcBoard .rc-dbar-zero{background:#1f1f24;width:26px}
#rcBoard .rc-barcol-off{color:#4a484f !important}
#rcBoard .rc-barmonths button{color:#5d5b62;font-weight:500}
#rcBoard .rc-barmonths button:hover{color:#f2f0ee}
#rcBoard .rc-barmonths button.is-on{color:#ff4f7d;font-weight:700}
#rcBoard .rc-dbar:hover i{background:#55535b}
#rcBoard .rc-dbar.is-empty u{color:#3c3a40}
#rcBoard .rc-dbarlabels b{color:#c9c6c2;font-weight:500}
#rcBoard .rc-dbarlabels em{color:#5d5b62;font-weight:500}

/* 방송 달력 — 초록 칠을 걷고, 방송한 날만 면으로 살짝 띄웁니다 */
#rcBoard .rc-cal-week span{color:#5d5b62;font-weight:500}
#rcBoard .rc-cal-week span.rc-sun{color:#ff8fa8}
#rcBoard .rc-cal-week span.rc-sat{color:#8fb2f0}
#rcBoard .rc-cal-day{background:transparent;border:1px solid #18181c;border-radius:12px;box-shadow:none}
#rcBoard .rc-cal-empty{border-color:transparent}
#rcBoard .rc-cal-day.is-on{background:#141417;border-color:#24242a;box-shadow:none}
#rcBoard .rc-cal-day.is-on:hover,
#rcBoard .rc-cal-day.is-on:focus-visible{border-color:#ff4f7d;box-shadow:none}
#rcBoard .rc-cal-top b{color:#f2f0ee;font-weight:700}
#rcBoard .rc-cal-top b em{color:#8c8a90;font-weight:500}
#rcBoard .rc-cal-day:not(.is-on) .rc-cal-top b{color:#4a484f}
#rcBoard .rc-cal-count{background:#2a2a31;color:#f2f0ee;font-weight:700}
#rcBoard .rc-cal-title{color:#d6d3cf;font-weight:500}
#rcBoard .rc-cal-none{color:#3c3a40}
#rcBoard .rc-cal-nums s{color:#5d5b62;font-weight:500}
#rcBoard .rc-cal-nums u{color:#f2f0ee;font-weight:700}

/* 최고 방송 */
#rcBoard .rc-best{background:#131316;border-color:#1f1f24;border-radius:14px}
#rcBoard .rc-best>span{color:#8c8a90;font-weight:500}
#rcBoard .rc-best>b{font-weight:700}
#rcBoard .rc-best>p{color:#d6d3cf;font-weight:500}
#rcBoard .rc-best>small{color:#5d5b62}
#rcBoard .rc-best.is-now{border-color:rgba(255,79,125,.45)}
#rcBoard .rc-best.is-now>b{color:#ff4f7d}

#rcBoard .rc-foot{border-top-color:#1f1f24;color:#4a484f;font-weight:400}
#rcBoard .rc-empty{border-color:#232328;color:#8c8a90}

/* ══ 라이트 ══════════════════════════════════════════════════════ */
#rcBoard.is-light{background:#ffffff;border-color:#e9e7e3;color:#17161a}
#rcBoard.is-light .rc-head{border-bottom-color:#e9e7e3}
#rcBoard.is-light .rc-title>span{color:#d1134b}
#rcBoard.is-light .rc-title h2{color:#17161a}
#rcBoard.is-light .rc-title p{color:#66636a}
#rcBoard.is-light .rc-tabs .rc-tab{border-color:#e4e2de;color:#66636a}
#rcBoard.is-light .rc-tabs .rc-tab:hover{color:#17161a;border-color:#c9c6c1}
#rcBoard.is-light .rc-tabs .rc-tab.is-on{background:#17161a;border-color:#17161a;color:#fff}
#rcBoard.is-light .rc-months{background:#f6f5f3;border-color:#ecebe7}
#rcBoard.is-light .rc-months button{color:#66636a}
#rcBoard.is-light .rc-months button:hover{color:#17161a;background:#ecebe7}
#rcBoard.is-light .rc-months button.is-on{background:#d1134b;color:#fff}
#rcBoard.is-light .rc-months button.is-off{color:#bdbab4}
#rcBoard.is-light .rc-months button.is-off.is-on{color:#fff}
#rcBoard.is-light .rc-group{border-color:#e4e2de;color:#66636a}
#rcBoard.is-light .rc-group:hover{color:#17161a;border-color:#c9c6c1}
#rcBoard.is-light .rc-group[data-rc-group="jindegi"].is-on,
#rcBoard.is-light .rc-group[data-rc-group="jjindegi"].is-on,
#rcBoard.is-light .rc-group-vs.is-on{background:#f1f0ed;border-color:#c9c6c1;color:#17161a}

#rcBoard.is-light .rc-mx thead th{color:#a3a0a6}
#rcBoard.is-light .rc-mx thead th.rc-mx-now{color:#d1134b;background:#fdf1f4}
#rcBoard.is-light .rc-mx tbody th,
#rcBoard.is-light .rc-mx tbody td{border-top-color:#f0eeeb}
#rcBoard.is-light .rc-mx td.rc-mx-now{background:#fdf1f4}
#rcBoard.is-light .rc-mx tbody tr:hover>th,
#rcBoard.is-light .rc-mx tbody tr:hover>td{background:#faf9f7}
#rcBoard.is-light .rc-mx tbody tr:hover>td.rc-mx-now{background:#fbe7ec}
#rcBoard.is-light .rc-mx-name{color:#17161a}
#rcBoard.is-light .rc-mx-name img{background:#ecebe7}
#rcBoard.is-light .rc-mx-name:hover span{color:#d1134b}
#rcBoard.is-light .rc-mx .rc-cell{color:#66636a !important}
#rcBoard.is-light .rc-mx button.rc-cell:hover{color:#17161a !important;box-shadow:inset 0 0 0 1px #c9c6c1 !important}
#rcBoard.is-light .rc-mx .rc-cell.rc-hi{background:#17161a !important;color:#fff !important}
#rcBoard.is-light .rc-mx .rc-cell.rc-lo{box-shadow:inset 0 0 0 1px #dedbd6 !important;color:#a3a0a6 !important}
#rcBoard.is-light .rc-mx td.rc-mx-now .rc-cell{color:#17161a !important}
#rcBoard.is-light .rc-mx td.rc-mx-now .rc-cell.rc-hi{color:#fff !important}
#rcBoard.is-light .rc-mx td.rc-mx-now .rc-cell.rc-lo{color:#17161a !important}
#rcBoard.is-light .rc-mx .rc-cell.rc-pre,
#rcBoard.is-light .rc-mx .rc-cell.rc-nodata{color:#cfccc7 !important}
#rcBoard.is-light .rc-mx .rc-cell.rc-rest{color:#a3a0a6 !important}
#rcBoard.is-light .rc-mx-avg>th,#rcBoard.is-light .rc-mx-avg>td{background:#faf9f7}
#rcBoard.is-light .rc-mx .rc-cell.rc-avgcell{color:#17161a !important}
#rcBoard.is-light .rc-mx-name-static span{color:#d1134b}
#rcBoard.is-light .rc-avg-dot{border-color:#d1134b}
#rcBoard.is-light .rc-trend-none{color:#cfccc7}
#rcBoard.is-light .rc-mx .rc-cellcol small{color:#a3a0a6}
#rcBoard.is-light .rc-vs-mid s{background:#e9e7e3}
#rcBoard.is-light .rc-vs-mid b{color:#a3a0a6}
#rcBoard.is-light .rc-legend{color:#66636a}
#rcBoard.is-light .rc-key-hi{background:#17161a}
#rcBoard.is-light .rc-key-lo{box-shadow:inset 0 0 0 1px #dedbd6}
#rcBoard.is-light .rc-key-pre{color:#cfccc7}
#rcBoard.is-light .rc-key-now{background:#f6c3d1}
#rcBoard.is-light .rc-key-text{color:#a3a0a6}

#rcBoard.is-light .rc-back{border-color:#e4e2de;color:#66636a}
#rcBoard.is-light .rc-back:hover{color:#17161a;border-color:#c9c6c1}
#rcBoard.is-light .rc-who img{background:#ecebe7}
#rcBoard.is-light .rc-who small,#rcBoard.is-light .rc-memnav{color:#66636a}
#rcBoard.is-light .rc-stat{background:#f6f5f3;border-color:#ecebe7}
#rcBoard.is-light .rc-stat>span{color:#66636a}
#rcBoard.is-light .rc-panel{border-top-color:#e9e7e3}
#rcBoard.is-light .rc-panel header>div>span{color:#d1134b}
#rcBoard.is-light .rc-panel header h3{color:#17161a}
#rcBoard.is-light .rc-panel header>p{color:#66636a}
#rcBoard.is-light .rc-panel-note{color:#a3a0a6}
#rcBoard.is-light .rc-subtabs button{border-color:#e4e2de;color:#66636a}
#rcBoard.is-light .rc-subtabs button:hover{color:#17161a;border-color:#c9c6c1}
#rcBoard.is-light .rc-subtabs button.is-on{background:#17161a;border-color:#17161a;color:#fff}
#rcBoard.is-light .rc-bars,#rcBoard.is-light .rc-dbars{border-bottom-color:#e9e7e3}
#rcBoard.is-light .rc-barcol i,#rcBoard.is-light .rc-dbar i{background:#dcd9d4}
#rcBoard.is-light .rc-barcol u,#rcBoard.is-light .rc-dbar u{color:#66636a}
#rcBoard.is-light .rc-barcol.is-on i{background:#d1134b}
#rcBoard.is-light .rc-barcol.is-on u{color:#d1134b}
#rcBoard.is-light .rc-barcol-stick,#rcBoard.is-light .rc-dbar-zero{background:#e9e7e3}
#rcBoard.is-light .rc-barcol-off{color:#bdbab4 !important}
#rcBoard.is-light .rc-barmonths button{color:#a3a0a6}
#rcBoard.is-light .rc-barmonths button:hover{color:#17161a}
#rcBoard.is-light .rc-barmonths button.is-on{color:#d1134b}
#rcBoard.is-light .rc-dbar:hover i{background:#b8b4ae}
#rcBoard.is-light .rc-dbar.is-empty u{color:#cfccc7}
#rcBoard.is-light .rc-dbarlabels b{color:#3d3b40}
#rcBoard.is-light .rc-dbarlabels em{color:#a3a0a6}
#rcBoard.is-light .rc-cal-week span{color:#a3a0a6}
#rcBoard.is-light .rc-cal-week span.rc-sun{color:#d1134b}
#rcBoard.is-light .rc-cal-week span.rc-sat{color:#2f6fd0}
#rcBoard.is-light .rc-cal-day{border-color:#f0eeeb;background:transparent}
#rcBoard.is-light .rc-cal-empty{border-color:transparent}
#rcBoard.is-light .rc-cal-day.is-on{background:#f6f5f3;border-color:#e9e7e3}
#rcBoard.is-light .rc-cal-day.is-on:hover,
#rcBoard.is-light .rc-cal-day.is-on:focus-visible{border-color:#d1134b}
#rcBoard.is-light .rc-cal-top b{color:#17161a}
#rcBoard.is-light .rc-cal-top b em{color:#66636a}
#rcBoard.is-light .rc-cal-day:not(.is-on) .rc-cal-top b{color:#c4c1bb}
#rcBoard.is-light .rc-cal-count{background:#e4e2de;color:#17161a}
#rcBoard.is-light .rc-cal-title{color:#3d3b40}
#rcBoard.is-light .rc-cal-none{color:#cfccc7}
#rcBoard.is-light .rc-cal-nums s{color:#a3a0a6}
#rcBoard.is-light .rc-cal-nums u{color:#17161a}
#rcBoard.is-light .rc-best{background:#f6f5f3;border-color:#ecebe7}
#rcBoard.is-light .rc-best>span{color:#66636a}
#rcBoard.is-light .rc-best>p{color:#3d3b40}
#rcBoard.is-light .rc-best>small{color:#a3a0a6}
#rcBoard.is-light .rc-best.is-now{border-color:#f0b3c4}
#rcBoard.is-light .rc-best.is-now>b{color:#d1134b}
#rcBoard.is-light .rc-foot{border-top-color:#e9e7e3;color:#bdbab4}
#rcBoard.is-light .rc-empty{border-color:#e4e2de;color:#66636a}

/* 증감 색 (두 테마) */
#rcBoard .rc-up{color:#38c98b !important}
#rcBoard .rc-down{color:#ff6b81 !important}
#rcBoard .rc-flat{color:#5d5b62 !important}
#rcBoard.is-light .rc-up{color:#0f7a2e !important}
#rcBoard.is-light .rc-down{color:#c62828 !important}
#rcBoard.is-light .rc-flat{color:#a3a0a6 !important}
#rcBoard .rc-mx .rc-cell.rc-hi .rc-d{color:inherit !important}

/* VS 칸은 좁아서 「장기휴방」 이 두 줄로 갈라집니다. */
#rcBoard .rc-vs .rc-mx .rc-cell.rc-rest{font-size:9.5px;white-space:nowrap;padding:0 2px;min-width:0}
/* 연초 대비 성장률 설명 줄 */
#rcBoard>p{margin:14px 0 0;font-size:12.5px;font-weight:400;color:#8c8a90}
#rcBoard.is-light>p{color:#66636a}