/* ============================================================
   JINHO ARCHIVE v24.04 · HARD UI UNIFY
   기준: HOME / PROFILE / UP RANK
   Legacy green palette is remapped to v23 neutral + pink.
   ============================================================ */
/* 0) Remap the original legacy tokens everywhere. */
:root,html[data-theme="light"]{
  --bg:var(--v23-bg,#f7f6f7)!important;
  --bg2:var(--v23-surface-2,#f2f1f2)!important;
  --panel:var(--v23-surface,#fff)!important;
  --panel2:var(--v23-surface-2,#f2f1f2)!important;
  --line:var(--v23-line,#e7e3e6)!important;
  --text:var(--v23-text,#171619)!important;
  --muted:var(--v23-muted,#7b777d)!important;
  --primary:var(--v23-accent,#ea3f69)!important;
  --accent:var(--v23-accent,#ea3f69)!important;
}
html[data-theme="dark"],body.dark{
  --bg:var(--v23-bg,#0b0c0f)!important;
  --bg2:var(--v23-surface-2,#17191f)!important;
  --panel:var(--v23-surface,#121318)!important;
  --panel2:var(--v23-surface-2,#17191f)!important;
  --line:var(--v23-line,#292b32)!important;
  --text:var(--v23-text,#f5f3f5)!important;
  --muted:var(--v23-muted,#9d99a2)!important;
  --primary:var(--v23-accent,#ff547d)!important;
  --accent:var(--v23-accent,#ff547d)!important;
}
/* 1) Shared editorial shell. */
#page-calendar,#page-activity,#page-stats,#page-live,#page-vod,#page-posters{
  color:var(--v23-text)!important;
}
#page-calendar .v23-page-intro,#page-activity .v23-page-intro,#page-stats .v23-page-intro{
  margin:0 0 28px!important;
  padding:30px 2px 24px!important;
  border-bottom:1px solid var(--v23-line)!important;
  background:transparent!important;
}
#page-calendar .v23-page-intro>span,#page-activity .v23-page-intro>span,#page-stats .v23-page-intro>span{color:var(--v23-accent)!important}
#page-calendar .v23-page-intro h1,#page-activity .v23-page-intro h1,#page-stats .v23-page-intro h1{color:var(--v23-text)!important}
#page-calendar .v23-page-intro p,#page-activity .v23-page-intro p,#page-stats .v23-page-intro p{color:var(--v23-muted)!important}
/* 2) CALENDAR: sidebar is permanently gone, calendar owns the width. */
#page-calendar .portal-side-right,#page-calendar .daily-brief-panel,#page-calendar #applicationPanel,#page-calendar .compact-panel,#page-calendar .mobile-info-tabs{
  display:none!important;
  visibility:hidden!important;
  width:0!important;
  min-width:0!important;
  height:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
}
#page-calendar .schedule-layout,body.v5-news-open #page-calendar .schedule-layout,body.news-panel-open #page-calendar .schedule-layout,body.memo-panel-open #page-calendar .schedule-layout{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0 0 56px!important;
  transform:none!important;
}
#page-calendar .schedule-layout>.calendar-card{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
  transform:none!important;
}
#page-calendar .calendar-card{
  background:var(--v23-surface)!important;
  border:1px solid var(--v23-line)!important;
  border-radius:16px!important;
  box-shadow:none!important;
}
#page-calendar .calendar-head,#page-calendar .filters,#page-calendar .weekday-row,#page-calendar .calendar-footer-note{border-color:var(--v23-line)!important}
#page-calendar .calendar-head{background:transparent!important}
#page-calendar .calendar-kicker{color:var(--v23-accent)!important}
#page-calendar #monthTitle,.month-control h1{color:var(--v23-text)!important}
#page-calendar .month-control p,#page-calendar .calendar-footer-note,#page-calendar .weekday-row{color:var(--v23-muted)!important}
#page-calendar .circle,#page-calendar .head-actions button,#page-calendar .filter{
  background:var(--v23-surface-2)!important;
  border-color:var(--v23-line)!important;
  color:var(--v23-muted)!important;
  box-shadow:none!important;
}
#page-calendar #todayButton{
  background:var(--v23-accent)!important;
  border-color:var(--v23-accent)!important;
  color:#fff!important;
}
#page-calendar .day{
  background:var(--v23-bg)!important;
  border-color:var(--v23-line)!important;
  color:var(--v23-text)!important;
}
#page-calendar .day:hover{background:var(--v23-surface-2)!important}
#page-calendar .day.today{border-color:var(--v23-accent)!important;box-shadow:inset 0 0 0 1px var(--v23-accent)!important}
#page-calendar .date-num{color:var(--v23-text)!important}
#page-calendar .calendar-table-scroll,#page-calendar .calendar-table-inner,#page-calendar .calendar-stage,#page-calendar .calendar-grid{width:100%!important;max-width:none!important}
/* 3) RECENT ACTIVITY: neutral panels + more feed width. */
#page-activity.activity-page{width:100%!important;max-width:1660px!important;margin-inline:auto!important}
#page-activity .activity-layout{
  grid-template-columns:minmax(0,1fr) 250px!important;
  gap:18px!important;
  width:100%!important;
  max-width:none!important;
}
#page-activity .activity-feed-panel,#page-activity .activity-filter-panel,#page-activity .activity-feed-toolbar,#page-activity .activity-feed .activity-card{
  background:var(--v23-surface)!important;
  border-color:var(--v23-line)!important;
  color:var(--v23-text)!important;
  box-shadow:none!important;
}
#page-activity .activity-feed-panel,#page-activity .activity-feed,#page-activity .activity-list{width:100%!important;max-width:none!important;min-width:0!important}
#page-activity .activity-feed-toolbar button{
  background:var(--v23-surface-2)!important;
  border-color:var(--v23-line)!important;
  color:var(--v23-muted)!important;
}
#page-activity .activity-feed .activity-card.is-link:hover,#page-activity .activity-filter-list button:hover,#page-activity .activity-filter-note{
  background:var(--v23-surface-2)!important;
}
#page-activity .activity-filter-list button.active{
  background:var(--v23-accent-soft)!important;
  color:var(--v23-accent)!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--v23-accent) 36%,transparent)!important;
}
#page-activity .activity-filter-panel section+section{border-top-color:var(--v23-line)!important}
#page-activity .activity-card h3,#page-activity .activity-card-topline strong{color:var(--v23-text)!important}
#page-activity .activity-card p,#page-activity .activity-card-summary,#page-activity .activity-card-topline>time,#page-activity .activity-filter-note{color:var(--v23-muted)!important}
#page-activity .activity-card.is-unread{
  background:linear-gradient(90deg,var(--v23-accent-soft),var(--v23-surface) 46%)!important;
}
#page-activity .activity-card.is-unread:before{background:var(--v23-accent)!important}
/* 4) STATS: remove the remaining literal green theme. */
#page-stats{
  --ct-line:var(--v23-line)!important;
  --ct-soft:var(--v23-surface-2)!important;
  --ct-panel:var(--v23-surface)!important;
  --ct-ink:var(--v23-text)!important;
  --ct-muted:var(--v23-muted)!important;
  --ct-accent:var(--v23-accent)!important;
  --ct-accent-soft:var(--v23-accent-soft)!important;
}
#page-stats .stats-view-switcher,#page-stats .stats-view-tabs,#page-stats .ct-member-strip,#page-stats .ct-year-nav,#page-stats .ct-month-tabs button,#page-stats .ct-now-button,#page-stats .ct-member-card{
  background:var(--v23-surface)!important;
  border-color:var(--v23-line)!important;
  box-shadow:none!important;
}
#page-stats .stats-view-tabs{background:var(--v23-surface-2)!important}
#page-stats .stats-view-tabs button{color:var(--v23-muted)!important}
#page-stats .stats-view-tabs button.active{
  background:var(--v23-surface)!important;
  color:var(--v23-text)!important;
}
#page-stats .stats-backfill-button,html[data-theme="dark"] #page-stats .stats-backfill-button,#page-stats .ct-manual-edit,#page-stats .ct-day-edit{
  background:var(--v23-surface-2)!important;
  border-color:var(--v23-line)!important;
  color:var(--v23-text)!important;
  box-shadow:none!important;
}
#page-stats .stats-backfill-button:hover,#page-stats .ct-manual-edit:hover,#page-stats .ct-day-edit:hover{
  background:var(--v23-accent-soft)!important;
  border-color:var(--v23-accent)!important;
  color:var(--v23-accent)!important;
  transform:none!important;
}
#page-stats .stats-backfill-icon,html[data-theme="dark"] #page-stats .stats-backfill-icon{
  background:var(--v23-accent-soft)!important;
  color:var(--v23-accent)!important;
}
#page-stats .stats-backfill-button small{color:var(--v23-muted)!important}
#page-stats .ct-member-shortcut.is-all,html[data-theme="dark"] #page-stats .ct-member-shortcut.is-all,#page-stats .ct-month-tabs button.active,html[data-theme="dark"] #page-stats .ct-month-tabs button.active{
  background:var(--v23-accent-soft)!important;
  border-color:var(--v23-accent)!important;
  color:var(--v23-accent)!important;
  box-shadow:none!important;
}
#page-stats .ct-member-shortcut.is-all span,html[data-theme="dark"] #page-stats .ct-member-shortcut.is-all span{
  background:var(--v23-accent)!important;
  color:#fff!important;
}
#page-stats .ct-member-card.is-jump-target{outline-color:var(--v23-accent)!important;box-shadow:0 0 0 5px var(--v23-accent-soft)!important}
#page-stats .ct-live-dot{background:var(--v23-accent)!important;box-shadow:0 0 0 3px var(--v23-accent-soft)!important}
#page-stats .ct-favorite-path,html[data-theme="dark"] #page-stats .ct-favorite-path{stroke:var(--v23-accent)!important;filter:none!important}
#page-stats .ct-favorite-dot,html[data-theme="dark"] #page-stats .ct-favorite-dot{stroke:var(--v23-accent)!important;fill:var(--v23-surface)!important}
#page-stats .ct-favorite-trend-modal header span,html[data-theme="dark"] #page-stats .ct-favorite-trend-modal header span{color:var(--v23-accent)!important}
#page-stats .ct-member-card header,#page-stats .ct-metric-list button{border-color:var(--v23-line)!important}
/* 5) Poster/VOD/Live legacy panels follow the same neutral surface. */
#page-posters .panel,#page-vod .panel,#page-live .panel,#page-posters .poster-archive-card,#page-vod .vod-card,#page-live .live-stream-card{
  border-color:var(--v23-line)!important;
  box-shadow:none!important;
}
@media(max-width:1080px){#page-activity .activity-layout{grid-template-columns:1fr!important}
#page-activity .activity-filter-panel{position:static!important}}
/* ============================================================
   v24.05 · ONE COLOR SYSTEM
   Canonical dark palette = current UP Rank screen.
   Removes leftover olive/green/brown legacy surfaces while
   preserving semantic event/category identity only as small accents.
   ============================================================ */
:root,html[data-theme="light"]{
  --ja-bg:#f6f7f9;
  --ja-surface:#ffffff;
  --ja-surface-2:#f1f3f6;
  --ja-surface-3:#e9edf2;
  --ja-line:#dfe4ea;
  --ja-line-strong:#cfd6df;
  --ja-text:#151921;
  --ja-muted:#788291;
  --ja-soft:#a0a8b3;
  --ja-accent:#ea3f69;
  --ja-accent-soft:rgba(234,63,105,.10);
  --ja-positive:#159b70;
}
html[data-theme="dark"],body.dark{
  --ja-bg:#090d14;
  --ja-surface:#0f1520;
  --ja-surface-2:#131b27;
  --ja-surface-3:#182231;
  --ja-line:#263242;
  --ja-line-strong:#334154;
  --ja-text:#f4f6f9;
  --ja-muted:#8d98a8;
  --ja-soft:#667284;
  --ja-accent:#ff4f7d;
  --ja-accent-soft:rgba(255,79,125,.12);
  --ja-positive:#43d7a4;

  /* Replace old shared green theme variables at the source. */
  --v23-bg:var(--ja-bg)!important;
  --v23-surface:var(--ja-surface)!important;
  --v23-surface-2:var(--ja-surface-2)!important;
  --v23-line:var(--ja-line)!important;
  --v23-text:var(--ja-text)!important;
  --v23-muted:var(--ja-muted)!important;
  --v23-soft-text:var(--ja-soft)!important;
  --v23-accent:var(--ja-accent)!important;
  --v23-accent-soft:var(--ja-accent-soft)!important;
  --bg:var(--ja-bg)!important;
  --bg2:var(--ja-bg)!important;
  --panel:var(--ja-surface)!important;
  --panel2:var(--ja-surface-2)!important;
  --line:var(--ja-line)!important;
  --text:var(--ja-text)!important;
  --muted:var(--ja-muted)!important;
  --primary:var(--ja-accent)!important;
  --accent:var(--ja-accent)!important;
}
html[data-theme="dark"] body,body.dark{
  background:var(--ja-bg)!important;
  color:var(--ja-text)!important;
}
html[data-theme="dark"] body.v23-ui .panel,body.dark.v23-ui .panel{
  background:var(--ja-surface)!important;
  border-color:var(--ja-line)!important;
  color:var(--ja-text)!important;
  box-shadow:none!important;
}
/* ---------------- CALENDAR ---------------- */
html[data-theme="dark"] #page-calendar{background:var(--ja-bg)!important;color:var(--ja-text)!important}
html[data-theme="dark"] #page-calendar .calendar-card,html[data-theme="dark"] #page-calendar .calendar-head,html[data-theme="dark"] #page-calendar .filters,html[data-theme="dark"] #page-calendar .weekday-row,html[data-theme="dark"] #page-calendar .calendar-grid,html[data-theme="dark"] #page-calendar .calendar-table-scroll,html[data-theme="dark"] #page-calendar .calendar-table-inner{
  background:var(--ja-bg)!important;
  border-color:var(--ja-line)!important;
  color:var(--ja-text)!important;
}
html[data-theme="dark"] #page-calendar .calendar-card{
  border-color:var(--ja-line)!important;
  box-shadow:none!important;
}
html[data-theme="dark"] #page-calendar .day{
  background:var(--ja-surface)!important;
  border-color:var(--ja-line)!important;
  color:var(--ja-text)!important;
  box-shadow:none!important;
}
html[data-theme="dark"] #page-calendar .day:hover{background:var(--ja-surface-2)!important}
html[data-theme="dark"] #page-calendar .day.outside{background:#0c111a!important;opacity:.55!important}
html[data-theme="dark"] #page-calendar .day.today{
  border-color:var(--ja-accent)!important;
  box-shadow:inset 0 0 0 1px var(--ja-accent)!important;
}
html[data-theme="dark"] #page-calendar .weekday-row span,html[data-theme="dark"] #page-calendar .date-num{color:var(--ja-muted)!important}
html[data-theme="dark"] #page-calendar .day.today .date-num{color:var(--ja-text)!important}
/* Filters are neutral; active selection uses the site pink accent. */
html[data-theme="dark"] #page-calendar .filter{
  background:var(--ja-surface-2)!important;
  border:1px solid var(--ja-line)!important;
  color:var(--ja-muted)!important;
  text-shadow:none!important;
  box-shadow:none!important;
}
html[data-theme="dark"] #page-calendar .filter:hover{
  background:var(--ja-surface-3)!important;
  border-color:var(--ja-line-strong)!important;
  color:var(--ja-text)!important;
}
html[data-theme="dark"] #page-calendar .filter.active{
  background:var(--ja-accent-soft)!important;
  border-color:color-mix(in srgb,var(--ja-accent) 65%,var(--ja-line))!important;
  color:#ff9ab5!important;
  box-shadow:none!important;
}
/* Event blocks no longer fill the whole calendar with old category colors. */
html[data-theme="dark"] #page-calendar .event-pill,html[data-theme="dark"] #page-calendar .mobile-event-item,html[data-theme="dark"] #page-calendar .day-summary-item{
  background:var(--ja-surface-2)!important;
  border:1px solid var(--ja-line)!important;
  border-left:3px solid color-mix(in srgb,var(--event,var(--ja-accent)) 55%,var(--ja-line))!important;
  color:var(--ja-text)!important;
  box-shadow:none!important;
  text-shadow:none!important;
}
html[data-theme="dark"] #page-calendar .event-pill:hover{
  background:var(--ja-surface-3)!important;
  border-color:var(--ja-line-strong)!important;
}
html[data-theme="dark"] #page-calendar .event-pill.focused{
  border-color:var(--ja-accent)!important;
  box-shadow:0 0 0 1px var(--ja-accent)!important;
}
html[data-theme="dark"] #page-calendar .event-pill time{color:var(--ja-muted)!important}
html[data-theme="dark"] #page-calendar .event-title{color:var(--ja-text)!important}
html[data-theme="dark"] #page-calendar .event-star{color:var(--ja-soft)!important}
html[data-theme="dark"] #page-calendar .event-star:hover{color:var(--ja-accent)!important}
html[data-theme="dark"] #page-calendar .event-sub-badge,html[data-theme="dark"] #page-calendar .sub-category-badge{
  background:var(--ja-surface-3)!important;
  border:1px solid var(--ja-line-strong)!important;
  color:#bdc6d2!important;
  text-shadow:none!important;
  box-shadow:none!important;
}
html[data-theme="dark"] #page-calendar .circle,html[data-theme="dark"] #page-calendar .head-actions button{
  background:var(--ja-surface-2)!important;
  border-color:var(--ja-line)!important;
  color:var(--ja-muted)!important;
  box-shadow:none!important;
}
html[data-theme="dark"] #page-calendar #todayButton{
  background:var(--ja-accent)!important;
  border-color:var(--ja-accent)!important;
  color:#fff!important;
}
/* ---------------- RECENT ACTIVITY ---------------- */
html[data-theme="dark"] #page-activity .activity-feed-panel,html[data-theme="dark"] #page-activity .activity-filter-panel,html[data-theme="dark"] #page-activity .activity-feed-toolbar,html[data-theme="dark"] #page-activity .activity-feed .activity-card,html[data-theme="dark"] #page-activity #activityMemberFilters .activity-member-filter-btn,html[data-theme="dark"] #page-activity #activityTypeFilters .activity-type-filter-btn{
  background:var(--ja-surface)!important;
  border-color:var(--ja-line)!important;
  color:var(--ja-text)!important;
  box-shadow:none!important;
}
html[data-theme="dark"] #page-activity .activity-feed .activity-card:hover,html[data-theme="dark"] #page-activity #activityMemberFilters .activity-member-filter-btn:hover,html[data-theme="dark"] #page-activity #activityTypeFilters .activity-type-filter-btn:hover{
  background:var(--ja-surface-2)!important;
  border-color:var(--ja-line-strong)!important;
}
html[data-theme="dark"] #page-activity #activityMemberFilters .activity-member-filter-btn.active,html[data-theme="dark"] #page-activity #activityTypeFilters .activity-type-filter-btn.active{
  background:var(--ja-accent-soft)!important;
  border-color:color-mix(in srgb,var(--ja-accent) 58%,var(--ja-line))!important;
  color:var(--ja-text)!important;
}
html[data-theme="dark"] #page-activity .activity-member-filter-avatar,html[data-theme="dark"] #page-activity .activity-filter-type-icon,html[data-theme="dark"] #page-activity .activity-type-icon,html[data-theme="dark"] #page-activity .activity-card[data-tone="post"] .activity-type-icon,html[data-theme="dark"] #page-activity .activity-filter-type-icon[data-tone="post"],html[data-theme="dark"] #page-activity .activity-filter-type-icon[data-tone="live"],html[data-theme="dark"] #page-activity .activity-filter-type-icon[data-tone="off"],html[data-theme="dark"] #page-activity .activity-filter-type-icon[data-tone="title"],html[data-theme="dark"] #page-activity .activity-filter-type-icon[data-tone="category"],html[data-theme="dark"] #page-activity .activity-filter-type-icon[data-tone="mode"]{
  background:var(--ja-surface-2)!important;
  border-color:var(--ja-line)!important;
  color:var(--ja-muted)!important;
}
html[data-theme="dark"] #page-activity .activity-member-filter-btn.active small{
  background:var(--ja-accent)!important;
  color:#fff!important;
}
html[data-theme="dark"] #page-activity .activity-filter-note{
  background:var(--ja-surface-2)!important;
  border-color:var(--ja-line)!important;
  color:var(--ja-muted)!important;
}
/* ---------------- STATS MAIN ---------------- */
html[data-theme="dark"] #page-stats{
  --ct-line:var(--ja-line)!important;
  --ct-soft:var(--ja-surface-2)!important;
  --ct-panel:var(--ja-surface)!important;
  --ct-ink:var(--ja-text)!important;
  --ct-muted:var(--ja-muted)!important;
  --ct-accent:var(--ja-accent)!important;
  --ct-accent-soft:var(--ja-accent-soft)!important;
  background:var(--ja-bg)!important;
  color:var(--ja-text)!important;
}
html[data-theme="dark"] #page-stats .stats-view-switcher,html[data-theme="dark"] #page-stats .stats-view-tabs,html[data-theme="dark"] #page-stats .ct-member-strip,html[data-theme="dark"] #page-stats .ct-year-nav,html[data-theme="dark"] #page-stats .ct-month-tabs button,html[data-theme="dark"] #page-stats .ct-now-button,html[data-theme="dark"] #page-stats .ct-member-card,html[data-theme="dark"] #page-stats .ct-detail-panel,html[data-theme="dark"] #page-stats .ct-day-record{
  background:var(--ja-surface)!important;
  border-color:var(--ja-line)!important;
  color:var(--ja-text)!important;
  box-shadow:none!important;
}
html[data-theme="dark"] #page-stats .stats-view-tabs{background:var(--ja-surface-2)!important}
html[data-theme="dark"] #page-stats .stats-view-tabs button,html[data-theme="dark"] #page-stats .ct-month-tabs button,html[data-theme="dark"] #page-stats .ct-now-button{color:var(--ja-muted)!important}
html[data-theme="dark"] #page-stats .stats-view-tabs button:hover,html[data-theme="dark"] #page-stats .ct-month-tabs button:hover,html[data-theme="dark"] #page-stats .ct-now-button:hover{
  background:var(--ja-surface-3)!important;
  color:var(--ja-text)!important;
}
html[data-theme="dark"] #page-stats .stats-view-tabs button.active,html[data-theme="dark"] #page-stats .ct-month-tabs button.active,html[data-theme="dark"] #page-stats .ct-member-shortcut.is-all{
  background:var(--ja-accent-soft)!important;
  border-color:color-mix(in srgb,var(--ja-accent) 62%,var(--ja-line))!important;
  color:#ff9ab5!important;
  box-shadow:none!important;
}
html[data-theme="dark"] #page-stats .ct-member-shortcut.is-all span{
  background:var(--ja-accent)!important;
  color:#fff!important;
}
html[data-theme="dark"] #page-stats .ct-member-card header,html[data-theme="dark"] #page-stats .ct-metric-list button,html[data-theme="dark"] #page-stats .ct-detail-summary>*,html[data-theme="dark"] #page-stats .ct-day-record{
  border-color:var(--ja-line)!important;
}
html[data-theme="dark"] #page-stats .ct-metric-list button:hover{background:var(--ja-surface-2)!important}
html[data-theme="dark"] #page-stats .ct-member-card.is-jump-target{
  outline-color:var(--ja-accent)!important;
  box-shadow:0 0 0 5px var(--ja-accent-soft)!important;
}
html[data-theme="dark"] #page-stats .ct-live-dot{
  background:var(--ja-accent)!important;
  box-shadow:0 0 0 3px var(--ja-accent-soft)!important;
}
html[data-theme="dark"] #page-stats .stats-backfill-button,html[data-theme="dark"] #page-stats .stats-post-backfill-button,html[data-theme="dark"] #page-stats .ct-manual-edit,html[data-theme="dark"] #page-stats .ct-day-edit,html[data-theme="dark"] #startStatsBackfill[data-action="close"]{
  background:var(--ja-surface-2)!important;
  border-color:var(--ja-line)!important;
  color:var(--ja-text)!important;
  box-shadow:none!important;
}
html[data-theme="dark"] #page-stats .stats-backfill-button:hover,html[data-theme="dark"] #page-stats .stats-post-backfill-button:hover,html[data-theme="dark"] #page-stats .ct-manual-edit:hover,html[data-theme="dark"] #page-stats .ct-day-edit:hover,html[data-theme="dark"] #startStatsBackfill[data-action="close"]:hover{
  background:var(--ja-accent-soft)!important;
  border-color:var(--ja-accent)!important;
  color:#ff9ab5!important;
}
html[data-theme="dark"] #page-stats .stats-backfill-icon,html[data-theme="dark"] #page-stats .stats-post-backfill-button .stats-backfill-icon{
  background:var(--ja-accent-soft)!important;
  color:var(--ja-accent)!important;
}
/* ---------------- STATS PORTAL MODALS ----------------
   These are appended to <body>, so #page-stats selectors never reached them.
   That is why the old green modal survived the earlier unification pass. */
html[data-theme="dark"] .ct-trend-backdrop[data-stat-trend-portal]{
  --ct-line:var(--ja-line)!important;
  --ct-soft:var(--ja-surface-2)!important;
  --ct-panel:var(--ja-surface)!important;
  --ct-ink:var(--ja-text)!important;
  --ct-muted:var(--ja-muted)!important;
  --ct-accent:var(--ja-accent)!important;
  --ct-accent-soft:var(--ja-accent-soft)!important;
  background:rgba(3,7,12,.80)!important;
  backdrop-filter:blur(8px)!important;
}
html[data-theme="dark"] .ct-trend-backdrop[data-stat-trend-portal] .ct-trend-modal,html[data-theme="dark"] .stats-backfill-modal,html[data-theme="dark"] .stats-manual-modal{
  background:var(--ja-surface)!important;
  border-color:var(--ja-line)!important;
  color:var(--ja-text)!important;
  box-shadow:0 28px 90px rgba(0,0,0,.46)!important;
}
html[data-theme="dark"] .ct-trend-backdrop[data-stat-trend-portal] .ct-trend-summary>span,html[data-theme="dark"] .stats-backfill-notice,html[data-theme="dark"] .stats-backfill-progress,html[data-theme="dark"] .stats-manual-hint,html[data-theme="dark"] .stats-manual-modal input,html[data-theme="dark"] .stats-manual-modal select{
  background:var(--ja-surface-2)!important;
  border-color:var(--ja-line)!important;
  color:var(--ja-text)!important;
}
html[data-theme="dark"] .ct-favorite-line,html[data-theme="dark"] .ct-metric-line{
  background:var(--ja-bg)!important;
  border-color:var(--ja-line)!important;
}
html[data-theme="dark"] .ct-favorite-grid line{stroke:rgba(135,151,171,.18)!important}
html[data-theme="dark"] .ct-favorite-path,html[data-theme="dark"] .ct-metric-line .ct-favorite-path{
  stroke:var(--ja-accent)!important;
  filter:drop-shadow(0 2px 7px rgba(255,79,125,.18))!important;
}
html[data-theme="dark"] .ct-favorite-dot,html[data-theme="dark"] .ct-metric-line .ct-favorite-dot{
  fill:var(--ja-surface)!important;
  stroke:var(--ja-accent)!important;
}
html[data-theme="dark"] .ct-favorite-trend-modal header span,html[data-theme="dark"] .ct-line-trend-modal header span{color:var(--ja-accent)!important}
html[data-theme="dark"] .ct-favorite-value{
  fill:var(--ja-text)!important;
  stroke:var(--ja-surface)!important;
  stroke-width:4px!important;
  font-size:11.5px!important;
  font-weight:850!important;
  letter-spacing:-.035em!important;
}
html[data-theme="dark"] .ct-favorite-month{fill:var(--ja-muted)!important}
html[data-theme="dark"] .ct-trend-close{
  background:var(--ja-surface-2)!important;
  border-color:var(--ja-line)!important;
  color:var(--ja-muted)!important;
}
html[data-theme="dark"] .ct-trend-close:hover{
  color:var(--ja-text)!important;
  border-color:var(--ja-line-strong)!important;
}
/* ---------------- LIVE / VOD / POSTER ---------------- */
html[data-theme="dark"] #page-live .panel,html[data-theme="dark"] #page-vod .panel,html[data-theme="dark"] #page-posters .panel,html[data-theme="dark"] #page-posters .poster-archive-card,html[data-theme="dark"] #page-live .live-stream-card,html[data-theme="dark"] #page-vod .vod-card{
  background:var(--ja-surface)!important;
  border-color:var(--ja-line)!important;
  color:var(--ja-text)!important;
  box-shadow:none!important;
}
/* Shared old-page text hierarchy. */
html[data-theme="dark"] #page-calendar :is(.helper,.calendar-footer-note,.month-control p),html[data-theme="dark"] #page-activity :is(.activity-card p,.activity-card-summary,.activity-card time,.activity-filter-note),html[data-theme="dark"] #page-stats :is(.ct-member-id small,.ct-metric-list span,.ct-grid-head p,.stats-backfill-button small){
  color:var(--ja-muted)!important;
}
/* ============================================================
   v24.06 · CALENDAR CATEGORY COLOR VISIBILITY
   Keep the v24 neutral/up-rank visual system, but restore clear
   semantic category colors to filters and schedule items.
   ============================================================ */
/* Category chips: each category gets its own visible dot/tint.
   The pink accent still indicates "selected", so site UI language stays unified. */
#page-calendar .filter{
  position:relative!important;
  padding-left:22px!important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--filter,#788291) 11%,var(--ja-surface-2)),
      color-mix(in srgb,var(--filter,#788291) 6%,var(--ja-surface-2))
    )!important;
  border-color:color-mix(in srgb,var(--filter,#788291) 48%,var(--ja-line))!important;
  color:color-mix(in srgb,var(--filter,#788291) 52%,var(--ja-text))!important;
}
#page-calendar .filter::before{
  content:""!important;
  position:absolute!important;
  left:8px!important;
  top:50%!important;
  width:7px!important;
  height:7px!important;
  border-radius:999px!important;
  transform:translateY(-50%)!important;
  background:var(--filter,#788291)!important;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--filter,#788291) 20%,transparent)!important;
}
#page-calendar .filter:hover{
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--filter,#788291) 17%,var(--ja-surface-3)),
      color-mix(in srgb,var(--filter,#788291) 9%,var(--ja-surface-3))
    )!important;
  border-color:color-mix(in srgb,var(--filter,#788291) 66%,var(--ja-line-strong))!important;
  color:var(--ja-text)!important;
}
#page-calendar .filter.active{
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--filter,#788291) 26%,var(--ja-surface-2)),
      color-mix(in srgb,var(--filter,#788291) 15%,var(--ja-surface-2))
    )!important;
  border-color:color-mix(in srgb,var(--filter,#788291) 82%,var(--ja-line))!important;
  color:var(--ja-text)!important;
  box-shadow:
    inset 0 -2px 0 var(--ja-accent),
    0 0 0 1px color-mix(in srgb,var(--filter,#788291) 18%,transparent)!important;
}
#page-calendar .filter.active::before{
  width:8px!important;
  height:8px!important;
  box-shadow:
    0 0 0 2px color-mix(in srgb,var(--filter,#788291) 28%,transparent),
    0 0 10px color-mix(in srgb,var(--filter,#788291) 32%,transparent)!important;
}
/* Calendar event blocks: neutral card base + unmistakable main-category accent. */
#page-calendar .event-pill,#page-calendar .day-summary-item,#page-calendar .mobile-event-item{
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb,var(--event,var(--ja-accent)) 20%,var(--ja-surface-2)) 0%,
      color-mix(in srgb,var(--event,var(--ja-accent)) 9%,var(--ja-surface-2)) 42%,
      var(--ja-surface-2) 100%
    )!important;
  border-color:color-mix(in srgb,var(--event,var(--ja-accent)) 30%,var(--ja-line))!important;
  color:var(--ja-text)!important;
}
#page-calendar .event-pill:not(.multi-day),#page-calendar .event-pill.range-start,#page-calendar .event-pill.range-single,#page-calendar .event-pill.range-week-start,#page-calendar .day-summary-item{
  border-left:4px solid var(--event,var(--ja-accent))!important;
}
#page-calendar .event-pill.multi-day.range-middle,#page-calendar .event-pill.multi-day.range-end{
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb,var(--event,var(--ja-accent)) 16%,var(--ja-surface-2)),
      color-mix(in srgb,var(--event,var(--ja-accent)) 7%,var(--ja-surface-2))
    )!important;
  border-top-color:color-mix(in srgb,var(--event,var(--ja-accent)) 44%,var(--ja-line))!important;
  border-bottom-color:color-mix(in srgb,var(--event,var(--ja-accent)) 44%,var(--ja-line))!important;
}
#page-calendar .event-pill:hover,#page-calendar .day-summary-item:hover,#page-calendar .mobile-event-item:hover{
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb,var(--event,var(--ja-accent)) 27%,var(--ja-surface-3)) 0%,
      color-mix(in srgb,var(--event,var(--ja-accent)) 13%,var(--ja-surface-3)) 48%,
      var(--ja-surface-3) 100%
    )!important;
  border-color:color-mix(in srgb,var(--event,var(--ja-accent)) 52%,var(--ja-line-strong))!important;
}
/* Time is a small second category cue without making the whole event loud. */
#page-calendar .event-pill time,#page-calendar .day-summary-time{
  color:color-mix(in srgb,var(--event,var(--ja-accent)) 72%,var(--ja-text))!important;
  font-weight:900!important;
}
#page-calendar .event-title{
  color:var(--ja-text)!important;
}
/* Small-category badge uses its own --sub color again. */
#page-calendar .event-sub-badge,#page-calendar .sub-category-badge{
  background:color-mix(in srgb,var(--sub,var(--ja-accent)) 18%,var(--ja-surface-3))!important;
  border:1px solid color-mix(in srgb,var(--sub,var(--ja-accent)) 62%,var(--ja-line-strong))!important;
  color:color-mix(in srgb,var(--sub,var(--ja-accent)) 68%,var(--ja-text))!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sub,var(--ja-accent)) 8%,transparent)!important;
}
/* Keep filter-dim behavior readable: non-matching items fade, matching category color stays vivid. */
#page-calendar .event-pill.category-focused{
  opacity:1!important;
  filter:none!important;
}
#page-calendar .event-pill.category-dimmed{
  opacity:.23!important;
  filter:saturate(.45)!important;
}
/* Mobile has its own vertical accent element. */
#page-calendar .mobile-event-accent{
  background:var(--event,var(--ja-accent))!important;
  box-shadow:0 0 12px color-mix(in srgb,var(--event,var(--ja-accent)) 28%,transparent)!important;
}
/* Light theme: avoid category colors becoming too pale on white. */
html[data-theme="light"] #page-calendar .filter{
  color:color-mix(in srgb,var(--filter,#64748b) 72%,#17202b)!important;
}
html[data-theme="light"] #page-calendar .event-pill,html[data-theme="light"] #page-calendar .day-summary-item,html[data-theme="light"] #page-calendar .mobile-event-item{
  border-color:color-mix(in srgb,var(--event,var(--ja-accent)) 42%,var(--ja-line))!important;
}
html[data-theme="light"] #page-calendar .event-pill time,html[data-theme="light"] #page-calendar .day-summary-time{
  color:color-mix(in srgb,var(--event,var(--ja-accent)) 78%,#18212b)!important;
}
/* ============================================================
   v24.07 · CALENDAR POPOVER + MONTHLY HISTORY COLOR UNIFY
   Remove the last legacy olive/green surfaces from calendar
   overlays. Semantic category colors remain only as small cues.
   ============================================================ */
/* ---------- Event detail popover ---------- */
html[data-theme="dark"] .event-popover,body.dark .event-popover{
  background:var(--ja-surface)!important;
  border-color:var(--ja-line)!important;
  color:var(--ja-text)!important;
  box-shadow:0 26px 78px rgba(0,0,0,.52)!important;
}
html[data-theme="dark"] .event-popover-close{
  background:var(--ja-surface-2)!important;
  border-color:var(--ja-line)!important;
  color:var(--ja-muted)!important;
  box-shadow:none!important;
}
html[data-theme="dark"] .event-popover-close:hover{
  background:var(--ja-surface-3)!important;
  border-color:var(--ja-line-strong)!important;
  color:var(--ja-text)!important;
}
html[data-theme="dark"] .event-popover-date{color:var(--ja-muted)!important}
html[data-theme="dark"] .event-popover h2{color:var(--ja-text)!important}
html[data-theme="dark"] .event-popover-tags span{
  background:color-mix(in srgb,var(--tag,var(--ja-accent)) 13%,var(--ja-surface-2))!important;
  border-color:color-mix(in srgb,var(--tag,var(--ja-accent)) 58%,var(--ja-line))!important;
  color:color-mix(in srgb,var(--tag,var(--ja-accent)) 48%,var(--ja-text))!important;
  box-shadow:none!important;
}
html[data-theme="dark"] .event-popover-memo{
  background:var(--ja-surface-2)!important;
  border:1px solid var(--ja-line)!important;
  color:var(--ja-text)!important;
}
html[data-theme="dark"] .event-popover-participants img{
  background:var(--ja-surface-2)!important;
  border-color:color-mix(in srgb,var(--ja-accent) 62%,var(--ja-line))!important;
  box-shadow:none!important;
}
html[data-theme="dark"] .event-popover-participants span{color:var(--ja-muted)!important}
html[data-theme="dark"] .event-popover-image{
  background:var(--ja-bg)!important;
  border-color:var(--ja-line)!important;
}
html[data-theme="dark"] .event-popover-notice{
  background:var(--ja-surface-2)!important;
  border-color:color-mix(in srgb,var(--ja-accent) 48%,var(--ja-line))!important;
  box-shadow:inset 3px 0 0 var(--ja-accent)!important;
}
html[data-theme="dark"] .event-popover-notice small,html[data-theme="dark"] .event-popover-notice a{color:#ff84a4!important}
html[data-theme="dark"] .event-popover-notice strong{color:var(--ja-text)!important}
html[data-theme="dark"] .event-popover-notice p{color:var(--ja-muted)!important}
html[data-theme="dark"] .event-popover-actions{
  background:color-mix(in srgb,var(--ja-surface) 94%,transparent)!important;
  border-top-color:var(--ja-line)!important;
}
html[data-theme="dark"] .event-popover-actions .btn{
  background:var(--ja-surface-2)!important;
  border-color:var(--ja-line)!important;
  color:var(--ja-text)!important;
  box-shadow:none!important;
}
html[data-theme="dark"] .event-popover-actions .btn:hover{
  background:var(--ja-surface-3)!important;
  border-color:var(--ja-line-strong)!important;
}
html[data-theme="dark"] .event-popover-actions .star-action.active{
  background:var(--ja-accent-soft)!important;
  border-color:var(--ja-accent)!important;
  color:#ff9ab5!important;
}
@media(max-width:760px){html[data-theme="dark"] .event-popover-layer{
    background:rgba(3,7,12,.74)!important;
    backdrop-filter:blur(8px)!important;
  }
html[data-theme="dark"] .event-popover-grab{
    background:color-mix(in srgb,var(--ja-muted) 48%,transparent)!important;
  }}
/* Legacy/full detail dialog uses the same palette if it is opened anywhere. */
html[data-theme="dark"] #detailModal.modal-layer,html[data-theme="dark"] .portal-modal-layer{
  background:rgba(3,7,12,.76)!important;
  backdrop-filter:blur(8px)!important;
}
html[data-theme="dark"] .schedule-detail-modal,html[data-theme="dark"] .day-summary-modal,html[data-theme="dark"] .portal-modal{
  --detail-soft:var(--ja-surface-2)!important;
  background:var(--ja-surface)!important;
  border-color:var(--ja-line)!important;
  color:var(--ja-text)!important;
  box-shadow:0 30px 90px rgba(0,0,0,.52)!important;
}
html[data-theme="dark"] .schedule-detail-modal>.close,html[data-theme="dark"] .day-summary-modal>.close,html[data-theme="dark"] .portal-modal>.close{
  background:var(--ja-surface-2)!important;
  border-color:var(--ja-line)!important;
  color:var(--ja-muted)!important;
  box-shadow:none!important;
}
html[data-theme="dark"] .detail-heading,html[data-theme="dark"] .day-summary-head{border-color:var(--ja-line)!important}
html[data-theme="dark"] .detail-heading:before{background:var(--ja-accent)!important}
html[data-theme="dark"] .event-notice-card{
  background:var(--ja-surface-2)!important;
  border-color:var(--ja-line)!important;
  color:var(--ja-text)!important;
  box-shadow:none!important;
}
html[data-theme="dark"] .event-notice-card{box-shadow:inset 3px 0 0 var(--ja-accent)!important}
html[data-theme="dark"] .event-notice-mark{background:var(--ja-accent)!important;color:#fff!important}
html[data-theme="dark"] .event-notice-kicker,html[data-theme="dark"] .event-notice-main a{color:#ff84a4!important}
html[data-theme="dark"] .event-notice-main a{
  background:transparent!important;
  border-color:color-mix(in srgb,var(--ja-accent) 46%,var(--ja-line))!important;
}
html[data-theme="dark"] .detail-actions{
  background:color-mix(in srgb,var(--ja-surface) 94%,transparent)!important;
  border-color:var(--ja-line)!important;
}
html[data-theme="dark"] .detail-actions .btn{
  background:var(--ja-surface-2)!important;
  border-color:var(--ja-line)!important;
  color:var(--ja-text)!important;
}
html[data-theme="dark"] .detail-actions .star-action.active{
  background:var(--ja-accent-soft)!important;
  border-color:var(--ja-accent)!important;
  color:#ff9ab5!important;
}
/* ---------- Monthly history ---------- */
html[data-theme="dark"] .monthly-history-layer{
  background:rgba(3,7,12,.78)!important;
  backdrop-filter:blur(9px)!important;
}
html[data-theme="dark"] .monthly-history-panel{
  background:var(--ja-surface)!important;
  border-color:var(--ja-line)!important;
  color:var(--ja-text)!important;
  box-shadow:0 30px 90px rgba(0,0,0,.54)!important;
}
html[data-theme="dark"] .monthly-history-head{
  background:var(--ja-surface)!important;
  border-bottom-color:var(--ja-line)!important;
}
html[data-theme="dark"] .monthly-history-head h2{color:var(--ja-text)!important}
html[data-theme="dark"] .monthly-history-head button{
  background:var(--ja-surface-2)!important;
  border-color:var(--ja-line)!important;
  color:var(--ja-muted)!important;
  box-shadow:none!important;
}
html[data-theme="dark"] .monthly-history-head button:hover{
  background:var(--ja-surface-3)!important;
  border-color:var(--ja-line-strong)!important;
  color:var(--ja-text)!important;
}
html[data-theme="dark"] .monthly-history-scroll{
  background:var(--ja-surface)!important;
  scrollbar-color:color-mix(in srgb,var(--ja-muted) 42%,transparent) transparent!important;
}
html[data-theme="dark"] .mh-section,html[data-theme="dark"] .mh-summary-card,html[data-theme="dark"] .mh-broadcast-card,html[data-theme="dark"] .mh-top-row{
  background:var(--ja-surface-2)!important;
  border-color:var(--ja-line)!important;
  color:var(--ja-text)!important;
  box-shadow:none!important;
}
html[data-theme="dark"] .mh-section-title strong,html[data-theme="dark"] .mh-summary-card strong,html[data-theme="dark"] .mh-broadcast-total strong,html[data-theme="dark"] .mh-next-line b,html[data-theme="dark"] .mh-top-copy b{color:var(--ja-text)!important}
html[data-theme="dark"] .mh-section-title span,html[data-theme="dark"] .mh-summary-card span,html[data-theme="dark"] .mh-broadcast-total span,html[data-theme="dark"] .mh-broadcast-note,html[data-theme="dark"] .mh-next-line,html[data-theme="dark"] .mh-stack-label,html[data-theme="dark"] .mh-legend-chip,html[data-theme="dark"] .mh-top-copy small{color:var(--ja-muted)!important}
html[data-theme="dark"] .mh-next-line,html[data-theme="dark"] .mh-daily-chart{border-color:var(--ja-line)!important}
html[data-theme="dark"] .mh-broadcast-card{
  border-color:color-mix(in srgb,var(--ja-accent) 45%,var(--ja-line))!important;
  box-shadow:inset 3px 0 0 var(--ja-accent)!important;
}
html[data-theme="dark"] .mh-daily-bar{
  background:var(--ja-accent)!important;
  opacity:.88!important;
}
html[data-theme="dark"] .mh-daily-bar.zero{
  background:var(--ja-line-strong)!important;
  opacity:.28!important;
}
html[data-theme="dark"] .mh-change.up{color:#66d8b0!important}
html[data-theme="dark"] .mh-change.down{color:#ff7799!important}
html[data-theme="dark"] .mh-change.same{color:var(--ja-muted)!important}
html[data-theme="dark"] .mh-stack{
  background:var(--ja-bg)!important;
  border:1px solid var(--ja-line)!important;
}
/* Category segments keep their semantic --seg colors; only the container is neutral. */
html[data-theme="dark"] .mh-stack-seg{
  opacity:.9!important;
  border-top-color:rgba(255,255,255,.12)!important;
}
html[data-theme="dark"] .mh-legend-chip{
  background:var(--ja-bg)!important;
  border-color:var(--ja-line)!important;
}
html[data-theme="dark"] .mh-top-row:hover{
  background:var(--ja-surface-3)!important;
  border-color:var(--ja-line-strong)!important;
}
html[data-theme="dark"] .mh-top-rank{
  background:var(--ja-surface-3)!important;
  color:var(--ja-text)!important;
  border:1px solid var(--ja-line-strong)!important;
}
html[data-theme="dark"] .mh-top-heart{color:#ff7e9f!important}
html[data-theme="dark"] .mh-empty{
  background:var(--ja-bg)!important;
  border-color:var(--ja-line)!important;
  color:var(--ja-muted)!important;
}
/* Light mode receives the same neutral family instead of legacy green. */
html[data-theme="light"] .event-popover,html[data-theme="light"] .monthly-history-panel,html[data-theme="light"] .schedule-detail-modal,html[data-theme="light"] .day-summary-modal{
  background:var(--ja-surface)!important;
  border-color:var(--ja-line)!important;
  color:var(--ja-text)!important;
}
html[data-theme="light"] .event-popover-memo,html[data-theme="light"] .event-popover-notice,html[data-theme="light"] .monthly-history-head,html[data-theme="light"] .mh-section,html[data-theme="light"] .mh-summary-card,html[data-theme="light"] .mh-broadcast-card,html[data-theme="light"] .mh-top-row{
  background:var(--ja-surface-2)!important;
  border-color:var(--ja-line)!important;
}
/* ============================================================
   v24.08 · SOOP CHAT ACTIVITY
   Chat stays inside the same neutral UP-rank color system.
   Cyan is used only as a semantic signal, not as a panel theme.
   ============================================================ */
#page-activity .activity-card[data-tone="chat"] .activity-type-icon,#page-activity .activity-filter-type-icon[data-tone="chat"]{
  color:#67d8ff!important;
  background:color-mix(in srgb,#67d8ff 9%,var(--ja-surface-2))!important;
  border-color:color-mix(in srgb,#67d8ff 30%,var(--ja-line))!important;
}
#page-activity .activity-card[data-tone="chat"] .activity-kind[data-tone="chat"]{
  color:#67d8ff!important;
}
#page-activity .activity-card[data-tone="chat"]{
  background:linear-gradient(90deg,color-mix(in srgb,#67d8ff 4%,var(--ja-surface)) 0%,var(--ja-surface) 34%)!important;
}
#page-activity .activity-type-filter-btn[data-activity-type="chat"].active{
  background:color-mix(in srgb,#67d8ff 8%,var(--ja-accent-soft))!important;
  border-color:color-mix(in srgb,#67d8ff 35%,var(--ja-accent))!important;
}
html[data-theme="light"] #page-activity .activity-card[data-tone="chat"] .activity-type-icon,html[data-theme="light"] #page-activity .activity-filter-type-icon[data-tone="chat"]{
  color:#087ca7!important;
  background:color-mix(in srgb,#0ea5d9 8%,#fff)!important;
  border-color:color-mix(in srgb,#0ea5d9 30%,#d7dce4)!important;
}
/* 2026-08-18 · 최근 활동 채팅 그룹 UI */
#page-activity .activity-chat-section{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
  width:100%;
  margin-top:5px;
}
#page-activity .activity-chat-host{
  font-size:12px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--ja-muted,var(--v23-muted,#9aa4b2))!important;
}
#page-activity .activity-chat-stack{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:11px 13px;
  border:1px solid color-mix(in srgb,#67d8ff 17%,var(--ja-line,var(--v23-line,#2d3946)))!important;
  border-radius:13px;
  background:color-mix(in srgb,#67d8ff 6%,var(--ja-surface-2,var(--v23-surface-2,#18212b)))!important;
}
#page-activity .activity-chat-line{
  display:grid;
  grid-template-columns:52px minmax(0,1fr);
  gap:10px;
  align-items:start;
}
#page-activity .activity-chat-line time{
  font-size:12px;
  line-height:1.5;
  font-weight:700;
  white-space:nowrap;
  color:color-mix(in srgb,#67d8ff 62%,var(--ja-muted,var(--v23-muted,#93a0ad)))!important;
}
#page-activity .activity-chat-line span{
  min-width:0;
  font-size:13px;
  line-height:1.5;
  white-space:pre-wrap;
  word-break:break-word;
  color:var(--ja-text,var(--v23-text,#eef4ff))!important;
}
#page-activity .activity-card[data-tone="chat"] .activity-card-actions{align-self:flex-start}
html[data-theme="light"] #page-activity .activity-chat-stack{
  background:color-mix(in srgb,#0ea5d9 5%,#fff)!important;
  border-color:color-mix(in srgb,#0ea5d9 18%,#d7dce4)!important;
}
html[data-theme="light"] #page-activity .activity-chat-line time{
  color:color-mix(in srgb,#087ca7 65%,#7b8794)!important;
}
@media (max-width:760px){#page-activity .activity-chat-stack{padding:10px 11px}
#page-activity .activity-chat-line{grid-template-columns:44px minmax(0,1fr);gap:8px}
#page-activity .activity-chat-line time,#page-activity .activity-chat-line span{font-size:12px}}
/* ========================================================================== */
/* v24.10 · ACTIVITY MODERN FEED                                              */
/* 버컴퍼니 팬사이트 계열의 여백감 + 진호 아카이브 컬러 시스템을 결합한 피드 */
/* ========================================================================== */
#page-activity{
  --activity-bg:#0b0f16;
  --activity-surface:#0f1520;
  --activity-surface-2:#121a26;
  --activity-line:#242f3d;
  --activity-line-soft:rgba(148,163,184,.13);
  --activity-text:#f2f5f9;
  --activity-muted:#8895a5;
  --activity-accent:#ff4f7d;
  --activity-purple:#a78bfa;
  --activity-chat:#4ecbff;
  --activity-live:#64dca0;
  --activity-post:#9c8cff;
  --activity-glow:rgba(255,79,125,.16);
}
#page-activity .activity-modern-intro{
  display:flex!important;
  align-items:flex-end!important;
  justify-content:space-between!important;
  gap:24px!important;
}
#page-activity .activity-modern-live{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  margin-bottom:7px;
  padding:9px 13px;
  border:1px solid var(--activity-line);
  border-radius:999px;
  background:rgba(15,21,32,.72);
  color:var(--activity-muted);
  font-size:12px;
  font-weight:800;
  backdrop-filter:blur(14px);
}
#page-activity .activity-modern-live i{
  width:7px;height:7px;border-radius:999px;background:var(--activity-live);
  box-shadow:0 0 0 4px rgba(100,220,160,.09),0 0 14px rgba(100,220,160,.42);
}
#page-activity .activity-modern-status{
  gap:8px!important;
  margin:0 0 14px!important;
}
#page-activity .activity-modern-status span{
  padding:7px 11px!important;
  border:1px solid var(--activity-line)!important;
  border-radius:999px!important;
  background:var(--activity-surface)!important;
  color:var(--activity-muted)!important;
  box-shadow:none!important;
}
#page-activity .activity-type-dock{
  display:flex;
  align-items:center;
  gap:18px;
  width:100%;
  margin:0 0 14px;
  padding:11px 14px;
  border:1px solid var(--activity-line);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(18,26,38,.94),rgba(13,19,29,.94));
  box-shadow:0 18px 55px rgba(0,0,0,.13);
}
#page-activity .activity-type-dock-label{
  display:flex;flex-direction:column;gap:1px;min-width:52px;padding-left:2px;
}
#page-activity .activity-type-dock-label span,#page-activity .activity-side-head span{
  color:var(--activity-accent);font-size:9px;font-weight:900;letter-spacing:.18em;
}
#page-activity .activity-type-dock-label strong{font-size:13px;color:var(--activity-text)}
#page-activity .activity-type-filter-strip{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  min-width:0;
}
#page-activity .activity-type-filter-strip .activity-type-filter-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:auto!important;
  min-height:38px!important;
  gap:8px!important;
  padding:6px 11px!important;
  border:1px solid var(--activity-line)!important;
  border-radius:11px!important;
  background:#101722!important;
  color:#b5c0cd!important;
  transition:transform .16s ease,border-color .16s ease,background .16s ease,color .16s ease!important;
}
#page-activity .activity-type-filter-strip .activity-type-filter-btn:hover{
  transform:translateY(-1px);
  background:#151e2b!important;
  border-color:#354456!important;
  color:var(--activity-text)!important;
}
#page-activity .activity-type-filter-strip .activity-type-filter-btn.active{
  background:linear-gradient(135deg,rgba(255,79,125,.16),rgba(167,139,250,.12))!important;
  border-color:rgba(255,79,125,.48)!important;
  color:#fff!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02),0 8px 28px rgba(255,79,125,.08);
}
#page-activity .activity-type-filter-strip .activity-filter-type-icon{
  width:25px!important;height:25px!important;flex-basis:25px!important;border-radius:7px!important;
  background:#162131!important;border:0!important;color:#91a1b4!important;
}
#page-activity .activity-type-filter-strip .activity-filter-broadcast-icon{overflow:hidden!important;padding:0!important}
#page-activity .activity-type-filter-strip .activity-type-filter-btn>span:last-child{
  display:flex!important;align-items:center!important;gap:6px!important;
}
#page-activity .activity-type-filter-strip .activity-type-filter-btn strong{font-size:12px!important;color:inherit!important;white-space:nowrap}
#page-activity .activity-type-filter-strip .activity-type-filter-btn small{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:#1a2431;color:#758396!important;font-size:10px!important;
}
#page-activity .activity-type-filter-strip .activity-type-filter-btn.active small{background:rgba(255,255,255,.09);color:#dbe3ec!important}
#page-activity .activity-modern-layout{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 236px!important;
  gap:18px!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  align-items:start!important;
}
#page-activity .activity-modern-feed-panel{
  min-width:0!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid var(--activity-line)!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,#0f1520 0%,#0d131d 100%)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.16)!important;
}
#page-activity .activity-modern-toolbar{
  min-height:58px;
  padding:11px 14px!important;
  border:0!important;
  border-bottom:1px solid var(--activity-line)!important;
  background:rgba(12,18,27,.88)!important;
}
#page-activity .activity-modern-toolbar>div{gap:7px!important}
#page-activity .activity-modern-toolbar strong{
  color:#9ba8b8!important;font-size:12px!important;font-weight:900!important;
}
#page-activity .activity-modern-toolbar button{
  min-height:34px!important;
  padding:7px 10px!important;
  border:1px solid var(--activity-line)!important;
  border-radius:9px!important;
  background:#111925!important;
  color:#9aa7b6!important;
  font-size:11px!important;
  font-weight:800!important;
  box-shadow:none!important;
}
#page-activity .activity-modern-toolbar button:hover{background:#172231!important;color:#fff!important;border-color:#354456!important}
#page-activity .activity-modern-toolbar .activity-delete-all{
  background:rgba(255,79,125,.08)!important;border-color:rgba(255,79,125,.25)!important;color:#f790ab!important;
}
/* Timeline body */
#page-activity .activity-feed{
  position:relative;
  display:flex!important;
  flex-direction:column!important;
  padding:0 14px 0 18px!important;
  background:transparent!important;
}
#page-activity .activity-feed::before{
  content:"";
  position:absolute;
  left:34px;
  top:25px;
  bottom:25px;
  width:1px;
  background:linear-gradient(180deg,transparent,var(--activity-line) 4%,var(--activity-line) 96%,transparent);
  pointer-events:none;
}
#page-activity .activity-feed .activity-card{
  position:relative!important;
  z-index:1;
  display:grid!important;
  grid-template-columns:34px 44px minmax(0,1fr) auto!important;
  gap:12px!important;
  align-items:flex-start!important;
  min-height:76px!important;
  padding:17px 4px!important;
  border:0!important;
  border-bottom:1px solid var(--activity-line-soft)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  transition:background .16s ease!important;
}
#page-activity .activity-feed .activity-card:last-child{border-bottom:0!important}
#page-activity .activity-feed .activity-card:hover{
  background:linear-gradient(90deg,rgba(255,255,255,.025),transparent 72%)!important;
}
#page-activity .activity-feed .activity-card.is-unread{
  background:linear-gradient(90deg,rgba(255,79,125,.055),transparent 70%)!important;
}
#page-activity .activity-feed .activity-card.is-unread::before{
  left:-18px!important;top:16px!important;bottom:16px!important;width:2px!important;border-radius:99px!important;background:var(--activity-accent)!important;
}
#page-activity .activity-feed .activity-type-icon{
  position:relative!important;
  z-index:2!important;
  display:grid!important;place-items:center!important;
  width:28px!important;height:28px!important;
  margin:4px 0 0 2px!important;
  border:1px solid #283648!important;
  border-radius:8px!important;
  background:#152031!important;
  color:#7f91a5!important;
  box-shadow:0 0 0 5px #0f1520!important;
}
#page-activity .activity-feed .activity-card[data-tone="chat"] .activity-type-icon{
  background:rgba(78,203,255,.11)!important;border-color:rgba(78,203,255,.22)!important;color:var(--activity-chat)!important;
}
#page-activity .activity-feed .activity-card[data-tone="live"] .activity-type-icon{
  background:rgba(100,220,160,.10)!important;border-color:rgba(100,220,160,.20)!important;color:var(--activity-live)!important;
}
#page-activity .activity-feed .activity-card[data-tone="post"] .activity-type-icon{
  background:rgba(167,139,250,.11)!important;border-color:rgba(167,139,250,.22)!important;color:var(--activity-post)!important;
}
#page-activity .activity-feed .activity-avatar{
  width:40px!important;height:40px!important;
  margin-top:0!important;
  border:1px solid #344154!important;
  border-radius:50%!important;
  background:#111927!important;
  box-shadow:0 0 0 3px rgba(255,255,255,.018)!important;
}
#page-activity .activity-feed .activity-card-copy{
  min-width:0!important;
  padding:0 8px 0 0!important;
}
#page-activity .activity-card-topline{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  min-width:0!important;
  margin:0!important;
}
#page-activity .activity-card-identity{
  display:flex!important;align-items:center!important;gap:7px!important;min-width:0!important;flex-wrap:wrap!important;
}
#page-activity .activity-member-name{
  color:var(--activity-text)!important;
  font-size:14px!important;
  font-weight:900!important;
  letter-spacing:-.015em!important;
}
#page-activity .activity-kind{
  display:inline-flex!important;align-items:center!important;
  min-height:21px!important;padding:0 7px!important;
  border-radius:6px!important;
  background:#172131!important;
  color:#8fa0b4!important;
  font-size:10px!important;font-weight:900!important;
}
#page-activity .activity-kind[data-tone="chat"]{background:rgba(78,203,255,.10)!important;color:var(--activity-chat)!important}
#page-activity .activity-kind[data-tone="live"]{background:rgba(100,220,160,.10)!important;color:var(--activity-live)!important}
#page-activity .activity-kind[data-tone="post"]{background:rgba(167,139,250,.11)!important;color:#b5a6ff!important}
#page-activity .activity-card-topline>time{
  flex:0 0 auto!important;
  color:#697789!important;
  font-size:11px!important;
  font-variant-numeric:tabular-nums;
}
#page-activity .activity-new-badge{
  padding:2px 6px!important;border-radius:999px!important;background:rgba(255,79,125,.15)!important;color:#ff8ba9!important;font-size:9px!important;font-style:normal!important;
}
#page-activity .activity-card-bottomline{
  display:flex!important;align-items:flex-start!important;gap:8px!important;
  margin-top:6px!important;padding:0!important;min-width:0!important;
}
#page-activity .activity-card-summary{
  color:#a8b3c0!important;
  font-size:12px!important;
  line-height:1.55!important;
  white-space:pre-wrap!important;
}
/* Grouped chat: no nested rectangle; editorial list */
#page-activity .activity-chat-section{
  display:flex!important;
  flex-direction:column!important;
  gap:7px!important;
  width:100%!important;
  min-width:0!important;
  margin-top:6px!important;
}
#page-activity .activity-chat-host{
  color:#6f7e90!important;
  font-size:11px!important;
  font-weight:700!important;
}
#page-activity .activity-chat-stack{
  display:flex!important;
  flex-direction:column!important;
  gap:4px!important;
  padding:2px 0 0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
#page-activity .activity-chat-line{
  display:grid!important;
  grid-template-columns:54px minmax(0,1fr)!important;
  gap:12px!important;
  align-items:baseline!important;
  min-width:0!important;
}
#page-activity .activity-chat-line time{
  color:#748296!important;
  font-size:11px!important;
  font-weight:700!important;
  line-height:1.55!important;
  font-variant-numeric:tabular-nums;
  white-space:nowrap!important;
}
#page-activity .activity-chat-line span{
  min-width:0!important;
  color:#dce3eb!important;
  font-size:13px!important;
  line-height:1.55!important;
  word-break:break-word!important;
  white-space:pre-wrap!important;
}
#page-activity .activity-card-actions{
  align-self:flex-start!important;
  display:flex!important;
  align-items:center!important;
  gap:4px!important;
  margin-top:0!important;
  opacity:0;
  transform:translateX(4px);
  transition:opacity .16s ease,transform .16s ease!important;
}
#page-activity .activity-card:hover .activity-card-actions,#page-activity .activity-card:focus-within .activity-card-actions{opacity:1;transform:none}
#page-activity .activity-card-open,#page-activity .activity-event-delete{
  border:1px solid transparent!important;
  background:transparent!important;
  color:#66778a!important;
  border-radius:7px!important;
}
#page-activity .activity-event-delete{font-size:10px!important;padding:4px 6px!important}
#page-activity .activity-event-delete:hover{background:rgba(255,79,125,.09)!important;color:#ff789b!important;border-color:rgba(255,79,125,.16)!important}
#page-activity .activity-card-open:hover{background:#162131!important;color:#d8e0e9!important}
/* Member rail */
#page-activity .activity-modern-member-panel{
  position:sticky!important;
  top:86px!important;
  padding:15px!important;
  border:1px solid var(--activity-line)!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,#101722,#0e141e)!important;
  box-shadow:0 22px 60px rgba(0,0,0,.13)!important;
}
#page-activity .activity-side-head{margin-bottom:12px}
#page-activity .activity-side-head h3{margin:2px 0 0!important;color:var(--activity-text)!important;font-size:14px!important}
#page-activity .activity-modern-member-panel .activity-filter-list{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
}
#page-activity .activity-modern-member-panel .activity-member-filter-btn{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
  gap:5px!important;
  min-width:0!important;
  width:100%!important;
  min-height:78px!important;
  padding:8px 4px!important;
  border:1px solid transparent!important;
  border-radius:12px!important;
  background:transparent!important;
  color:#8b99aa!important;
  text-align:center!important;
  transition:.16s ease!important;
}
#page-activity .activity-modern-member-panel .activity-member-filter-btn:hover{
  background:#151e2a!important;border-color:#283648!important;color:#fff!important;
}
#page-activity .activity-modern-member-panel .activity-member-filter-btn.active{
  background:linear-gradient(180deg,rgba(255,79,125,.12),rgba(255,79,125,.045))!important;
  border-color:rgba(255,79,125,.42)!important;
  color:#fff!important;
}
#page-activity .activity-modern-member-panel .activity-member-filter-avatar{
  width:34px!important;height:34px!important;border-radius:50%!important;object-fit:cover!important;
  border:1px solid #37465a!important;background:#141d2a!important;
}
#page-activity .activity-modern-member-panel .activity-member-filter-btn.active .activity-member-filter-avatar{
  border-color:rgba(255,79,125,.75)!important;box-shadow:0 0 0 3px rgba(255,79,125,.08)!important;
}
#page-activity .activity-modern-member-panel .activity-member-filter-btn strong{
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:inherit!important;font-size:10px!important;font-weight:800!important;
}
#page-activity .activity-modern-member-panel .activity-member-filter-btn small{
  display:none!important;
}
#page-activity .activity-modern-member-panel .activity-filter-note{
  margin:14px 0 0!important;
  padding:11px!important;
  border:1px solid var(--activity-line-soft)!important;
  border-radius:11px!important;
  background:#0c121b!important;
  color:#687789!important;
  font-size:10px!important;
  line-height:1.55!important;
}
/* Light theme uses the same structure but keeps archive contrast */
html[data-theme="light"] #page-activity{
  --activity-surface:#ffffff;--activity-surface-2:#f8fafc;--activity-line:#dfe5ed;--activity-line-soft:rgba(71,85,105,.13);
  --activity-text:#17202c;--activity-muted:#7b8795;
}
html[data-theme="light"] #page-activity .activity-modern-live,html[data-theme="light"] #page-activity .activity-type-dock,html[data-theme="light"] #page-activity .activity-modern-feed-panel,html[data-theme="light"] #page-activity .activity-modern-member-panel{
  background:#fff!important;border-color:#dfe5ed!important;box-shadow:0 18px 55px rgba(33,46,64,.06)!important;
}
html[data-theme="light"] #page-activity .activity-modern-toolbar{background:#fbfcfe!important;border-color:#e5e9ef!important}
html[data-theme="light"] #page-activity .activity-type-filter-strip .activity-type-filter-btn,html[data-theme="light"] #page-activity .activity-modern-toolbar button{background:#f7f9fc!important;border-color:#e1e6ed!important;color:#677483!important}
html[data-theme="light"] #page-activity .activity-type-filter-strip .activity-type-filter-btn.active{background:#fff0f4!important;color:#a92d4e!important;border-color:#f1a5b8!important}
html[data-theme="light"] #page-activity .activity-feed::before{background:linear-gradient(180deg,transparent,#dfe5ed 4%,#dfe5ed 96%,transparent)}
html[data-theme="light"] #page-activity .activity-feed .activity-type-icon{box-shadow:0 0 0 5px #fff!important;background:#f3f6fa!important;border-color:#dbe2eb!important}
html[data-theme="light"] #page-activity .activity-feed .activity-card:hover{background:linear-gradient(90deg,rgba(30,41,59,.025),transparent 72%)!important}
html[data-theme="light"] #page-activity .activity-chat-line span{color:#263343!important}
html[data-theme="light"] #page-activity .activity-chat-line time,html[data-theme="light"] #page-activity .activity-chat-host,html[data-theme="light"] #page-activity .activity-card-topline>time{color:#8591a0!important}
html[data-theme="light"] #page-activity .activity-card-summary{color:#647181!important}
html[data-theme="light"] #page-activity .activity-modern-member-panel .activity-member-filter-btn:hover{background:#f7f9fc!important;border-color:#e0e6ee!important;color:#1d2937!important}
html[data-theme="light"] #page-activity .activity-modern-member-panel .activity-filter-note{background:#f8fafc!important;border-color:#e7ebf0!important;color:#7b8795!important}
@media (max-width:1100px){#page-activity .activity-modern-layout{grid-template-columns:1fr!important}
#page-activity .activity-modern-member-panel{position:static!important}
#page-activity .activity-modern-member-panel .activity-filter-list{grid-template-columns:repeat(6,minmax(0,1fr))!important}}
@media (max-width:760px){#page-activity .activity-modern-intro{align-items:flex-start!important;flex-direction:column!important;gap:10px!important}
#page-activity .activity-modern-live{margin:0!important}
#page-activity .activity-type-dock{align-items:flex-start!important;flex-direction:column!important;gap:8px!important;padding:10px!important}
#page-activity .activity-type-dock-label{display:none!important}
#page-activity .activity-type-filter-strip{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important}
#page-activity .activity-type-filter-strip .activity-type-filter-btn{width:100%!important}
#page-activity .activity-modern-toolbar{align-items:flex-start!important;flex-direction:column!important}
#page-activity .activity-toolbar-actions{width:100%;overflow-x:auto;padding-bottom:2px}
#page-activity .activity-feed{padding:0 8px 0 10px!important}
#page-activity .activity-feed::before{left:23px!important}
#page-activity .activity-feed .activity-card{grid-template-columns:26px 34px minmax(0,1fr)!important;gap:8px!important;padding:14px 2px!important}
#page-activity .activity-feed .activity-type-icon{width:24px!important;height:24px!important;margin-left:1px!important;box-shadow:0 0 0 4px #0f1520!important}
#page-activity .activity-feed .activity-avatar{width:32px!important;height:32px!important}
#page-activity .activity-card-actions{position:absolute!important;right:2px!important;bottom:9px!important;opacity:1!important;transform:none!important}
#page-activity .activity-card-topline{padding-right:0!important}
#page-activity .activity-card-topline>time{font-size:10px!important}
#page-activity .activity-member-name{font-size:13px!important}
#page-activity .activity-chat-line{grid-template-columns:48px minmax(0,1fr)!important;gap:8px!important}
#page-activity .activity-chat-line time{font-size:10px!important}
#page-activity .activity-chat-line span{font-size:12px!important}
#page-activity .activity-modern-member-panel .activity-filter-list{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
/* v24.11 · activity admin status + vivid icon system */
body:not(.admin-mode) #page-activity .activity-modern-status.admin-only{
  display:none!important;
}
body.admin-mode #page-activity .activity-modern-status.admin-only{
  display:flex!important;
}
#page-activity .activity-filter-type-icon svg.activity-symbol,#page-activity .activity-type-icon svg.activity-symbol{
  width:16px!important;
  height:16px!important;
  fill:currentColor!important;
  stroke:none!important;
  overflow:visible;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.18));
}
#page-activity .activity-feed .activity-type-icon svg.activity-symbol{
  width:15px!important;
  height:15px!important;
}
/* filter icons: icon-guide-like vivid colored symbols */
#page-activity .activity-type-filter-strip .activity-filter-type-icon{
  width:29px!important;
  height:29px!important;
  flex-basis:29px!important;
  border-radius:9px!important;
  position:relative!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.055),0 5px 13px rgba(0,0,0,.16)!important;
}
#page-activity .activity-type-filter-strip .activity-type-filter-btn[data-activity-type="all"] .activity-filter-type-icon{
  color:#ff6b91!important;
  background:linear-gradient(145deg,rgba(255,88,133,.22),rgba(255,88,133,.08))!important;
}
#page-activity .activity-type-filter-strip .activity-type-filter-btn[data-activity-type="broadcast"] .activity-filter-type-icon{
  color:#52dda1!important;
  background:linear-gradient(145deg,rgba(82,221,161,.22),rgba(82,221,161,.07))!important;
}
#page-activity .activity-type-filter-strip .activity-type-filter-btn[data-activity-type="soop_post"] .activity-filter-type-icon{
  color:#b58cff!important;
  background:linear-gradient(145deg,rgba(181,140,255,.23),rgba(181,140,255,.07))!important;
}
#page-activity .activity-type-filter-strip .activity-type-filter-btn[data-activity-type="chat"] .activity-filter-type-icon{
  color:#4ecbff!important;
  background:linear-gradient(145deg,rgba(78,203,255,.24),rgba(78,203,255,.075))!important;
}
#page-activity .activity-type-filter-strip .activity-type-filter-btn:hover .activity-filter-type-icon{
  transform:translateY(-1px) scale(1.03);
}
#page-activity .activity-type-filter-strip .activity-filter-type-icon{
  transition:transform .16s ease,filter .16s ease!important;
}
/* individual feed events use the same icon language */
#page-activity .activity-feed .activity-card[data-tone="chat"] .activity-type-icon{
  color:#4ecbff!important;
  background:linear-gradient(145deg,rgba(78,203,255,.20),rgba(78,203,255,.07))!important;
  border-color:rgba(78,203,255,.26)!important;
}
#page-activity .activity-feed .activity-card[data-tone="live"] .activity-type-icon{
  color:#53dda1!important;
  background:linear-gradient(145deg,rgba(83,221,161,.20),rgba(83,221,161,.07))!important;
  border-color:rgba(83,221,161,.25)!important;
}
#page-activity .activity-feed .activity-card[data-tone="off"] .activity-type-icon{
  color:#ff6478!important;
  background:linear-gradient(145deg,rgba(255,100,120,.20),rgba(255,100,120,.065))!important;
  border-color:rgba(255,100,120,.24)!important;
}
#page-activity .activity-feed .activity-card[data-tone="title"] .activity-type-icon{
  color:#ff9b45!important;
  background:linear-gradient(145deg,rgba(255,155,69,.21),rgba(255,155,69,.07))!important;
  border-color:rgba(255,155,69,.25)!important;
}
#page-activity .activity-feed .activity-card[data-tone="category"] .activity-type-icon{
  color:#b886ff!important;
  background:linear-gradient(145deg,rgba(184,134,255,.22),rgba(184,134,255,.07))!important;
  border-color:rgba(184,134,255,.25)!important;
}
#page-activity .activity-feed .activity-card[data-tone="mode"] .activity-type-icon{
  color:#51d7d0!important;
  background:linear-gradient(145deg,rgba(81,215,208,.20),rgba(81,215,208,.065))!important;
  border-color:rgba(81,215,208,.24)!important;
}
#page-activity .activity-feed .activity-card[data-tone="post"] .activity-type-icon{
  color:#b58cff!important;
  background:linear-gradient(145deg,rgba(181,140,255,.22),rgba(181,140,255,.07))!important;
  border-color:rgba(181,140,255,.25)!important;
}
html[data-theme="light"] #page-activity .activity-type-filter-strip .activity-filter-type-icon{
  box-shadow:inset 0 0 0 1px rgba(31,41,55,.06),0 3px 10px rgba(31,41,55,.08)!important;
}
/* ========================================================================== */
/* v24.12 · FINAL PALETTE CLEANUP                                             */
/* 홈/도감/업순위에서 확정된 neutral slate + pink 시스템으로 잔존 레거시 제거 */
/* ========================================================================== */
/* 1. Legacy variables are remapped in BOTH themes.
   A large part of the old olive/navy look survived because only dark mode
   remapped the original --panel/--primary variables. */
:root,html[data-theme="light"]{
  --bg:var(--ja-bg)!important;
  --bg2:var(--ja-bg)!important;
  --panel:var(--ja-surface)!important;
  --panel2:var(--ja-surface-2)!important;
  --line:var(--ja-line)!important;
  --text:var(--ja-text)!important;
  --muted:var(--ja-muted)!important;
  --primary:var(--ja-accent)!important;
  --accent:var(--ja-accent)!important;
  --shadow:0 12px 34px rgba(30,41,59,.055)!important;
}
html[data-theme="dark"],body.dark{
  --shadow:0 18px 50px rgba(0,0,0,.22)!important;
}
/* Light mode must never inherit dark navy card fills. */
html[data-theme="light"] :is( #page-activity .activity-feed-panel, #page-activity .activity-filter-panel, #page-activity .activity-type-dock, #page-activity .activity-modern-member-panel, #page-vod .vod-toolbar, #page-posters .poster-archive-card, #page-uprank .up-rank-controls, #page-uprank .up-rank-filterbar, #page-uprank .up-rank-source, #page-uprank .up-rank-crew-pins, #page-calendar .calendar-card, #page-calendar .day ){
  background:var(--ja-surface)!important;
  color:var(--ja-text)!important;
  border-color:var(--ja-line)!important;
}
/* 2. POSTER — remove the old pink framed dashboard header / tinted cards. */
#page-posters.poster-archive-page{
  max-width:1500px!important;
  padding-top:30px!important;
}
#page-posters .poster-archive-header{
  display:flex!important;
  align-items:flex-end!important;
  justify-content:space-between!important;
  gap:24px!important;
  margin:0 0 22px!important;
  padding:0 4px 22px!important;
  border:0!important;
  border-bottom:1px solid var(--ja-line)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
#page-posters .poster-archive-header::before{
  top:-17px!important;
  left:4px!important;
  color:var(--ja-accent)!important;
}
#page-posters .poster-archive-header .eyebrow{
  color:var(--ja-accent)!important;
}
#page-posters #openPosterManager{
  min-height:40px!important;
  padding:0 14px!important;
  border-radius:11px!important;
  background:var(--ja-accent)!important;
  border-color:var(--ja-accent)!important;
  box-shadow:none!important;
}
#page-posters .poster-filter-tabs{
  display:inline-flex!important;
  width:auto!important;
  gap:5px!important;
  margin:0 0 18px!important;
  padding:4px!important;
  border:1px solid var(--ja-line)!important;
  border-radius:12px!important;
  background:var(--ja-surface)!important;
  box-shadow:none!important;
}
#page-posters .poster-filter-tabs button{
  min-height:36px!important;
  padding:0 14px!important;
  border:1px solid transparent!important;
  border-radius:9px!important;
  background:transparent!important;
  color:var(--ja-muted)!important;
  box-shadow:none!important;
}
#page-posters .poster-filter-tabs button:hover{
  background:var(--ja-surface-2)!important;
  color:var(--ja-text)!important;
}
#page-posters .poster-filter-tabs button.active,#page-posters .poster-filter-tabs button.sub.active{
  background:var(--ja-accent-soft)!important;
  border-color:color-mix(in srgb,var(--ja-accent) 35%,var(--ja-line))!important;
  color:var(--ja-accent)!important;
  box-shadow:none!important;
}
#page-posters .poster-archive-card{
  background:var(--ja-surface)!important;
  border-color:var(--ja-line)!important;
  box-shadow:none!important;
}
#page-posters .poster-archive-card:hover{
  border-color:color-mix(in srgb,var(--ja-accent) 38%,var(--ja-line))!important;
  box-shadow:0 14px 38px color-mix(in srgb,var(--ja-accent) 6%,transparent)!important;
}
#page-posters .poster-image-stage{
  background:var(--ja-surface-2)!important;
}
#page-posters .poster-category-badge{
  background:color-mix(in srgb,var(--ja-accent) 9%,var(--ja-surface))!important;
  border-color:color-mix(in srgb,var(--ja-accent) 28%,var(--ja-line))!important;
  color:var(--ja-accent)!important;
  box-shadow:none!important;
}
#page-posters .poster-card-footer{
  background:var(--ja-surface)!important;
  border-color:var(--ja-line)!important;
}
#page-posters .poster-card-footer>span{
  background:var(--ja-surface-2)!important;
  color:var(--ja-accent)!important;
}
html[data-theme="dark"] #page-posters .poster-archive-header,html[data-theme="dark"] #page-posters .poster-filter-tabs,html[data-theme="dark"] #page-posters .poster-archive-card,html[data-theme="dark"] #page-posters .poster-card-footer{
  background:transparent!important;
}
html[data-theme="dark"] #page-posters .poster-archive-card,html[data-theme="dark"] #page-posters .poster-card-footer{
  background:var(--ja-surface)!important;
}
/* 3. UP RANK — eradicate the old olive/green page family. */
#page-uprank.up-rank-page{
  --rank-bg:var(--ja-bg)!important;
  --rank-card:var(--ja-surface)!important;
  --rank-card-2:var(--ja-surface-2)!important;
  --rank-line:var(--ja-line)!important;
  --rank-text:var(--ja-text)!important;
  --rank-muted:var(--ja-muted)!important;
  --rank-accent:var(--ja-accent)!important;
  --rank-accent-soft:var(--ja-accent-soft)!important;
  --crew-jinho:var(--ja-accent)!important;
  --crew-jinho-accent:var(--ja-accent)!important;
  --crew-jinho-bg:color-mix(in srgb,var(--ja-accent) 5%,var(--ja-surface))!important;
  --crew-jinho-bg-strong:color-mix(in srgb,var(--ja-accent) 9%,var(--ja-surface-2))!important;
  --crew-jinho-border:color-mix(in srgb,var(--ja-accent) 36%,var(--ja-line))!important;
  --crew-jindegi:#8b8cff!important;
  --crew-jindegi-accent:#7c7dff!important;
  --crew-jindegi-bg:color-mix(in srgb,#7c7dff 5%,var(--ja-surface))!important;
  --crew-jindegi-bg-strong:color-mix(in srgb,#7c7dff 9%,var(--ja-surface-2))!important;
  --crew-jindegi-border:color-mix(in srgb,#7c7dff 34%,var(--ja-line))!important;
  background:var(--ja-bg)!important;
  color:var(--ja-text)!important;
}
#page-uprank :is(.up-rank-controls,.up-rank-filterbar,.up-rank-source,.up-rank-crew-pins,.up-rank-podium,.up-rank-podium-list,.up-rank-podium-card,.up-rank-pin-card,.up-rank-table td,.up-rank-search,.up-rank-sort-button,.up-rank-refresh){
  background:var(--ja-surface)!important;
  border-color:var(--ja-line)!important;
  color:var(--ja-text)!important;
  box-shadow:none!important;
}
#page-uprank :is(.up-rank-search,.up-rank-sort-button,.up-rank-filterbar button,.up-rank-pin-card,.up-rank-link a){
  background:var(--ja-surface-2)!important;
}
#page-uprank .up-rank-podium-card.rank-1{
  background:linear-gradient(90deg,rgba(240,183,66,.075),var(--ja-surface) 44%)!important;
}
#page-uprank .up-rank-podium-card.rank-2{
  background:linear-gradient(90deg,rgba(148,163,184,.055),var(--ja-surface) 44%)!important;
}
#page-uprank .up-rank-podium-card.rank-3{
  background:linear-gradient(90deg,rgba(196,139,92,.055),var(--ja-surface) 44%)!important;
}
#page-uprank .up-rank-pin-card.is-jinho,#page-uprank .up-rank-pin-card.is-jindegi{
  background:var(--ja-surface-2)!important;
  border-width:1px!important;
}
#page-uprank .up-rank-filterbar button[data-up-rank-filter="jindegi"].active{
  color:#7c7dff!important;
  background:color-mix(in srgb,#7c7dff 8%,var(--ja-surface-2))!important;
}
#page-uprank .up-rank-filterbar button[data-up-rank-filter="jinho"].active{
  color:var(--ja-accent)!important;
  background:var(--ja-accent-soft)!important;
}
/* 4. VOD — remove green selects/search and old tinted cards. */
#page-vod .vod-toolbar{
  background:var(--ja-surface)!important;
  border-color:var(--ja-line)!important;
  box-shadow:none!important;
}
#page-vod :is(.vod-search,.vod-toolbar select){
  background:var(--ja-surface-2)!important;
  border:1px solid var(--ja-line)!important;
  color:var(--ja-text)!important;
  box-shadow:none!important;
}
#page-vod :is(.vod-search,.vod-toolbar select):focus-within{
  border-color:color-mix(in srgb,var(--ja-accent) 50%,var(--ja-line))!important;
}
#page-vod .vod-chip-row button{
  background:var(--ja-surface)!important;
  border-color:var(--ja-line)!important;
  color:var(--ja-muted)!important;
}
#page-vod .vod-chip-row button:hover{
  background:var(--ja-surface-2)!important;
  color:var(--ja-text)!important;
}
#page-vod .vod-chip-row button.active{
  background:var(--ja-accent)!important;
  border-color:var(--ja-accent)!important;
  color:#fff!important;
}
#page-vod .vod-library-card{
  background:var(--ja-surface)!important;
  border-color:var(--ja-line)!important;
  box-shadow:none!important;
}
#page-vod .vod-library-card:hover{
  border-color:color-mix(in srgb,var(--ja-accent) 35%,var(--ja-line))!important;
  box-shadow:0 14px 36px color-mix(in srgb,var(--ja-accent) 6%,transparent)!important;
}
#page-vod .vod-library-thumb{background:var(--ja-surface-2)!important}
#page-vod .vod-library-copy>span i{
  background:var(--ja-surface-2)!important;
  color:var(--ja-accent)!important;
}
#page-vod .vod-pagination button{
  background:var(--ja-surface)!important;
  border-color:var(--ja-line)!important;
  color:var(--ja-text)!important;
}
#page-vod .vod-pagination button.active{
  background:var(--ja-accent)!important;
  border-color:var(--ja-accent)!important;
  color:#fff!important;
}
/* 5. CALENDAR — day focus uses neutral surface + pink, never olive fill. */
#page-calendar .day,html[data-theme="dark"] #page-calendar .day,html[data-theme="light"] #page-calendar .day{
  background:var(--ja-surface)!important;
  border-color:var(--ja-line)!important;
}
#page-calendar .day:not(.outside):hover,#page-calendar .day:not(.outside):focus-within,#page-calendar .day.event-detail-day,#page-calendar .day.today-jump,html[data-theme="dark"] #page-calendar .day:not(.outside):hover,html[data-theme="dark"] #page-calendar .day:not(.outside):focus-within,html[data-theme="dark"] #page-calendar .day.event-detail-day,html[data-theme="dark"] #page-calendar .day.today-jump{
  background:var(--ja-surface-2)!important;
  color:var(--ja-text)!important;
}
#page-calendar .day.today,#page-calendar .day.today:hover,#page-calendar .day.today:focus-within,#page-calendar .day.today.event-detail-day,#page-calendar .day.today.today-jump{
  background:linear-gradient(180deg,color-mix(in srgb,var(--ja-accent) 7%,var(--ja-surface)),var(--ja-surface))!important;
  border-color:var(--ja-accent)!important;
  box-shadow:inset 0 0 0 1px var(--ja-accent)!important;
}
#page-calendar .event-pill,#page-calendar .day-summary-item,#page-calendar .mobile-event-item{
  background:var(--ja-surface-2)!important;
  border-color:var(--ja-line)!important;
  border-left-color:color-mix(in srgb,var(--event,var(--ja-accent)) 72%,var(--ja-line))!important;
}
#page-calendar .event-pill:hover,#page-calendar .day-summary-item:hover,#page-calendar .mobile-event-item:hover{
  background:var(--ja-surface-3)!important;
}
/* 6. Event popover / day summary / legacy detail — one neutral dialog system. */
.event-popover,#daySummaryModal .day-summary-modal,.schedule-detail-modal,.day-summary-modal,.portal-modal,.monthly-history-panel{
  background:var(--ja-surface)!important;
  border-color:var(--ja-line)!important;
  color:var(--ja-text)!important;
  box-shadow:0 28px 80px rgba(0,0,0,.26)!important;
}
#daySummaryModal .day-summary-head,.monthly-history-head{
  background:var(--ja-surface)!important;
  border-color:var(--ja-line)!important;
}
.event-popover-memo,.event-popover-notice,#daySummaryModal .daily-broadcast-card,#daySummaryModal .day-summary-item,.event-notice-card,.mh-section,.mh-summary-card,.mh-broadcast-card,.mh-top-row{
  background:var(--ja-surface-2)!important;
  border-color:var(--ja-line)!important;
  color:var(--ja-text)!important;
  box-shadow:none!important;
}
#daySummaryModal .daily-broadcast-card{
  border-color:var(--ja-line)!important;
}
#daySummaryModal .daily-broadcast-icon{
  background:var(--ja-accent-soft)!important;
  color:var(--ja-accent)!important;
}
#daySummaryModal .day-summary-item{
  border-left:3px solid color-mix(in srgb,var(--event,var(--ja-accent)) 70%,var(--ja-line))!important;
}
#daySummaryModal .day-summary-item:hover{
  background:var(--ja-surface-3)!important;
  border-color:var(--ja-line-strong)!important;
  border-left-color:var(--event,var(--ja-accent))!important;
}
#daySummaryModal .day-summary-time{
  color:var(--ja-muted)!important;
}
#daySummaryModal .day-summary-star{color:var(--ja-soft)!important}
#daySummaryModal .day-summary-star:hover{color:var(--ja-accent)!important}
.event-popover-actions,.detail-actions{
  background:var(--ja-surface)!important;
  border-color:var(--ja-line)!important;
}
.event-popover-actions .btn,.detail-actions .btn,#daySummaryModal .daily-broadcast-manage{
  background:var(--ja-surface-2)!important;
  border-color:var(--ja-line)!important;
  color:var(--ja-text)!important;
  box-shadow:none!important;
}
.event-popover-close,.ct-trend-close,.monthly-history-head button{
  background:var(--ja-surface-2)!important;
  border-color:var(--ja-line)!important;
  color:var(--ja-muted)!important;
}
/* Light dialog backdrop stays light/clean; dark backdrop remains deep neutral. */
html[data-theme="light"] :is(.event-popover-layer,#daySummaryModal.day-summary-layer,.modal-layer,.monthly-history-layer){
  --dialog-backdrop:rgba(31,41,55,.20);
}
html[data-theme="dark"] :is(.event-popover-layer,#daySummaryModal.day-summary-layer,.modal-layer,.monthly-history-layer){
  --dialog-backdrop:rgba(3,7,12,.74);
}
#daySummaryModal.day-summary-layer,.modal-layer,.monthly-history-layer{
  background:var(--dialog-backdrop,rgba(3,7,12,.7))!important;
}
@media(max-width:680px){#page-posters .poster-archive-header{
    align-items:flex-start!important;
    padding:0 0 18px!important;
  }}
/* =========================================================
   v24.13 · DAY SUMMARY MODAL — remove legacy olive/green shell
   The legacy bundle has highly-specific dark selectors at the end,
   so these overrides intentionally match/exceed that specificity.
   Semantic event/category colors remain only as small accents.
   ========================================================= */
#daySummaryModal.day-summary-layer{
  background:rgba(3,7,12,.72)!important;
  backdrop-filter:blur(7px)!important;
  -webkit-backdrop-filter:blur(7px)!important;
}
html[data-theme="dark"] #daySummaryModal .day-summary-modal{
  background:#0f1622!important;
  border-color:#283548!important;
  color:#eef3f9!important;
  box-shadow:0 30px 90px rgba(0,0,0,.56)!important;
}
html[data-theme="dark"] #daySummaryModal .day-summary-head{
  background:#0f1622!important;
  border-color:#283548!important;
}
html[data-theme="dark"] #daySummaryModal #daySummaryMeta{
  background:#182231!important;
  color:#91a0b2!important;
}
html[data-theme="dark"] #daySummaryModal .day-summary-close,html[data-theme="dark"] #daySummaryModal .day-summary-nav button,html[data-theme="dark"] #daySummaryModal .daily-broadcast-manage{
  background:#141d2a!important;
  border-color:#2a3749!important;
  color:#e7edf5!important;
}
html[data-theme="dark"] #daySummaryModal .day-summary-nav{
  background:#0f1622!important;
  border-color:#283548!important;
}
html[data-theme="dark"] #daySummaryModal .daily-broadcast-card{
  background:#141d2a!important;
  border-color:#2a3749!important;
  color:#eef3f9!important;
}
html[data-theme="dark"] #daySummaryModal .daily-broadcast-icon{
  background:rgba(255,64,112,.11)!important;
  color:#ff4f7b!important;
}
html[data-theme="dark"] #daySummaryModal .daily-broadcast-copy strong{
  color:#eef3f9!important;
}
html[data-theme="dark"] #daySummaryModal .daily-broadcast-copy p{
  color:#8f9bad!important;
}
html[data-theme="dark"] #daySummaryModal .daily-vod-links .vod-detail-link{
  color:#ff4f7b!important;
}
html[data-theme="dark"] #daySummaryModal .day-summary-list{
  background:#0f1622!important;
}
html[data-theme="dark"] #daySummaryModal .day-summary-item{
  background:linear-gradient(
    90deg,
    color-mix(in srgb,var(--event,#ff4f7b) 7%,#141d2a),
    #141d2a 56%
  )!important;
  border-color:color-mix(in srgb,var(--event,#ff4f7b) 32%,#2a3749)!important;
  border-left-color:var(--event,#ff4f7b)!important;
  color:#eef3f9!important;
  box-shadow:none!important;
}
html[data-theme="dark"] #daySummaryModal .day-summary-item:hover{
  background:linear-gradient(
    90deg,
    color-mix(in srgb,var(--event,#ff4f7b) 12%,#182231),
    #182231 58%
  )!important;
  border-color:color-mix(in srgb,var(--event,#ff4f7b) 42%,#354458)!important;
  border-left-color:var(--event,#ff4f7b)!important;
}
html[data-theme="dark"] #daySummaryModal .day-summary-time{
  color:color-mix(in srgb,var(--event,#ff4f7b) 66%,#aeb9c7)!important;
}
html[data-theme="dark"] #daySummaryModal .day-summary-copy b{color:#f3f6fa!important}
html[data-theme="dark"] #daySummaryModal .day-summary-copy small{color:#8f9bad!important}
html[data-theme="dark"] #daySummaryModal .day-summary-star{color:#718096!important}
html[data-theme="dark"] #daySummaryModal .day-summary-star:hover{color:#ff4f7b!important}
html[data-theme="dark"] #daySummaryModal .day-summary-add{
  border-color:rgba(255,79,123,.42)!important;
  color:#ff4f7b!important;
  background:rgba(255,79,123,.025)!important;
}
/* Light mode: true light surfaces — no navy/green residue. */
html[data-theme="light"] #daySummaryModal.day-summary-layer{
  background:rgba(31,41,55,.22)!important;
}
html[data-theme="light"] #daySummaryModal .day-summary-modal,html[data-theme="light"] #daySummaryModal .day-summary-head,html[data-theme="light"] #daySummaryModal .day-summary-nav,html[data-theme="light"] #daySummaryModal .day-summary-list{
  background:#ffffff!important;
  border-color:#e4e8ee!important;
  color:#171a21!important;
}
html[data-theme="light"] #daySummaryModal #daySummaryMeta,html[data-theme="light"] #daySummaryModal .day-summary-close,html[data-theme="light"] #daySummaryModal .day-summary-nav button,html[data-theme="light"] #daySummaryModal .daily-broadcast-manage{
  background:#f6f8fb!important;
  border-color:#e1e6ed!important;
  color:#303846!important;
}
html[data-theme="light"] #daySummaryModal .daily-broadcast-card{
  background:#f8fafc!important;
  border-color:#e1e6ed!important;
  color:#171a21!important;
}
html[data-theme="light"] #daySummaryModal .daily-broadcast-icon{
  background:#fff0f4!important;
  color:#f43f6f!important;
}
html[data-theme="light"] #daySummaryModal .day-summary-item{
  background:linear-gradient(
    90deg,
    color-mix(in srgb,var(--event,#f43f6f) 5%,#ffffff),
    #ffffff 54%
  )!important;
  border-color:color-mix(in srgb,var(--event,#f43f6f) 25%,#dfe5ec)!important;
  border-left-color:var(--event,#f43f6f)!important;
  color:#171a21!important;
}
html[data-theme="light"] #daySummaryModal .day-summary-item:hover{
  background:linear-gradient(
    90deg,
    color-mix(in srgb,var(--event,#f43f6f) 8%,#f7f9fc),
    #f7f9fc 58%
  )!important;
}
html[data-theme="light"] #daySummaryModal .day-summary-add{
  border-color:rgba(244,63,111,.34)!important;
  color:#f43f6f!important;
  background:#fff!important;
}
@media(max-width:700px){#daySummaryModal.day-summary-layer{
    background:rgba(3,7,12,.72)!important;
    backdrop-filter:blur(7px)!important;
    -webkit-backdrop-filter:blur(7px)!important;
  }
html[data-theme="light"] #daySummaryModal.day-summary-layer{
    background:rgba(31,41,55,.22)!important;
  }}
/* ============================================================
   v24.14 · DARK CALENDAR CATEGORY COLOR VISIBILITY
   Light mode remains unchanged. Dark mode keeps the unified
   neutral surfaces while making each schedule category legible.
   ============================================================ */
html[data-theme="dark"] #page-calendar .event-pill,html[data-theme="dark"] #page-calendar .mobile-event-item{
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb,var(--event,var(--ja-accent)) 18%,#182230) 0%,
      color-mix(in srgb,var(--event,var(--ja-accent)) 10%,#151e2b) 48%,
      #131b27 100%
    )!important;
  border-color:color-mix(in srgb,var(--event,var(--ja-accent)) 46%,#2a3749)!important;
  border-left:4px solid var(--event,var(--ja-accent))!important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb,var(--event,var(--ja-accent)) 5%,transparent),
    0 1px 0 rgba(255,255,255,.015)!important;
}
html[data-theme="dark"] #page-calendar .event-pill.multi-day.range-middle,html[data-theme="dark"] #page-calendar .event-pill.multi-day.range-end{
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb,var(--event,var(--ja-accent)) 14%,#17212e),
      color-mix(in srgb,var(--event,var(--ja-accent)) 7%,#141d29)
    )!important;
  border-top-color:color-mix(in srgb,var(--event,var(--ja-accent)) 48%,#2a3749)!important;
  border-bottom-color:color-mix(in srgb,var(--event,var(--ja-accent)) 48%,#2a3749)!important;
}
html[data-theme="dark"] #page-calendar .event-pill:hover,html[data-theme="dark"] #page-calendar .mobile-event-item:hover{
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb,var(--event,var(--ja-accent)) 25%,#1b2737) 0%,
      color-mix(in srgb,var(--event,var(--ja-accent)) 13%,#182331) 52%,
      #17212e 100%
    )!important;
  border-color:color-mix(in srgb,var(--event,var(--ja-accent)) 64%,#354458)!important;
}
html[data-theme="dark"] #page-calendar .event-pill time{
  color:color-mix(in srgb,var(--event,var(--ja-accent)) 82%,#f4f7fb)!important;
  text-shadow:0 0 12px color-mix(in srgb,var(--event,var(--ja-accent)) 16%,transparent)!important;
}
html[data-theme="dark"] #page-calendar .event-title{
  color:#f3f6fa!important;
}
html[data-theme="dark"] #page-calendar .event-sub-badge,html[data-theme="dark"] #page-calendar .sub-category-badge{
  background:color-mix(in srgb,var(--sub,var(--event,var(--ja-accent))) 24%,#1a2432)!important;
  border-color:color-mix(in srgb,var(--sub,var(--event,var(--ja-accent))) 64%,#344255)!important;
  color:color-mix(in srgb,var(--sub,var(--event,var(--ja-accent))) 82%,#f2f5f9)!important;
}
/* Dark category filter chips: visible category identity without old saturated fills. */
html[data-theme="dark"] #page-calendar .filter{
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--filter,#788291) 16%,#182230),
      color-mix(in srgb,var(--filter,#788291) 9%,#151e2b)
    )!important;
  border-color:color-mix(in srgb,var(--filter,#788291) 44%,#2a3749)!important;
  color:color-mix(in srgb,var(--filter,#788291) 68%,#e7edf5)!important;
}
html[data-theme="dark"] #page-calendar .filter::before{
  box-shadow:
    0 0 0 2px color-mix(in srgb,var(--filter,#788291) 22%,transparent),
    0 0 9px color-mix(in srgb,var(--filter,#788291) 28%,transparent)!important;
}
html[data-theme="dark"] #page-calendar .filter.active{
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--filter,#788291) 28%,#192433),
      color-mix(in srgb,var(--filter,#788291) 16%,#151f2c)
    )!important;
  border-color:color-mix(in srgb,var(--filter,#788291) 72%,#354458)!important;
  color:#f5f7fb!important;
}
/* ============================================================
   V24.15 · SBO-inspired motion system
   - cinematic home section reveals
   - page enter transitions
   - animated calendar category filtering / reflow
   ============================================================ */
:root{
  --ja-motion-ease:cubic-bezier(.16,1,.3,1);
  --ja-motion-ease-soft:cubic-bezier(.22,1,.36,1);
}
/* Page changes: short and restrained, so navigation feels connected instead of flashing. */
.app-page.active:not(#page-home){
  animation:jaPageEnter .42s var(--ja-motion-ease) both;
}
@keyframes jaPageEnter{
  from{opacity:0;transform:translate3d(0,12px,0);filter:blur(3px)}
  to{opacity:1;transform:none;filter:none}
}
/* Home: stronger section-to-section handoff while keeping the existing IntersectionObserver. */
#page-home .home-v23 [data-home-reveal]{
  opacity:0!important;
  transform:translate3d(0,46px,0) scale(.988)!important;
  filter:blur(8px);
  transition:
    opacity .62s var(--reveal-delay,0ms) ease,
    transform .82s var(--reveal-delay,0ms) var(--ja-motion-ease),
    filter .62s var(--reveal-delay,0ms) ease!important;
  will-change:opacity,transform,filter;
}
#page-home .home-v23 [data-home-reveal].is-visible{
  opacity:1!important;
  transform:translate3d(0,0,0) scale(1)!important;
  filter:blur(0);
}
#page-home .home-v23 [data-home-reveal] .home-v23-wide-head,#page-home .home-v23 [data-home-reveal] .home-v23-section>header,#page-home .home-v23 [data-home-reveal] .home-v23-archive-copy{
  opacity:0;
  transform:translate3d(0,18px,0);
  transition:opacity .48s calc(var(--reveal-delay,0ms) + 70ms) ease,transform .64s calc(var(--reveal-delay,0ms) + 70ms) var(--ja-motion-ease);
}
#page-home .home-v23 [data-home-reveal].is-visible .home-v23-wide-head,#page-home .home-v23 [data-home-reveal].is-visible .home-v23-section>header,#page-home .home-v23 [data-home-reveal].is-visible .home-v23-archive-copy{
  opacity:1;transform:none;
}
#page-home .home-v23 .home-v23-overview.is-visible .home-v23-section:nth-child(1){animation:jaHomeColumnIn .58s .05s var(--ja-motion-ease) both}
#page-home .home-v23 .home-v23-overview.is-visible .home-v23-section:nth-child(2){animation:jaHomeColumnIn .62s .11s var(--ja-motion-ease) both}
#page-home .home-v23 .home-v23-overview.is-visible .home-v23-section:nth-child(3){animation:jaHomeColumnIn .66s .17s var(--ja-motion-ease) both}
@keyframes jaHomeColumnIn{
  from{opacity:.15;transform:translate3d(0,22px,0)}
  to{opacity:1;transform:none}
}
#page-home .home-v23-member,#page-home .home-v23-vod-card,#page-home .home-v23-live-card,#page-home .home-v23-activity-row{
  transition:transform .28s var(--ja-motion-ease),opacity .28s ease,border-color .28s ease,background-color .28s ease!important;
}
@media (hover:hover){#page-home .home-v23-member:hover,#page-home .home-v23-vod-card:hover,#page-home .home-v23-live-card:hover{transform:translate3d(0,-5px,0)}
#page-home .home-v23-activity-row:hover{transform:translate3d(5px,0,0)}}
/* Calendar filters: cards move/cross-fade to their new emphasis order instead of snapping. */
#page-calendar #categoryFilters .filter{
  transition:transform .24s var(--ja-motion-ease),opacity .24s ease,background-color .24s ease,border-color .24s ease,color .24s ease,box-shadow .24s ease!important;
}
#page-calendar #categoryFilters .filter:active{transform:scale(.94)}
#page-calendar #calendarGrid .event-pill{
  transition:opacity .3s ease,transform .36s var(--ja-motion-ease),filter .3s ease,background-color .3s ease,border-color .3s ease!important;
  transform-origin:center center;
}
#page-calendar #calendarGrid .event-pill.category-dimmed{
  transform:scale(.975);
}
#page-calendar #calendarGrid .event-pill.category-focused{
  transform:translateZ(0) scale(1);
}
/* Chrome/Edge View Transitions: preserve each event as it changes position after a filter click. */
html.calendar-filter-transition::view-transition-group(*){
  animation-duration:.42s;
  animation-timing-function:var(--ja-motion-ease);
}
html.calendar-filter-transition::view-transition-old(*){
  animation-duration:.28s;
  animation-timing-function:ease;
}
html.calendar-filter-transition::view-transition-new(*){
  animation-duration:.42s;
  animation-timing-function:var(--ja-motion-ease);
}
@media (prefers-reduced-motion:reduce){.app-page.active:not(#page-home){animation:none!important}
#page-home .home-v23 [data-home-reveal],#page-home .home-v23 [data-home-reveal] .home-v23-wide-head,#page-home .home-v23 [data-home-reveal] .home-v23-section>header,#page-home .home-v23 [data-home-reveal] .home-v23-archive-copy{
    opacity:1!important;transform:none!important;filter:none!important;transition:none!important;
  }
#page-home .home-v23 .home-v23-overview.is-visible .home-v23-section{animation:none!important}
#page-calendar #calendarGrid .event-pill,#page-calendar #categoryFilters .filter{transition:none!important;transform:none!important}}
/* ============================================================
   V24.16 · SBO scene-transition correction
   The reference uses a full-screen scene handoff, not a simple
   translate-up page fade. Calendar filter motion keeps stable
   element identities so remaining pills physically reflow.
   ============================================================ */
/* Disable the previous generic page-enter animation. */
.app-page.active:not(#page-home){animation:none!important}
/* Home reveal: zoom/open rather than a vertical slide. */
#page-home .home-v23 [data-home-reveal]{
  opacity:.08!important;
  transform:scale(.955)!important;
  filter:blur(7px);
  clip-path:inset(5% 2% 5% 2% round 18px);
  transition:
    opacity .52s var(--reveal-delay,0ms) ease,
    transform .72s var(--reveal-delay,0ms) cubic-bezier(.16,1,.3,1),
    filter .52s var(--reveal-delay,0ms) ease,
    clip-path .72s var(--reveal-delay,0ms) cubic-bezier(.16,1,.3,1)!important;
}
#page-home .home-v23 [data-home-reveal].is-visible{
  opacity:1!important;
  transform:scale(1)!important;
  filter:blur(0);
  clip-path:inset(0 0 0 0 round 0);
}
#page-home .home-v23 [data-home-reveal] .home-v23-wide-head,#page-home .home-v23 [data-home-reveal] .home-v23-section>header,#page-home .home-v23 [data-home-reveal] .home-v23-archive-copy{
  transform:scale(.97)!important;
}
#page-home .home-v23 [data-home-reveal].is-visible .home-v23-wide-head,#page-home .home-v23 [data-home-reveal].is-visible .home-v23-section>header,#page-home .home-v23 [data-home-reveal].is-visible .home-v23-archive-copy{
  transform:scale(1)!important;
}
/* Global SBO-like scene cover used only when switching real app pages. */
.app-scene-transition{
  position:fixed;
  inset:0;
  z-index:2147483000;
  overflow:hidden;
  display:grid;
  place-items:center;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%,rgba(38,73,110,.27),transparent 30%),
    linear-gradient(145deg,#08101a 0%,#09121f 48%,#05090f 100%);
  isolation:isolate;
}
.app-scene-transition::before,.app-scene-transition::after{
  content:"JA";
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%) scale(.66) rotate(-4deg);
  font:900 min(54vw,760px)/.7 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:-.12em;
  color:transparent;
  -webkit-text-stroke:2px rgba(129,190,232,.10);
  opacity:0;
  white-space:nowrap;
}
.app-scene-transition::after{
  transform:translate(-46%,-48%) scale(.5) rotate(7deg);
  -webkit-text-stroke:1px rgba(255,74,126,.08);
  filter:blur(1px);
}
.app-scene-transition__mesh{
  position:absolute;inset:-20%;
  background:
    linear-gradient(120deg,transparent 34%,rgba(58,101,143,.14) 49%,transparent 58%),
    linear-gradient(300deg,transparent 42%,rgba(255,74,126,.07) 52%,transparent 60%);
  transform:scale(.7) rotate(-4deg);
  opacity:0;
}
.app-scene-transition__mark{
  position:relative;
  z-index:2;
  display:flex;
  align-items:baseline;
  gap:.45rem;
  transform:scale(.68);
  opacity:0;
  filter:blur(9px);
  color:#f7fbff;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.app-scene-transition__mark span{font-size:clamp(15px,1.1vw,20px);font-weight:600;opacity:.68}
.app-scene-transition__mark b{font-size:clamp(26px,2.1vw,40px);font-weight:900;letter-spacing:.04em}
.app-scene-transition__mark i{
  position:absolute;left:50%;top:calc(100% + 18px);width:88px;height:2px;
  transform:translateX(-50%) scaleX(.2);transform-origin:center;
  background:linear-gradient(90deg,transparent,#67c8ff,#ff4a7e,transparent);
  opacity:.65;
}
.app-scene-transition__mark small{
  position:absolute;left:50%;top:calc(100% + 29px);transform:translateX(-50%);
  font-size:10px;font-weight:800;letter-spacing:.22em;color:#8fa2b7;white-space:nowrap;
}
.app-scene-transition.is-covering{
  visibility:visible;
  pointer-events:auto;
  animation:jaSceneCover .30s cubic-bezier(.2,.72,.2,1) forwards;
}
.app-scene-transition.is-covering::before{animation:jaSceneGlyphIn .30s cubic-bezier(.18,.82,.24,1) forwards}
.app-scene-transition.is-covering::after{animation:jaSceneGlyphInAlt .30s cubic-bezier(.18,.82,.24,1) forwards}
.app-scene-transition.is-covering .app-scene-transition__mesh{animation:jaSceneMeshIn .30s ease forwards}
.app-scene-transition.is-covering .app-scene-transition__mark{animation:jaSceneMarkIn .30s cubic-bezier(.16,1,.3,1) forwards}
.app-scene-transition.is-covering .app-scene-transition__mark i{animation:jaSceneLineIn .30s ease forwards}
.app-scene-transition.is-revealing{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  animation:jaSceneReveal .46s cubic-bezier(.22,1,.36,1) forwards;
}
.app-scene-transition.is-revealing::before{opacity:.46;animation:jaSceneGlyphOut .46s cubic-bezier(.22,1,.36,1) forwards}
.app-scene-transition.is-revealing::after{opacity:.28;animation:jaSceneGlyphOutAlt .46s cubic-bezier(.22,1,.36,1) forwards}
.app-scene-transition.is-revealing .app-scene-transition__mesh{opacity:.5;animation:jaSceneMeshOut .46s ease forwards}
.app-scene-transition.is-revealing .app-scene-transition__mark{opacity:1;filter:none;animation:jaSceneMarkOut .40s ease forwards}
@keyframes jaSceneCover{from{opacity:0}to{opacity:1}}
@keyframes jaSceneGlyphIn{from{opacity:0;transform:translate(-50%,-50%) scale(.55) rotate(-8deg);filter:blur(12px)}to{opacity:.46;transform:translate(-50%,-50%) scale(1.05) rotate(-2deg);filter:blur(0)}}
@keyframes jaSceneGlyphInAlt{from{opacity:0;transform:translate(-46%,-48%) scale(.42) rotate(11deg)}to{opacity:.28;transform:translate(-46%,-48%) scale(.9) rotate(5deg)}}
@keyframes jaSceneMeshIn{from{opacity:0;transform:scale(.7) rotate(-8deg)}to{opacity:.58;transform:scale(1.04) rotate(0)}}
@keyframes jaSceneMarkIn{from{opacity:0;transform:scale(.68);filter:blur(9px)}to{opacity:1;transform:scale(1);filter:blur(0)}}
@keyframes jaSceneLineIn{from{transform:translateX(-50%) scaleX(.15);opacity:0}to{transform:translateX(-50%) scaleX(1);opacity:.75}}
@keyframes jaSceneReveal{0%{opacity:1}58%{opacity:.98}100%{opacity:0;visibility:hidden}}
@keyframes jaSceneGlyphOut{from{opacity:.46;transform:translate(-50%,-50%) scale(1.05) rotate(-2deg)}to{opacity:0;transform:translate(-50%,-50%) scale(1.62) rotate(2deg);filter:blur(10px)}}
@keyframes jaSceneGlyphOutAlt{from{opacity:.28;transform:translate(-46%,-48%) scale(.9) rotate(5deg)}to{opacity:0;transform:translate(-46%,-48%) scale(1.5) rotate(0)}}
@keyframes jaSceneMeshOut{from{opacity:.58;transform:scale(1.04)}to{opacity:0;transform:scale(1.35)}}
@keyframes jaSceneMarkOut{0%{opacity:1;transform:scale(1);filter:blur(0)}65%{opacity:.15;transform:scale(1.12);filter:blur(3px)}100%{opacity:0;transform:scale(1.18);filter:blur(6px)}}
/* Current page zooms into the cover; next page resolves underneath it. */
body.app-scene-out .app-page.active{
  animation:jaScenePageOut .30s cubic-bezier(.32,.02,.3,1) both!important;
  transform-origin:50% 45%;
  will-change:opacity,transform,filter;
}
body.app-scene-in .app-page.active{
  animation:jaScenePageIn .46s cubic-bezier(.16,1,.3,1) both!important;
  transform-origin:50% 42%;
  will-change:opacity,transform,filter;
}
@keyframes jaScenePageOut{from{opacity:1;transform:scale(1);filter:blur(0)}to{opacity:.08;transform:scale(1.045);filter:blur(4px)}}
@keyframes jaScenePageIn{from{opacity:0;transform:scale(.975);filter:blur(5px)}to{opacity:1;transform:scale(1);filter:blur(0)}}
/* Calendar transition: no whole-page crossfade. Only named filters/events move. */
html.calendar-filter-transition::view-transition-old(root),html.calendar-filter-transition::view-transition-new(root){animation:none!important;mix-blend-mode:normal!important}
html.calendar-filter-transition::view-transition-group(root){animation:none!important}
html.calendar-filter-transition::view-transition-group(*){
  animation-duration:.38s!important;
  animation-timing-function:cubic-bezier(.16,1,.3,1)!important;
}
html.calendar-filter-transition::view-transition-old(*){
  animation:jaCalendarOld .22s ease both!important;
}
html.calendar-filter-transition::view-transition-new(*){
  animation:jaCalendarNew .38s cubic-bezier(.16,1,.3,1) both!important;
}
@keyframes jaCalendarOld{to{opacity:.16;transform:scale(.965)}}
@keyframes jaCalendarNew{from{opacity:.22;transform:scale(.965)}to{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.app-scene-transition{display:none!important}
body.app-scene-out .app-page.active,body.app-scene-in .app-page.active{animation:none!important}
#page-home .home-v23 [data-home-reveal]{clip-path:none!important}}
/* ============================================================
   V24.17 · SBO segmented home
   Four full-screen home scenes:
   VIDEO -> NOW -> MEMBERS -> RECENT VOD
   ============================================================ */
@media (min-width:901px) and (prefers-reduced-motion:no-preference){html.home-v23-snap{
    scroll-snap-type:y mandatory;
    scroll-behavior:smooth;
    overscroll-behavior-y:none;
  }
html.home-v23-snap body.home-v23-page{
    scroll-behavior:smooth;
  }
body.home-v23-page #page-home .home-v23{
    --home-scene-pad-top:clamp(96px,10vh,132px);
    --home-scene-pad-bottom:clamp(54px,6.5vh,86px);
    overflow:clip;
  }
body.home-v23-page #page-home .home-v23-content{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
  }
body.home-v23-page #page-home .home-v23-scene{
    position:relative;
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }
body.home-v23-page #page-home .home-v23-hero{
    height:100svh!important;
    min-height:680px!important;
  }
body.home-v23-page #page-home .home-v23-hero-inner{
    width:min(var(--home-max),calc(100% - 96px));
    padding-top:118px;
    padding-bottom:64px;
  }
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{
    width:min(var(--home-max),calc(100% - 96px));
    min-height:100svh;
    margin:0 auto!important;
    padding:var(--home-scene-pad-top) 0 var(--home-scene-pad-bottom)!important;
    border-top:0!important;
    display:grid;
    align-content:center;
    isolation:isolate;
  }
/* full-width panel boundaries create the "separate screen" feeling */
body.home-v23-page #page-home .home-v23-overview::before,body.home-v23-page #page-home .home-v23-members::before,body.home-v23-page #page-home .home-v23-vods::before{
    content:"";
    position:absolute;
    z-index:-1;
    top:0;
    bottom:0;
    left:calc((100vw - 100%)/-2);
    right:calc((100vw - 100%)/-2);
    border-top:1px solid var(--home-line);
    border-bottom:1px solid var(--home-line);
    pointer-events:none;
  }
body.home-v23-page #page-home .home-v23-overview::before{
    background:
      radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--home-accent) 3.5%,transparent),transparent 38%),
      var(--home-bg);
  }
body.home-v23-page #page-home .home-v23-members::before{
    background:
      linear-gradient(180deg,color-mix(in srgb,var(--home-surface) 38%,var(--home-bg)),var(--home-bg));
  }
body.home-v23-page #page-home .home-v23-vods::before{
    background:
      radial-gradient(circle at 85% 18%,color-mix(in srgb,var(--home-accent) 3.2%,transparent),transparent 30%),
      var(--home-bg);
  }
body.home-v23-page #page-home .home-v23-overview{
    grid-template-columns:.82fr 1.38fr .9fr;
    border-bottom:0!important;
  }
body.home-v23-page #page-home .home-v23-section{
    align-self:stretch;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
body.home-v23-page #page-home .home-v23-members{
    grid-template-rows:auto auto auto;
    gap:clamp(18px,3vh,36px);
  }
body.home-v23-page #page-home .home-v23-members .home-v23-wide-head{
    margin-bottom:0;
  }
body.home-v23-page #page-home .home-v23-member-carousel{
    align-self:center;
    width:100%;
  }
body.home-v23-page #page-home .home-v23-vods{
    grid-template-rows:auto auto auto;
    gap:clamp(18px,2.4vh,30px);
  }
body.home-v23-page #page-home .home-v23-vods>.home-v23-wide-head{
    margin-bottom:0;
  }
body.home-v23-page #page-home .home-v23-vod-grid{
    align-self:center;
  }
/* Keep the archive shortcuts, but fold them into the VOD screen. */
body.home-v23-page #page-home .home-v23-archive-compact{
    display:grid;
    grid-template-columns:minmax(230px,.62fr) minmax(0,1.75fr);
    gap:34px;
    align-items:center;
    margin:0!important;
    padding:22px 0 0!important;
    border-top:1px solid var(--home-line)!important;
  }
body.home-v23-page #page-home .home-v23-archive-compact .home-v23-archive-copy h2{
    margin-top:5px;
    font-size:clamp(25px,2.3vw,36px);
  }
body.home-v23-page #page-home .home-v23-archive-compact .home-v23-archive-copy p{
    margin-top:7px;
    font-size:10px;
  }
body.home-v23-page #page-home .home-v23-archive-compact .home-v23-archive-links button{
    min-height:78px;
    padding-top:14px;
    padding-bottom:14px;
  }
/* A subtle side rail makes the four panels read as separate scenes. */
body.home-v23-page #page-home .home-v23-scene-nav{
    position:fixed;
    z-index:92;
    right:clamp(16px,2vw,34px);
    top:50%;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:13px;
  }
body.home-v23-page #page-home .home-v23-scene-nav button{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:9px;
    min-width:76px;
    padding:4px 0;
    border:0;
    background:transparent;
    color:var(--home-muted);
    cursor:pointer;
    opacity:.52;
    transition:opacity .22s ease,color .22s ease,transform .28s cubic-bezier(.16,1,.3,1);
  }
body.home-v23-page #page-home .home-v23-scene-nav button i{
    width:16px;
    height:1px;
    background:currentColor;
    transition:width .28s cubic-bezier(.16,1,.3,1),background .22s ease;
  }
body.home-v23-page #page-home .home-v23-scene-nav button span{
    width:48px;
    font-size:8px;
    line-height:1;
    font-weight:900;
    letter-spacing:.13em;
    text-align:left;
  }
body.home-v23-page #page-home .home-v23-scene-nav button:hover{
    opacity:.86;
    transform:translateX(-2px);
  }
body.home-v23-page #page-home .home-v23-scene-nav button.is-active{
    opacity:1;
    color:var(--home-accent);
  }
body.home-v23-page #page-home .home-v23-scene-nav button.is-active i{
    width:32px;
  }
body.home-v23-page.home-v23-at-top #page-home .home-v23-scene-nav{
    --home-muted:rgba(255,255,255,.62);
    --home-accent:#ff5a84;
  }
/* Micro transition inside each full-screen panel. */
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:.72;
    transform:translateY(10px) scale(.992);
  }
body.home-v23-page #page-home .home-v23-scene>.home-v23-wide-head,body.home-v23-page #page-home .home-v23-scene>.home-v23-member-carousel,body.home-v23-page #page-home .home-v23-scene>.home-v23-member-pager,body.home-v23-page #page-home .home-v23-scene>.home-v23-vod-grid,body.home-v23-page #page-home .home-v23-scene>.home-v23-archive-compact{
    transition:opacity .42s ease,transform .58s cubic-bezier(.16,1,.3,1);
  }
/* The overview itself is already divided into three columns. Make the
     boundaries a little stronger so it reads as one dedicated screen. */
body.home-v23-page #page-home .home-v23-overview .home-v23-section+.home-v23-section{
    border-left-color:color-mix(in srgb,var(--home-line) 135%,transparent);
  }}
/* Tablet/mobile keeps natural document scrolling. Full-screen wheel locking
   would make compact screens harder to use. */
@media (max-width:900px), (prefers-reduced-motion:reduce){html.home-v23-snap{scroll-snap-type:none!important}
body.home-v23-page #page-home .home-v23-scene-nav{display:none!important}
body.home-v23-page #page-home .home-v23-scene{scroll-snap-align:none!important}
body.home-v23-page #page-home .home-v23-archive-compact{margin-top:38px}}
/* ============================================================
   V24.19 · HOME FULL-VIEWPORT SCENES
   - keep v24.17 wheel/snap scene behavior
   - make every desktop scene use the viewport instead of a capped center column
   - turn sparse overview into three deliberate full-height panels
   ============================================================ */
@media (min-width:901px){body.home-v23-page #page-home,body.home-v23-page #page-home .home-v23,body.home-v23-page #page-home .home-v23-content{
    width:100%!important;
    max-width:none!important;
  }
/* Break out of any old centered/max-width wrapper at every desktop resolution. */
body.home-v23-page #page-home .home-v23-hero-inner,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{
    box-sizing:border-box!important;
    width:100vw!important;
    max-width:none!important;
    margin-left:calc(50% - 50vw)!important;
    margin-right:calc(50% - 50vw)!important;
    padding-left:clamp(24px,2.4vw,64px)!important;
    padding-right:clamp(24px,2.4vw,64px)!important;
  }
body.home-v23-page #page-home .home-v23-hero-inner{
    padding-top:118px!important;
    padding-bottom:64px!important;
  }
/* Overview: fill the scene horizontally and vertically instead of floating in the middle. */
body.home-v23-page #page-home .home-v23-overview{
    grid-template-columns:minmax(250px,.92fr) minmax(560px,1.62fr) minmax(280px,1.02fr)!important;
    gap:clamp(14px,1.35vw,28px)!important;
    align-items:stretch!important;
    align-content:center!important;
    border:0!important;
  }
body.home-v23-page #page-home .home-v23-overview .home-v23-section{
    position:relative;
    min-width:0!important;
    min-height:clamp(500px,64svh,720px)!important;
    padding:clamp(24px,2vw,34px)!important;
    border:1px solid color-mix(in srgb,var(--home-line) 112%,transparent)!important;
    border-radius:clamp(20px,1.5vw,28px)!important;
    background:
      radial-gradient(100% 70% at 50% 0%,color-mix(in srgb,var(--home-accent) 5%,transparent),transparent 64%),
      color-mix(in srgb,var(--home-bg) 90%,var(--home-text) 1.5%)!important;
    overflow:hidden;
    display:flex!important;
    flex-direction:column;
    justify-content:flex-start!important;
  }
body.home-v23-page #page-home .home-v23-overview .home-v23-section+.home-v23-section{
    border-left:1px solid color-mix(in srgb,var(--home-line) 112%,transparent)!important;
  }
/* Quiet oversized scene marks make the empty area feel intentional rather than blank. */
body.home-v23-page #page-home .home-v23-overview .home-v23-section::after{
    position:absolute;
    right:clamp(18px,1.8vw,34px);
    bottom:clamp(12px,1.5vw,26px);
    z-index:0;
    color:color-mix(in srgb,var(--home-text) 4.5%,transparent);
    font-size:clamp(66px,7vw,142px);
    line-height:.82;
    font-weight:950;
    letter-spacing:-.08em;
    pointer-events:none;
    user-select:none;
  }
body.home-v23-page #page-home .home-v23-today::after{content:"01"}
body.home-v23-page #page-home .home-v23-onair::after{content:"02"}
body.home-v23-page #page-home .home-v23-activity::after{content:"03"}
body.home-v23-page #page-home .home-v23-overview .home-v23-section>header,body.home-v23-page #page-home .home-v23-overview .home-v23-section>.home-v23-schedule-list,body.home-v23-page #page-home .home-v23-overview .home-v23-section>.home-v23-onair-grid,body.home-v23-page #page-home .home-v23-overview .home-v23-section>.home-v23-activity-list,body.home-v23-page #page-home .home-v23-overview .home-v23-section>.home-v23-empty{
    position:relative;
    z-index:1;
  }
body.home-v23-page #page-home .home-v23-section header,body.home-v23-page #page-home .home-v23-wide-head{
    margin-bottom:clamp(20px,2vh,30px)!important;
  }
body.home-v23-page #page-home .home-v23-section h2,body.home-v23-page #page-home .home-v23-wide-head h2{
    font-size:clamp(23px,1.55vw,32px)!important;
  }
/* Let the 2x2 live grid become the visual anchor of the NOW scene. */
body.home-v23-page #page-home .home-v23-onair-grid{
    width:100%!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:clamp(12px,1vw,20px)!important;
  }
body.home-v23-page #page-home .home-v23-live-thumb{
    border-radius:clamp(13px,1vw,19px)!important;
  }
body.home-v23-page #page-home .home-v23-live-copy b{
    font-size:clamp(13px,.9vw,17px)!important;
  }
body.home-v23-page #page-home .home-v23-live-copy small{
    font-size:clamp(10px,.7vw,13px)!important;
  }
/* Give sparse side columns more visual rhythm. */
body.home-v23-page #page-home .home-v23-schedule-row{
    min-height:clamp(64px,7vh,82px)!important;
    grid-template-columns:clamp(52px,4vw,72px) minmax(0,1fr) 7px!important;
  }
body.home-v23-page #page-home .home-v23-schedule-row b{font-size:clamp(13px,.9vw,17px)!important}
body.home-v23-page #page-home .home-v23-schedule-row time{font-size:clamp(11px,.72vw,14px)!important}
body.home-v23-page #page-home .home-v23-activity-row{
    min-height:clamp(58px,6.2vh,74px)!important;
  }
body.home-v23-page #page-home .home-v23-activity-row b{font-size:clamp(11px,.78vw,14px)!important}
body.home-v23-page #page-home .home-v23-activity-row small{font-size:clamp(9px,.65vw,12px)!important}
/* MEMBERS/VOD scenes also use the whole viewport, not the old 1380px island. */
body.home-v23-page #page-home .home-v23-member-carousel{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
  }
body.home-v23-page #page-home .home-v23-member-strip{
    gap:clamp(14px,1.15vw,24px)!important;
    padding-left:clamp(6px,.5vw,12px)!important;
    padding-right:clamp(6px,.5vw,12px)!important;
  }
body.home-v23-page #page-home .home-v23-member{
    flex:1 0 clamp(108px,7.7vw,154px)!important;
    width:clamp(108px,7.7vw,154px)!important;
    min-width:clamp(108px,7.7vw,154px)!important;
  }
body.home-v23-page #page-home .home-v23-member>span{
    width:clamp(82px,5.9vw,116px)!important;
    height:clamp(82px,5.9vw,116px)!important;
  }
body.home-v23-page #page-home .home-v23-vod-grid{
    width:100%!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:clamp(14px,1.25vw,26px)!important;
  }
body.home-v23-page #page-home .home-v23-vod-card>span{
    border-radius:clamp(14px,1vw,20px)!important;
  }
/* Keep a little breathing room at normal FHD, but never fall back to a narrow fixed island. */
@media (max-width:1280px){body.home-v23-page #page-home .home-v23-overview{
      grid-template-columns:minmax(220px,.9fr) minmax(480px,1.5fr) minmax(240px,1fr)!important;
      gap:12px!important;
    }
body.home-v23-page #page-home .home-v23-overview .home-v23-section{
      padding:22px!important;
      min-height:560px!important;
    }}}
/* ========================================================================== 
   v24.20 — Current archive loading screen
   Visual-only refresh. Loader logic/progress timing is unchanged.
   ========================================================================== */
.app-loader{
  position:fixed!important;
  inset:0!important;
  z-index:9999!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 50% 52%,rgba(255,67,111,.055),transparent 26%),
    linear-gradient(180deg,#070a10 0%,#080c13 52%,#070a10 100%)!important;
  color:#f6f8fb!important;
  transition:opacity .38s cubic-bezier(.22,.61,.36,1),visibility .38s ease,filter .38s ease!important;
}
/* The current site is editorial/minimal, so the old pink bubbles and avatar carousel are removed. */
.app-loader::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:50%!important;
  width:auto!important;
  height:1px!important;
  border-radius:0!important;
  background:linear-gradient(90deg,transparent 0%,rgba(148,163,184,.08) 20%,rgba(255,71,111,.26) 50%,rgba(148,163,184,.08) 80%,transparent 100%)!important;
  filter:none!important;
  pointer-events:none!important;
}
.app-loader::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  width:auto!important;
  height:auto!important;
  border-radius:0!important;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px)!important;
  background-size:72px 72px!important;
  -webkit-mask-image:radial-gradient(circle at center,black 0%,transparent 66%)!important;
  mask-image:radial-gradient(circle at center,black 0%,transparent 66%)!important;
  filter:none!important;
  opacity:.58!important;
  pointer-events:none!important;
}
.app-loader.is-hidden{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  filter:blur(5px)!important;
}
.archive-loader-shell{
  position:relative!important;
  z-index:2!important;
  display:grid!important;
  justify-items:stretch!important;
  width:min(620px,calc(100vw - 56px))!important;
  padding:6px 0 8px 28px!important;
  border-left:2px solid #ff476f!important;
  text-align:left!important;
}
.archive-loader-shell::before{
  content:"LOADING";
  position:absolute;
  right:0;
  top:3px;
  color:#788393;
  font-size:10px;
  font-weight:800;
  letter-spacing:.22em;
}
/* Kept in the DOM for the existing loader script, hidden in the new visual system. */
.archive-loader-avatar-wrap,.archive-loader-thumbs{
  display:none!important;
}
.archive-loader-kicker{
  display:block!important;
  margin:0 0 13px!important;
  color:#ff476f!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.24em!important;
}
.archive-loader-kicker::before{
  content:"00 / ";
  color:#ff476f;
}
.archive-loader-title{
  display:block!important;
  margin:0!important;
  color:#f5f7fb!important;
  font-size:clamp(34px,3.35vw,52px)!important;
  line-height:1.03!important;
  font-weight:900!important;
  letter-spacing:-.055em!important;
  text-shadow:none!important;
}
.archive-loader-status{
  display:block!important;
  margin:16px 0 0!important;
  color:#8b95a5!important;
  font-size:12px!important;
  line-height:1.55!important;
  font-weight:650!important;
  letter-spacing:-.01em!important;
}
.archive-loader-progress-row{
  width:100%!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:16px!important;
  margin-top:28px!important;
}
.archive-loader-bar{
  position:relative!important;
  height:2px!important;
  overflow:visible!important;
  border-radius:0!important;
  background:#202733!important;
  box-shadow:none!important;
}
.archive-loader-bar::after{
  content:"";
  position:absolute;
  inset:-7px 0;
  border-top:1px solid rgba(255,255,255,.025);
  border-bottom:1px solid rgba(255,255,255,.018);
  pointer-events:none;
}
.archive-loader-bar i{
  position:relative!important;
  display:block!important;
  width:0;
  height:2px!important;
  border-radius:0!important;
  background:#ff476f!important;
  box-shadow:0 0 18px rgba(255,71,111,.36)!important;
  transition:width .22s ease!important;
}
.archive-loader-bar i::after{
  content:"";
  position:absolute;
  right:-2px;
  top:50%;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#ff6b8c;
  box-shadow:0 0 14px rgba(255,71,111,.7);
  transform:translateY(-50%);
}
.archive-loader-progress-row>b{
  min-width:42px!important;
  color:#c8d0dc!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:800!important;
  font-variant-numeric:tabular-nums!important;
  letter-spacing:.08em!important;
  text-align:right!important;
}
@media (max-width:620px){.archive-loader-shell{
    width:calc(100vw - 40px)!important;
    padding-left:20px!important;
  }
.archive-loader-shell::before{display:none!important}
.archive-loader-title{font-size:36px!important}
.archive-loader-progress-row{margin-top:24px!important}}
@media (prefers-reduced-motion:reduce){.app-loader,.archive-loader-bar i{transition:none!important}}
/* ========================================================================== 
   v24.24 · HOME MEMBER SHOWCASE + HOME-ONLY ENGLISH EDITOR
   - 도감 레이아웃은 건드리지 않음
   - v24.17 한 화면 단위 스크롤 효과 복구
   ========================================================================== */
body.home-v23-page #page-home .home-v23-members .home-v23-wide-head{margin-bottom:clamp(14px,2vh,26px)!important}
body.home-v23-page #page-home .home-v23-head-actions{display:flex;align-items:center;justify-content:flex-end;gap:14px;flex:0 0 auto}
body.home-v23-page #page-home .home-v23-head-actions>button{flex:0 0 auto;padding:0;border:0;background:transparent;color:var(--home-muted);font-size:10px;font-weight:800;cursor:pointer;white-space:nowrap}
body.home-v23-page #page-home .home-v23-head-actions>button:hover{color:var(--home-accent)}
body:not(.admin-mode) #page-home #homeV23EditEnglish{display:none!important}
body.admin-mode #page-home #homeV23EditEnglish{display:inline-flex!important;align-items:center;gap:6px;color:var(--home-accent)!important}
body.admin-mode #page-home #homeV23EditEnglish::before{content:"✎";font-size:11px}
body.home-v23-page #page-home .home-v23-member-carousel{width:100%!important;max-width:none!important;margin:0!important;padding:0 clamp(34px,2.8vw,58px)!important;box-sizing:border-box!important;overflow:visible!important}
body.home-v23-page #page-home .home-v23-member-strip{display:grid!important;grid-template-columns:repeat(var(--member-count,12),minmax(104px,1fr))!important;align-items:end!important;justify-content:stretch!important;gap:clamp(6px,.62vw,15px)!important;width:100%!important;min-width:0!important;padding:clamp(24px,3.2vh,38px) 2px clamp(16px,2.2vh,26px)!important;overflow-x:auto!important;overflow-y:visible!important;scroll-snap-type:x proximity!important;scrollbar-width:none!important}
body.home-v23-page #page-home .home-v23-member-strip::-webkit-scrollbar{display:none!important}
body.home-v23-page #page-home .home-v23-member-carousel.is-all-visible .home-v23-member-strip{justify-content:stretch!important}
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase{position:relative!important;isolation:isolate!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-end!important;min-width:104px!important;width:auto!important;min-height:clamp(198px,21vh,238px)!important;margin:0!important;padding:0 3px 8px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important;color:var(--home-text)!important;text-align:center!important;scroll-snap-align:center!important;transform:none!important}
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase>.home-v23-member-roman{position:absolute!important;z-index:0!important;left:50%!important;top:0!important;display:block!important;width:max-content!important;max-width:184%!important;height:auto!important;min-height:0!important;aspect-ratio:auto!important;margin:0!important;padding:0!important;transform:translateX(-50%)!important;overflow:hidden!important;border:0!important;border-radius:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;color:rgba(239,190,255,.075)!important;-webkit-text-stroke:1px rgba(255,132,196,.18)!important;text-shadow:0 0 22px rgba(205,91,255,.07),0 0 34px rgba(255,76,144,.045)!important;font-size:clamp(24px,1.75vw,40px)!important;font-weight:950!important;line-height:.92!important;letter-spacing:-.07em!important;white-space:nowrap!important;text-overflow:ellipsis!important;text-transform:uppercase!important;pointer-events:none!important;user-select:none!important}
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase>.home-v23-member-roman[hidden]{display:none!important}
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase>.home-v23-member-portrait{position:relative!important;z-index:2!important;display:block!important;width:clamp(78px,5.25vw,112px)!important;height:clamp(78px,5.25vw,112px)!important;min-width:0!important;aspect-ratio:1/1!important;margin:clamp(38px,4.4vh,50px) auto 18px!important;padding:0!important;overflow:visible!important;border:0!important;border-radius:50%!important;outline:0!important;background:transparent!important;box-shadow:none!important}
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase>.home-v23-member-portrait::after{content:"";position:absolute;z-index:1;left:50%;bottom:-5px;width:96%;height:12px;transform:translateX(-50%);border:1px solid rgba(196,92,255,.52);border-radius:50%;background:radial-gradient(ellipse at center,rgba(207,87,255,.18) 0%,rgba(181,67,255,.06) 50%,transparent 74%);box-shadow:0 0 10px rgba(201,80,255,.18),0 0 23px rgba(255,70,140,.08);pointer-events:none}
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase>.home-v23-member-portrait>img{position:relative!important;z-index:2!important;display:block!important;width:100%!important;height:100%!important;min-width:100%!important;min-height:100%!important;margin:0!important;padding:0!important;object-fit:cover!important;object-position:center!important;opacity:1!important;visibility:visible!important;filter:none!important;border:1px solid rgba(255,255,255,.62)!important;border-radius:50%!important;outline:1px solid rgba(225,111,255,.32)!important;background:var(--home-surface)!important;box-shadow:0 0 0 5px rgba(178,79,255,.04),0 0 18px rgba(217,83,255,.14),0 12px 26px rgba(0,0,0,.24)!important;transform:none!important;transition:transform .22s ease,box-shadow .22s ease,outline-color .22s ease!important}
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase>.home-v23-member-bottom{position:relative!important;z-index:3!important;display:flex!important;flex-direction:column!important;align-items:center!important;width:100%!important;height:auto!important;min-height:0!important;aspect-ratio:auto!important;margin:0!important;padding:0!important;gap:5px!important;overflow:visible!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase>.home-v23-member-bottom>b{display:block!important;width:100%!important;min-height:0!important;margin:0!important;padding:0 2px!important;overflow:hidden!important;color:var(--home-text)!important;font-size:clamp(13px,.88vw,17px)!important;font-weight:850!important;line-height:1.15!important;letter-spacing:-.04em!important;white-space:nowrap!important;text-overflow:ellipsis!important}
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase>.home-v23-member-bottom>small{display:block!important;min-height:0!important;margin:0!important;padding:0!important;color:color-mix(in srgb,var(--home-muted) 88%,transparent)!important;font-size:11px!important;font-weight:650!important;line-height:1.2!important;letter-spacing:0!important}
@media (hover:hover){body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase:hover{transform:none!important}
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase:hover>.home-v23-member-portrait>img,body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase:focus-visible>.home-v23-member-portrait>img{transform:translateY(-5px) scale(1.035)!important;outline-color:rgba(255,118,190,.6)!important;box-shadow:0 0 0 5px rgba(210,83,255,.055),0 0 25px rgba(230,91,255,.2),0 16px 32px rgba(0,0,0,.3)!important}
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase:hover>.home-v23-member-roman{color:rgba(239,190,255,.12)!important;-webkit-text-stroke-color:rgba(255,137,198,.29)!important}}
body.home-v23-page #page-home .home-v23-member-arrow{top:clamp(82px,9vh,102px)!important}
body.home-v23-page #page-home .home-v23-member-pager{margin-top:0!important;color:color-mix(in srgb,var(--home-muted) 76%,transparent)!important;font-size:9px!important}
html[data-theme="light"] body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase>.home-v23-member-roman{color:rgba(92,66,111,.05)!important;-webkit-text-stroke-color:rgba(184,92,149,.12)!important;text-shadow:none!important}
html[data-theme="light"] body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase>.home-v23-member-portrait>img{border-color:rgba(255,255,255,.96)!important;outline-color:rgba(197,77,163,.18)!important;box-shadow:0 0 0 5px rgba(197,77,163,.03),0 10px 25px rgba(78,55,86,.11)!important}
html[data-theme="light"] body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase>.home-v23-member-portrait::after{border-color:rgba(188,91,165,.32);background:radial-gradient(ellipse at center,rgba(218,113,182,.11),transparent 74%);box-shadow:0 0 14px rgba(188,91,165,.07)}
@media (min-width:1700px){body.home-v23-page #page-home .home-v23-member-strip{grid-template-columns:repeat(var(--member-count,12),minmax(0,1fr))!important}}
@media (max-width:1100px){body.home-v23-page #page-home .home-v23-member-carousel{padding:0 42px!important}
body.home-v23-page #page-home .home-v23-member-strip{grid-template-columns:repeat(var(--member-count,12),104px)!important;justify-content:start!important}
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase{min-width:104px!important}}
@media (max-width:680px){body.home-v23-page #page-home .home-v23-member-carousel{padding:0!important}
body.home-v23-page #page-home .home-v23-member-strip{grid-template-columns:repeat(var(--member-count,12),94px)!important;gap:5px!important;padding:20px 42px 18px 2px!important}
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase{min-width:94px!important;min-height:184px!important}
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase>.home-v23-member-roman{top:4px!important;font-size:23px!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:38px!important;margin-bottom:15px!important}
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase>.home-v23-member-bottom>b{font-size:13px!important}
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase>.home-v23-member-bottom>small{font-size:9px!important}
body.home-v23-page #page-home .home-v23-member-arrow{top:67px!important}}
/* Home-only English-name editor */
body.home-v23-member-name-open{overflow:hidden!important}
.home-v23-member-name-layer[hidden]{display:none!important}
body>.home-v23-member-name-layer{--home-accent:var(--v23-accent,#ff4f7d);--home-text:var(--v23-text,#171519);--home-muted:var(--v23-muted,#817b83);--home-line:var(--v23-line,#e6e2e6);--home-surface:var(--v23-surface,#fff);--home-bg:var(--v23-bg,#f7f6f7);position:fixed!important;z-index:2147483000!important;inset:0!important;display:flex!important;align-items:center!important;justify-content:center!important;width:100vw!important;height:100dvh!important;padding:24px!important;box-sizing:border-box!important;background:rgba(7,8,12,.68)!important;backdrop-filter:blur(14px)!important;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility .18s ease}
body>.home-v23-member-name-layer.is-open{opacity:1;visibility:visible;pointer-events:auto}
html[data-theme="dark"] body>.home-v23-member-name-layer{--home-text:#f4f5f7;--home-muted:#969ba8;--home-line:rgba(255,255,255,.11);--home-surface:#10131a;--home-bg:#0b0e13}
.home-v23-member-name-panel{width:min(720px,calc(100vw - 48px));max-height:calc(100dvh - 48px);overflow:auto;border:1px solid var(--home-line);border-radius:22px;background:var(--home-surface);color:var(--home-text);box-shadow:0 34px 100px rgba(0,0,0,.34);transform:translateY(14px) scale(.985);transition:transform .22s cubic-bezier(.16,1,.3,1)}
.home-v23-member-name-layer.is-open .home-v23-member-name-panel{transform:none}
.home-v23-member-name-panel>header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:24px 26px 18px;border-bottom:1px solid var(--home-line)}
.home-v23-member-name-panel>header span{display:block;margin:0 0 6px;color:var(--home-accent);font-size:9px;font-weight:900;letter-spacing:.18em}
.home-v23-member-name-panel>header h2{margin:0;color:var(--home-text)!important;font-size:24px;font-weight:900;letter-spacing:-.04em}
.home-v23-member-name-panel>header p{margin:7px 0 0;color:var(--home-muted)!important;font-size:10px;line-height:1.55}
.home-v23-member-name-panel>header>button{flex:0 0 34px;width:34px;height:34px;padding:0;border:1px solid var(--home-line);border-radius:50%;background:transparent;color:var(--home-text);font-size:20px;cursor:pointer}
#homeV23MemberNameForm{padding:20px 26px 26px}
.home-v23-member-name-rows{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.home-v23-member-name-row{display:grid;grid-template-columns:42px minmax(0,1fr) minmax(118px,150px);align-items:center;gap:10px;padding:10px;border:1px solid var(--home-line);border-radius:14px;background:var(--home-bg)}
.home-v23-member-name-row>img{width:42px;height:42px;border-radius:50%;object-fit:cover;display:block;background:var(--home-surface)}
.home-v23-member-name-row>span{min-width:0}
.home-v23-member-name-row b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--home-text);font-size:12px}
.home-v23-member-name-row small{display:block;margin-top:3px;color:var(--home-muted);font-size:9px}
.home-v23-member-name-row input{width:100%;min-width:0;box-sizing:border-box;border:1px solid var(--home-line);border-radius:10px;background:var(--home-surface);color:var(--home-text);padding:9px 10px;font-size:11px;font-weight:800;text-transform:uppercase;outline:none}
.home-v23-member-name-row input:focus{border-color:color-mix(in srgb,var(--home-accent) 70%,var(--home-line));box-shadow:0 0 0 3px color-mix(in srgb,var(--home-accent) 10%,transparent)}
.home-v23-member-name-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.home-v23-member-name-actions button{min-width:84px;height:40px;border-radius:999px;font-size:11px;font-weight:850;cursor:pointer}
.home-v23-member-name-actions .secondary{border:1px solid var(--home-line);background:transparent;color:var(--home-text)}
.home-v23-member-name-actions .primary{border:1px solid var(--home-accent);background:var(--home-accent);color:#fff}
@media(max-width:720px){.home-v23-member-name-rows{grid-template-columns:1fr}
.home-v23-member-name-panel{width:min(560px,calc(100vw - 24px))}
.home-v23-member-name-row{grid-template-columns:38px minmax(0,1fr) minmax(108px,140px)}}
#page-profiles #jintaEditMember{justify-self:end!important;align-self:center!important;width:auto!important;min-width:max-content!important;max-width:none!important;flex:0 0 auto!important}
body:not(.admin-mode) #page-profiles #jintaEditMember{display:none!important}
body.admin-mode #page-profiles #jintaEditMember{display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:8px 13px!important}
/* ========================================================================== 
   v24.25 · RESPONSIVE MEMBER CAROUSEL DENSITY
   - FHD: 7명, QHD: 9명, 4K: 11명
   - 작은 화면에서는 멤버 슬롯을 줄이고 가로 캐러셀 사용
   - 큰 화면에서는 간격을 무한히 벌리지 않고 프로필 자체를 확대
   ========================================================================== */
body.home-v23-page #page-home .home-v23-member-carousel{
  --member-gap:18px;
  position:relative!important;
  width:min(100%,1650px)!important;
  max-width:1650px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:48px!important;
  padding-right:48px!important;
  box-sizing:border-box!important;
}
body.home-v23-page #page-home .home-v23-member-strip{
  display:flex!important;
  align-items:flex-end!important;
  justify-content:flex-start!important;
  gap:var(--member-gap)!important;
  width:100%!important;
  min-width:0!important;
  padding:30px 2px 24px!important;
  overflow-x:auto!important;
  overflow-y:visible!important;
  scroll-snap-type:x mandatory!important;
  scroll-padding-inline:2px!important;
  overscroll-behavior-x:contain!important;
  scrollbar-width:none!important;
}
body.home-v23-page #page-home .home-v23-member-strip::-webkit-scrollbar{display:none!important}
body.home-v23-page #page-home .home-v23-member-carousel.is-all-visible .home-v23-member-strip{justify-content:center!important}
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase{
  flex:0 0 calc(16.666667% - 15px)!important;
  width:calc(16.666667% - 15px)!important;
  min-width:0!important;
  max-width:none!important;
  min-height:218px!important;
  scroll-snap-align:start!important;
  scroll-snap-stop:always!important;
}
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase>.home-v23-member-roman{
  left:50%!important;
  width:calc(100% - 8px)!important;
  max-width:calc(100% - 8px)!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  font-size:clamp(23px,1.65vw,34px)!important;
  letter-spacing:-.065em!important;
}
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase>.home-v23-member-portrait{
  width:104px!important;
  height:104px!important;
  margin-top:44px!important;
  margin-bottom:17px!important;
}
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase>.home-v23-member-bottom>b{font-size:15px!important}
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase>.home-v23-member-bottom>small{font-size:10px!important}
body.home-v23-page #page-home .home-v23-member-arrow{top:92px!important}
/* 1600~2199px: FHD 계열 — 7명 */
@media (min-width:1600px) and (max-width:2199px){body.home-v23-page #page-home .home-v23-member-carousel{
    --member-gap:18px;
    width:min(100%,1740px)!important;
    max-width:1740px!important;
  }
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase{
    flex-basis:calc(14.285714% - 15.4286px)!important;
    width:calc(14.285714% - 15.4286px)!important;
    min-height:228px!important;
  }
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase>.home-v23-member-portrait{
    width:110px!important;
    height:110px!important;
  }}
/* 2200~2999px: QHD 계열 — 9명 */
@media (min-width:2200px) and (max-width:2999px){body.home-v23-page #page-home .home-v23-member-carousel{
    --member-gap:20px;
    width:min(100%,2260px)!important;
    max-width:2260px!important;
    padding-left:52px!important;
    padding-right:52px!important;
  }
body.home-v23-page #page-home .home-v23-member-strip{padding-top:36px!important;padding-bottom:28px!important}
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase{
    flex-basis:calc(11.111111% - 17.7778px)!important;
    width:calc(11.111111% - 17.7778px)!important;
    min-height:248px!important;
  }
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase>.home-v23-member-roman{font-size:clamp(28px,1.42vw,38px)!important}
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase>.home-v23-member-portrait{
    width:126px!important;
    height:126px!important;
    margin-top:50px!important;
    margin-bottom:19px!important;
  }
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase>.home-v23-member-bottom>b{font-size:16px!important}
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase>.home-v23-member-bottom>small{font-size:11px!important}
body.home-v23-page #page-home .home-v23-member-arrow{top:106px!important}}
/* 3000px 이상: 4K 계열 — 11명 전체 + 시각 요소 확대, 최대 폭 제한 */
@media (min-width:3000px){body.home-v23-page #page-home .home-v23-members{
    gap:clamp(28px,2.2vh,48px)!important;
  }
body.home-v23-page #page-home .home-v23-members .home-v23-wide-head{
    width:min(100%,2720px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
body.home-v23-page #page-home .home-v23-member-carousel{
    --member-gap:24px;
    width:min(100%,2720px)!important;
    max-width:2720px!important;
    padding-left:56px!important;
    padding-right:56px!important;
  }
body.home-v23-page #page-home .home-v23-member-strip{
    padding-top:44px!important;
    padding-bottom:34px!important;
  }
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase{
    flex-basis:calc(9.090909% - 21.8182px)!important;
    width:calc(9.090909% - 21.8182px)!important;
    min-height:292px!important;
  }
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase>.home-v23-member-roman{
    width:calc(100% - 4px)!important;
    max-width:calc(100% - 4px)!important;
    font-size:42px!important;
    line-height:.94!important;
  }
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase>.home-v23-member-portrait{
    width:150px!important;
    height:150px!important;
    margin-top:62px!important;
    margin-bottom:22px!important;
  }
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase>.home-v23-member-bottom>b{font-size:18px!important}
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase>.home-v23-member-bottom>small{font-size:12px!important}
body.home-v23-page #page-home .home-v23-member-arrow{top:128px!important}}
/* 노트북/태블릿 폭: 6명 유지, 모바일에서는 기존보다 더 작은 고정 슬롯 */
@media (max-width:1599px){body.home-v23-page #page-home .home-v23-member-carousel{
    --member-gap:15px;
    width:min(100%,1440px)!important;
    max-width:1440px!important;
    padding-left:44px!important;
    padding-right:44px!important;
  }
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase{
    flex-basis:calc(16.666667% - 12.5px)!important;
    width:calc(16.666667% - 12.5px)!important;
  }}
@media (max-width:900px){body.home-v23-page #page-home .home-v23-member-carousel{--member-gap:12px;padding-left:40px!important;padding-right:40px!important}
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase{
    flex-basis:calc(20% - 9.6px)!important;
    width:calc(20% - 9.6px)!important;
    min-width:118px!important;
  }
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase>.home-v23-member-roman{font-size:23px!important}}
@media (max-width:920px){#page-profiles .dogam5-jinho-facts{grid-template-columns:repeat(2,minmax(100px,1fr))}}
@media (max-width:680px){body.home-v23-page #page-home .home-v23-member-carousel{--member-gap:10px;padding-left:34px!important;padding-right:34px!important}
body.home-v23-page #page-home .home-v23-member-strip{padding-left:0!important;padding-right:0!important}
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase{
    flex:0 0 112px!important;
    width:112px!important;
    min-width:112px!important;
  }}
/* ========================================================================== 
   v24.26 · MEMBER CAROUSEL TRUE PAGING
   - 멤버 1칸 단위 snap을 제거하고 페이지 컨테이너 단위로만 snap
   - FHD 7명 / QHD 9명 / 4K 11명 페이지 단위 이동
   ========================================================================== */
body.home-v23-page #page-home .home-v23-member-strip{
  display:flex!important;
  align-items:stretch!important;
  gap:0!important;
  scroll-snap-type:x mandatory!important;
  scroll-behavior:smooth!important;
}
body.home-v23-page #page-home .home-v23-member-page{
  flex:0 0 100%!important;
  width:100%!important;
  min-width:100%!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:repeat(var(--member-page-size,6),minmax(0,1fr))!important;
  align-items:end!important;
  column-gap:var(--member-gap)!important;
  padding:0!important;
  scroll-snap-align:start!important;
  scroll-snap-stop:always!important;
}
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  flex:none!important;
  scroll-snap-align:none!important;
  scroll-snap-stop:normal!important;
}
body.home-v23-page #page-home .home-v23-member-pager{
  min-width:44px!important;
  text-align:center!important;
  font-size:10px!important;
  letter-spacing:.12em!important;
  font-weight:800!important;
}
@media (max-width:920px){#page-profiles .dogam5-jinho-facts{grid-template-columns:repeat(2,minmax(100px,1fr))}}
@media (max-width:680px){body.home-v23-page #page-home .home-v23-member-page{
    grid-template-columns:repeat(var(--member-page-size,3),minmax(0,1fr))!important;
  }
body.home-v23-page #page-home .home-v23-member.home-v23-member-showcase{
    min-width:0!important;
    width:100%!important;
  }}
/* ============================================================
   v24.27 · DOGAM V5 — CLICKABLE ROSTER + LIVE PREVIEW
   5번 시안 기반: 진호 상단 쇼케이스 + 좌측 멤버 로스터 + 우측 프로필 프리뷰
   ============================================================ */
#page-profiles.dogam-v5-page{
  --d5-bg:#090d15;
  --d5-panel:#0f1623;
  --d5-panel-2:#121b29;
  --d5-line:rgba(151,169,197,.18);
  --d5-line-strong:rgba(255,112,154,.44);
  --d5-text:#f3f6fb;
  --d5-muted:#8793a7;
  --d5-pink:#ff6f9c;
  --d5-pink-soft:rgba(255,111,156,.12);
  --d5-mint:#74dfc2;
  position:relative!important;
  isolation:isolate;
  min-height:calc(100vh - var(--v23-header-height,66px));
  padding:clamp(28px,3.2vw,54px) clamp(22px,4vw,70px) 84px!important;
  overflow:visible!important;
  background:
    radial-gradient(circle at 72% 22%,rgba(110,126,207,.075),transparent 31%),
    radial-gradient(circle at 18% 70%,rgba(255,111,156,.045),transparent 28%),
    var(--d5-bg)!important;
  color:var(--d5-text)!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
#page-profiles.dogam-v5-page::before,#page-profiles.dogam-v5-page::after{display:none!important}
html[data-theme="light"] #page-profiles.dogam-v5-page{
  --d5-bg:#f5f7fb;
  --d5-panel:#ffffff;
  --d5-panel-2:#f8faff;
  --d5-line:rgba(39,51,73,.12);
  --d5-line-strong:rgba(222,70,119,.32);
  --d5-text:#151a25;
  --d5-muted:#7a8494;
  --d5-pink:#df4b7d;
  --d5-pink-soft:rgba(223,75,125,.08);
  --d5-mint:#31b993;
  background:radial-gradient(circle at 72% 18%,rgba(113,126,205,.07),transparent 34%),var(--d5-bg)!important;
}
#page-profiles .dogam5-page-head{
  width:min(1420px,100%);margin:0 auto 22px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
}
#page-profiles .dogam5-page-head .eyebrow{display:block;margin-bottom:7px;color:var(--d5-pink)!important;font-size:10px;font-weight:950;letter-spacing:.23em}
#page-profiles .dogam5-page-head h1{margin:0;color:var(--d5-text)!important;font-size:clamp(34px,3vw,50px);font-weight:950;line-height:1;letter-spacing:-.055em}
#page-profiles .dogam5-page-head p{margin:10px 0 0;color:var(--d5-muted)!important;font-size:12px;line-height:1.6}
#page-profiles .dogam5-page-head .btn{border-radius:12px!important;padding:10px 15px!important;background:linear-gradient(135deg,#70cf93,#79dfaa)!important;border:0!important;color:#092016!important;box-shadow:0 10px 28px rgba(71,190,128,.16)!important;font-weight:900!important}
#page-profiles .dogam5-shell{width:min(1420px,100%);margin:0 auto;display:flex;flex-direction:column;gap:28px}
/* streamer showcase */
#page-profiles .dogam5-jinho{
  position:relative;display:grid;grid-template-columns:minmax(250px,340px) minmax(0,1fr);min-height:270px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--d5-pink) 28%,var(--d5-line));border-radius:24px;background:linear-gradient(115deg,color-mix(in srgb,var(--d5-pink) 5%,var(--d5-panel)),var(--d5-panel) 55%,color-mix(in srgb,#7384c7 5%,var(--d5-panel)));box-shadow:0 24px 70px rgba(0,0,0,.12)
}
#page-profiles .dogam5-jinho::after{content:"";position:absolute;right:-55px;top:-90px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(255,111,156,.08),transparent 65%);pointer-events:none}
#page-profiles .dogam5-jinho-image{position:relative;min-height:270px;overflow:hidden;border-right:1px solid var(--d5-line);background:#080b11}
#page-profiles .dogam5-jinho-image img{display:block;width:100%;height:100%;min-height:270px;object-fit:cover;object-position:center;filter:saturate(.94) contrast(1.02)}
#page-profiles .dogam5-jinho-image::after{content:"";position:absolute;inset:auto 0 0;height:38%;background:linear-gradient(transparent,rgba(7,10,16,.58));pointer-events:none}
#page-profiles .dogam5-jinho-image>span{position:absolute;z-index:2;left:18px;top:18px;display:grid;place-items:center;min-width:34px;height:28px;padding:0 9px;border:1px solid rgba(255,255,255,.22);border-radius:9px;background:rgba(7,10,16,.48);backdrop-filter:blur(12px);color:#fff;font-size:11px;font-weight:950;letter-spacing:.1em}
#page-profiles .dogam5-jinho-copy{position:relative;z-index:2;align-self:center;padding:34px clamp(30px,4vw,62px)}
#page-profiles .dogam5-jinho-kicker{margin-bottom:8px;color:var(--d5-pink);font-size:10px;font-weight:950;letter-spacing:.22em}
#page-profiles .dogam5-jinho-name-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
#page-profiles .dogam5-jinho-name-row h2{margin:0;color:var(--d5-text)!important;font-size:clamp(38px,4vw,62px);font-weight:950;letter-spacing:-.06em;line-height:1}
#page-profiles .dogam5-jinho-name-row em{padding:6px 10px;border:1px solid color-mix(in srgb,var(--d5-pink) 40%,var(--d5-line));border-radius:999px;background:var(--d5-pink-soft);color:var(--d5-pink);font-size:10px;font-style:normal;font-weight:900}
#page-profiles .dogam5-jinho-copy>p{max-width:620px;margin:13px 0 22px;color:color-mix(in srgb,var(--d5-text) 72%,var(--d5-muted))!important;font-size:13px;line-height:1.72}
#page-profiles .dogam5-jinho-facts{display:grid;grid-template-columns:repeat(3,minmax(105px,1fr));gap:14px 28px;max-width:690px}
#page-profiles .dogam5-jinho-facts div{display:flex;flex-direction:column;gap:4px;min-width:0}
#page-profiles .dogam5-jinho-facts span{color:var(--d5-pink)!important;font-size:9px;font-weight:900;letter-spacing:.12em}
#page-profiles .dogam5-jinho-facts strong{color:var(--d5-text)!important;font-size:12px;font-weight:800}
#page-profiles .dogam5-jinho-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
#page-profiles .dogam5-jinho-actions a,#page-profiles .dogam5-jinho-actions button{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border:1px solid var(--d5-line);border-radius:10px;background:rgba(255,255,255,.025);color:var(--d5-text)!important;text-decoration:none;font-size:10px;font-weight:850;cursor:pointer;transition:.2s ease}
#page-profiles .dogam5-jinho-actions a:hover,#page-profiles .dogam5-jinho-actions button:hover{border-color:var(--d5-pink);transform:translateY(-1px)}
#page-profiles .dogam5-jinho-wordmark{position:absolute;z-index:0;right:38px;top:50%;transform:translateY(-50%);color:rgba(149,161,193,.035);font-size:clamp(54px,7vw,106px);font-weight:1000;line-height:.78;letter-spacing:-.07em;text-align:right;pointer-events:none;user-select:none}
/* split workspace */
#page-profiles .dogam5-workspace{display:grid;grid-template-columns:minmax(300px,360px) minmax(0,1fr);gap:22px;align-items:stretch}
#page-profiles .dogam5-roster-panel,#page-profiles .dogam5-preview{border:1px solid var(--d5-line);border-radius:22px;background:linear-gradient(155deg,var(--d5-panel),color-mix(in srgb,#7587c9 3%,var(--d5-panel)));box-shadow:0 24px 65px rgba(0,0,0,.10)}
#page-profiles .dogam5-roster-panel{padding:22px;min-width:0}
#page-profiles .dogam5-roster-title{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
#page-profiles .dogam5-roster-title>div>span{display:block;margin-bottom:5px;color:var(--d5-pink);font-size:9px;font-weight:950;letter-spacing:.18em}
#page-profiles .dogam5-roster-title h2{margin:0;color:var(--d5-text)!important;font-size:30px;font-weight:950;letter-spacing:-.05em}
#page-profiles .dogam5-roster-title p{margin:7px 0 0;color:var(--d5-muted)!important;font-size:10px;line-height:1.55}
#page-profiles .dogam5-roster-title>strong{flex:0 0 auto;margin-top:4px;color:var(--d5-muted)!important;font-size:10px;font-weight:900}
#page-profiles .dogam5-toolbar{display:flex;flex-direction:column;gap:9px;margin-bottom:14px}
#page-profiles .dogam5-search{height:38px;display:flex;align-items:center;gap:8px;padding:0 11px;border:1px solid var(--d5-line);border-radius:11px;background:color-mix(in srgb,var(--d5-panel-2) 88%,transparent)}
#page-profiles .dogam5-search>span{color:var(--d5-muted);font-size:17px}
#page-profiles .dogam5-search input{width:100%;min-width:0;border:0!important;outline:0!important;background:transparent!important;color:var(--d5-text)!important;font-size:11px!important;box-shadow:none!important}
#page-profiles .dogam5-search input::placeholder{color:color-mix(in srgb,var(--d5-muted) 74%,transparent)}
#page-profiles .dogam5-filters{display:flex;gap:5px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
#page-profiles .dogam5-filters::-webkit-scrollbar{display:none}
#page-profiles .dogam5-filters button{flex:0 0 auto;padding:6px 9px;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--d5-muted)!important;font-size:9px;font-weight:850;cursor:pointer}
#page-profiles .dogam5-filters button.active{border-color:color-mix(in srgb,var(--d5-pink) 34%,var(--d5-line));background:var(--d5-pink-soft);color:var(--d5-pink)!important}
#page-profiles .dogam5-roster-list{display:flex;flex-direction:column;gap:7px;min-height:398px}
#page-profiles .dogam5-roster-item{position:relative;display:grid;grid-template-columns:36px 31px minmax(0,1fr) auto;align-items:center;gap:9px;width:100%;min-height:44px;padding:4px 10px 4px 5px;border:1px solid var(--d5-line);border-radius:10px;background:color-mix(in srgb,var(--d5-panel-2) 76%,transparent);color:var(--d5-text)!important;text-align:left;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease}
#page-profiles .dogam5-roster-item::after{content:"";position:absolute;right:-1px;top:50%;width:0;height:1px;background:var(--d5-pink);transform:translateY(-50%);transition:width .2s ease}
#page-profiles .dogam5-roster-item img{width:36px;height:36px;display:block;border-radius:9px;object-fit:cover;background:var(--d5-panel);border:1px solid rgba(255,255,255,.07)}
#page-profiles .dogam5-roster-no{color:var(--d5-muted)!important;font-size:10px;font-weight:800;font-variant-numeric:tabular-nums}
#page-profiles .dogam5-roster-item strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--d5-text)!important;font-size:12px;font-weight:850}
#page-profiles .dogam5-roster-item em{color:var(--d5-muted)!important;font-size:9px;font-style:normal;font-weight:850;white-space:nowrap}
#page-profiles .dogam5-roster-item:hover{transform:translateX(2px);border-color:color-mix(in srgb,var(--d5-pink) 28%,var(--d5-line));background:color-mix(in srgb,var(--d5-pink) 5%,var(--d5-panel-2))}
#page-profiles .dogam5-roster-item.active{border-color:var(--d5-pink);background:linear-gradient(90deg,var(--d5-pink-soft),color-mix(in srgb,var(--d5-panel-2) 86%,transparent));box-shadow:0 0 0 1px color-mix(in srgb,var(--d5-pink) 22%,transparent),0 8px 24px rgba(0,0,0,.08)}
#page-profiles .dogam5-roster-item.active::after{width:13px}
#page-profiles .dogam5-roster-item.active em{color:var(--d5-pink)!important}
#page-profiles .dogam5-empty{display:grid;place-items:center;min-height:150px;padding:20px;border:1px dashed var(--d5-line);border-radius:12px;color:var(--d5-muted)!important;font-size:11px;text-align:center}
#page-profiles .dogam5-pagination{display:flex;justify-content:center;align-items:center;gap:13px;margin-top:14px}
#page-profiles .dogam5-pagination button{width:30px;height:30px;border:1px solid var(--d5-line);border-radius:50%;background:transparent;color:var(--d5-text);font-size:17px;cursor:pointer}
#page-profiles .dogam5-pagination button:disabled{opacity:.26;cursor:default}
#page-profiles .dogam5-pagination span{min-width:42px;color:var(--d5-muted)!important;font-size:10px;font-weight:850;text-align:center;font-variant-numeric:tabular-nums}
#page-profiles .dogam5-pagination.is-single{opacity:.45}
/* preview */
#page-profiles .dogam5-preview{--dogam-member-accent:var(--d5-mint);position:relative;overflow:hidden;min-height:592px;padding:20px;border-color:color-mix(in srgb,var(--dogam-member-accent) 34%,var(--d5-line));background:radial-gradient(circle at 32% 45%,color-mix(in srgb,var(--dogam-member-accent) 6%,transparent),transparent 31%),linear-gradient(155deg,var(--d5-panel),color-mix(in srgb,var(--dogam-member-accent) 2%,var(--d5-panel)))}
#page-profiles .dogam5-preview::before{content:"";position:absolute;inset:0;opacity:.15;pointer-events:none;background-image:radial-gradient(circle,rgba(137,155,184,.42) 1px,transparent 1px);background-size:26px 26px;mask-image:linear-gradient(90deg,#000,transparent 62%)}
#page-profiles .dogam5-preview-top{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center}
#page-profiles .dogam5-preview-number{display:grid;place-items:center;min-width:38px;height:32px;padding:0 10px;border:1px solid color-mix(in srgb,var(--dogam-member-accent) 40%,var(--d5-line));border-radius:10px;background:color-mix(in srgb,var(--dogam-member-accent) 7%,var(--d5-panel));color:var(--dogam-member-accent)!important;font-size:11px;font-weight:950;letter-spacing:.08em}
#page-profiles .dogam5-edit{min-height:34px;padding:0 12px;border:1px solid var(--d5-line);border-radius:10px;background:color-mix(in srgb,var(--d5-panel-2) 88%,transparent);color:var(--d5-text)!important;font-size:10px;font-weight:850;cursor:pointer}
#page-profiles .dogam5-edit:hover{border-color:var(--d5-pink);color:var(--d5-pink)!important}
#page-profiles .dogam5-preview-main{position:relative;z-index:2;display:grid;grid-template-columns:minmax(330px,48%) minmax(0,52%);gap:clamp(24px,3vw,54px);align-items:center;min-height:490px;padding:14px clamp(8px,2vw,26px) 4px}
#page-profiles .dogam5-preview-visual{position:relative;display:grid;place-items:center;aspect-ratio:1;max-width:440px;width:100%;margin:0 auto}
#page-profiles .dogam5-preview-orbit{position:absolute;inset:5%;border:1px solid color-mix(in srgb,var(--dogam-member-accent) 58%,transparent);border-radius:50%;box-shadow:0 0 0 8px color-mix(in srgb,var(--dogam-member-accent) 4%,transparent),0 0 80px color-mix(in srgb,var(--dogam-member-accent) 10%,transparent)}
#page-profiles .dogam5-preview-orbit::before,#page-profiles .dogam5-preview-orbit::after{content:"";position:absolute;border-radius:50%;border:1px solid color-mix(in srgb,var(--dogam-member-accent) 14%,transparent)}
#page-profiles .dogam5-preview-orbit::before{inset:-5%}
#page-profiles .dogam5-preview-orbit::after{inset:7%}
#page-profiles .dogam5-preview-glow{position:absolute;width:70%;height:70%;border-radius:50%;background:color-mix(in srgb,var(--dogam-member-accent) 12%,transparent);filter:blur(55px)}
#page-profiles .dogam5-preview-visual img{position:relative;z-index:2;display:block;width:84%;height:84%;border-radius:50%;object-fit:cover;object-position:center;background:color-mix(in srgb,var(--dogam-member-accent) 6%,var(--d5-panel-2));border:2px solid color-mix(in srgb,var(--dogam-member-accent) 58%,rgba(255,255,255,.2));box-shadow:0 22px 60px rgba(0,0,0,.22)}
#page-profiles .dogam5-preview-copy{min-width:0;padding-right:8px}
#page-profiles .dogam5-preview-kicker{margin-bottom:8px}
#page-profiles .dogam5-preview-kicker span{display:inline-flex;padding:6px 10px;border:1px solid color-mix(in srgb,var(--d5-pink) 32%,var(--d5-line));border-radius:999px;background:var(--d5-pink-soft);color:var(--d5-pink)!important;font-size:10px;font-weight:900}
#page-profiles .dogam5-preview-copy h2{margin:0;color:var(--d5-text)!important;font-size:clamp(40px,4.2vw,66px);font-weight:950;line-height:1;letter-spacing:-.065em}
#page-profiles .dogam5-preview-intro{max-width:560px;margin:13px 0 22px;color:color-mix(in srgb,var(--d5-text) 70%,var(--d5-muted))!important;font-size:12px;line-height:1.7}
#page-profiles .dogam5-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--d5-line);border-bottom:1px solid var(--d5-line)}
#page-profiles .dogam5-facts>div{display:grid;grid-template-columns:86px minmax(0,1fr);align-items:center;gap:10px;min-height:48px;padding:8px 4px;border-bottom:1px solid var(--d5-line)}
#page-profiles .dogam5-facts>div:nth-last-child(-n+2){border-bottom:0}
#page-profiles .dogam5-facts>div:nth-child(odd){padding-right:14px;border-right:1px solid var(--d5-line)}
#page-profiles .dogam5-facts>div:nth-child(even){padding-left:14px}
#page-profiles .dogam5-facts span{color:var(--d5-muted)!important;font-size:9px;font-weight:800}
#page-profiles .dogam5-facts strong{overflow:hidden;text-overflow:ellipsis;color:var(--d5-text)!important;font-size:11px;font-weight:850;white-space:nowrap}
#page-profiles .dogam5-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:18px}
#page-profiles .dogam5-tags span{padding:6px 9px;border:1px solid var(--d5-line);border-radius:999px;color:color-mix(in srgb,var(--dogam-member-accent) 65%,var(--d5-text))!important;font-size:9px;font-weight:800}
#page-profiles .dogam5-social{margin-top:18px}
#page-profiles .dogam5-social>span{display:block;margin-bottom:8px;color:var(--d5-muted)!important;font-size:9px;font-weight:950;letter-spacing:.18em}
#page-profiles .dogam5-links{display:flex;gap:7px;flex-wrap:wrap}
#page-profiles .dogam5-platform{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 10px;border:1px solid var(--d5-line);border-radius:9px;background:color-mix(in srgb,var(--d5-panel-2) 82%,transparent);color:var(--d5-text)!important;text-decoration:none;font-size:9px;font-weight:850;transition:.18s ease}
#page-profiles .dogam5-platform i{font-style:normal;color:var(--dogam-member-accent)!important;font-size:9px;font-weight:950}
#page-profiles .dogam5-platform:hover{border-color:var(--dogam-member-accent);transform:translateY(-1px)}
#page-profiles .dogam5-preview-nav{position:relative;z-index:3;display:flex;justify-content:flex-end;gap:7px;padding-top:10px;border-top:1px solid color-mix(in srgb,var(--d5-line) 72%,transparent)}
#page-profiles .dogam5-preview-nav button{min-height:32px;padding:0 10px;border:1px solid var(--d5-line);border-radius:9px;background:transparent;color:var(--d5-muted)!important;font-size:9px;font-weight:850;cursor:pointer}
#page-profiles .dogam5-preview-nav button:hover{color:var(--d5-text)!important;border-color:color-mix(in srgb,var(--dogam-member-accent) 45%,var(--d5-line))}
#page-profiles .dogam5-preview.dogam5-swap .dogam5-preview-visual img{animation:dogam5PortraitSwap .42s cubic-bezier(.16,1,.3,1)}
#page-profiles .dogam5-preview.dogam5-swap .dogam5-preview-copy{animation:dogam5CopySwap .38s cubic-bezier(.16,1,.3,1)}
@keyframes dogam5PortraitSwap{from{opacity:.28;transform:scale(.965)}to{opacity:1;transform:none}}
@keyframes dogam5CopySwap{from{opacity:.2;transform:translateX(12px)}to{opacity:1;transform:none}}
/* keep the existing editor modal intact but make its trigger visible in admin mode */
body:not(.admin-mode) #page-profiles .dogam5-edit,body:not(.admin-mode) #page-profiles [data-edit-jinho]{display:none!important}
body.admin-mode #page-profiles .dogam5-edit{display:inline-flex!important;align-items:center!important}
body.admin-mode #page-profiles [data-edit-jinho]{display:inline-flex!important}
@media (max-width:1180px){#page-profiles .dogam5-workspace{grid-template-columns:minmax(270px,320px) minmax(0,1fr)}
#page-profiles .dogam5-preview-main{grid-template-columns:minmax(280px,44%) minmax(0,56%);gap:24px}
#page-profiles .dogam5-preview{padding:16px}
#page-profiles .dogam5-facts>div{grid-template-columns:72px minmax(0,1fr)}}
@media (max-width:920px){#page-profiles.dogam-v5-page{padding:24px 16px 72px!important}
#page-profiles .dogam5-jinho{grid-template-columns:230px minmax(0,1fr)}
#page-profiles .dogam5-workspace{grid-template-columns:1fr}
#page-profiles .dogam5-roster-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-height:0}
#page-profiles .dogam5-preview-main{grid-template-columns:minmax(300px,42%) minmax(0,58%)}}
@media (max-width:920px){#page-profiles .dogam5-jinho-facts{grid-template-columns:repeat(2,minmax(100px,1fr))}}
@media (max-width:680px){#page-profiles .dogam5-page-head{align-items:flex-start}
#page-profiles .dogam5-page-head p{max-width:250px}
#page-profiles .dogam5-jinho{grid-template-columns:1fr;min-height:0}
#page-profiles .dogam5-jinho-image{height:280px;min-height:0;border-right:0;border-bottom:1px solid var(--d5-line)}
#page-profiles .dogam5-jinho-image img{min-height:0;height:100%}
#page-profiles .dogam5-jinho-copy{padding:24px 20px 28px}
#page-profiles .dogam5-jinho-wordmark{display:none}
#page-profiles .dogam5-roster-panel{padding:16px}
#page-profiles .dogam5-roster-list{grid-template-columns:1fr}
#page-profiles .dogam5-preview{padding:14px;min-height:0}
#page-profiles .dogam5-preview-main{grid-template-columns:1fr;min-height:0;padding:18px 2px 8px}
#page-profiles .dogam5-preview-visual{max-width:320px}
#page-profiles .dogam5-preview-copy h2{font-size:42px}
#page-profiles .dogam5-facts{grid-template-columns:1fr}
#page-profiles .dogam5-facts>div,#page-profiles .dogam5-facts>div:nth-child(odd),#page-profiles .dogam5-facts>div:nth-child(even){padding:8px 4px;border-right:0;border-bottom:1px solid var(--d5-line)}
#page-profiles .dogam5-facts>div:last-child{border-bottom:0}}
@media (prefers-reduced-motion:reduce){#page-profiles .dogam5-preview.dogam5-swap .dogam5-preview-visual img,#page-profiles .dogam5-preview.dogam5-swap .dogam5-preview-copy{animation:none!important}}
/* ============================================================
   v24.29 VOD ARCHIVE REDESIGN — option 01 editorial archive
   ============================================================ */
#page-vod.vod-library-page{
  padding:10px 0 96px!important;
}
#page-vod .vod-page-head{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:end!important;
  gap:28px!important;
  margin:0 0 22px!important;
  padding:22px 0 24px!important;
  border-bottom:1px solid var(--v23-line)!important;
}
#page-vod .vod-page-head .eyebrow,#page-vod .vod-archive-head .eyebrow{
  display:block!important;
  margin:0 0 10px!important;
  color:var(--v23-accent)!important;
  font-size:11px!important;
  font-weight:800!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
}
#page-vod .vod-page-head h1{
  margin:0!important;
  color:var(--v23-text)!important;
  font-size:clamp(40px,4.2vw,62px)!important;
  line-height:1.02!important;
  letter-spacing:-.06em!important;
  font-weight:820!important;
}
#page-vod .vod-page-head p{
  max-width:720px!important;
  margin:10px 0 0!important;
  color:var(--v23-muted)!important;
  font-size:14px!important;
  line-height:1.7!important;
}
#page-vod .vod-page-count{
  display:grid!important;
  justify-items:end!important;
  gap:2px!important;
  text-align:right!important;
}
#page-vod .vod-page-count span,#page-vod .vod-page-count em{
  color:var(--v23-muted)!important;
  font-style:normal!important;
  font-size:13px!important;
  letter-spacing:.04em!important;
}
#page-vod .vod-page-count strong{
  color:var(--v23-accent)!important;
  font-size:42px!important;
  line-height:1!important;
  letter-spacing:-.06em!important;
}
#page-vod .vod-toolbar{
  display:grid!important;
  grid-template-columns:minmax(300px,1.45fr) repeat(3,minmax(155px,.52fr))!important;
  gap:12px!important;
  padding:14px!important;
  border:1px solid var(--v23-line)!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--v23-surface) 96%,transparent),color-mix(in srgb,var(--v23-surface-2) 38%,transparent))!important;
  box-shadow:none!important;
}
#page-vod :is(.vod-search,.vod-toolbar select){
  min-height:46px!important;
  border:1px solid var(--v23-line)!important;
  border-radius:12px!important;
  background:color-mix(in srgb,var(--v23-surface-2) 58%,transparent)!important;
  color:var(--v23-text)!important;
  box-shadow:none!important;
}
#page-vod .vod-search{
  padding:0 14px!important;
}
#page-vod .vod-search svg{color:var(--v23-muted)!important}
#page-vod .vod-search input,#page-vod .vod-toolbar select{
  min-height:46px!important;
  color:var(--v23-text)!important;
}
#page-vod .vod-chip-row{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  margin:14px 0 18px!important;
}
#page-vod .vod-chip-row button{
  min-height:34px!important;
  padding:0 14px!important;
  border:1px solid var(--v23-line)!important;
  border-radius:999px!important;
  background:color-mix(in srgb,var(--v23-surface) 92%,transparent)!important;
  color:var(--v23-muted)!important;
  font-size:12px!important;
  font-weight:800!important;
}
#page-vod .vod-chip-row button:hover{
  color:var(--v23-text)!important;
  border-color:color-mix(in srgb,var(--v23-accent) 28%,var(--v23-line))!important;
}
#page-vod .vod-chip-row button.active{
  background:var(--v23-accent)!important;
  border-color:var(--v23-accent)!important;
  color:#fff!important;
}
#page-vod .vod-hero{
  display:grid!important;
  grid-template-columns:minmax(0,1.06fr) minmax(340px,.94fr)!important;
  gap:0!important;
  margin:0 0 28px!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid var(--v23-line)!important;
  border-radius:24px!important;
  background:
    radial-gradient(circle at 88% 18%,color-mix(in srgb,var(--v23-accent) 14%,transparent),transparent 28%),
    linear-gradient(135deg,color-mix(in srgb,var(--v23-surface) 98%,transparent),color-mix(in srgb,var(--v23-surface-2) 92%,transparent))!important;
  box-shadow:none!important;
}
#page-vod .vod-hero-media{
  position:relative!important;
  display:block!important;
  min-height:310px!important;
  color:inherit!important;
  text-decoration:none!important;
  background:var(--v23-surface-2)!important;
}
#page-vod .vod-hero-thumb{
  position:absolute!important;
  inset:0!important;
  overflow:hidden!important;
}
#page-vod .vod-hero-thumb::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:linear-gradient(180deg,rgba(4,6,14,.1),rgba(4,6,14,.34))!important;
}
#page-vod .vod-hero-thumb img,#page-vod .vod-hero-thumb .vod-hero-fallback{
  width:100%!important;
  height:100%!important;
}
#page-vod .vod-hero-thumb img{
  display:block!important;
  object-fit:cover!important;
}
#page-vod .vod-hero-fallback{
  display:grid!important;
  place-items:center!important;
  background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--v23-accent) 18%,transparent),transparent 40%),var(--v23-surface-2)!important;
  color:var(--v23-muted)!important;
  font-size:14px!important;
  font-weight:900!important;
  letter-spacing:.18em!important;
}
#page-vod .vod-hero-thumb em,#page-vod .vod-hero-thumb i{
  position:absolute!important;
  z-index:2!important;
  top:16px!important;
  padding:7px 10px!important;
  border-radius:10px!important;
  color:#fff!important;
  font-size:12px!important;
  font-style:normal!important;
  font-weight:900!important;
  box-shadow:none!important;
}
#page-vod .vod-hero-thumb em{
  left:16px!important;
  background:var(--v23-accent)!important;
}
#page-vod .vod-hero-thumb i{
  right:16px!important;
  background:rgba(12,13,16,.78)!important;
}
#page-vod .vod-hero-play{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  z-index:3!important;
  display:grid!important;
  place-items:center!important;
  width:74px!important;
  height:74px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.15)!important;
  border:1px solid rgba(255,255,255,.34)!important;
  color:#fff!important;
  font-size:24px!important;
  transform:translate(-50%,-50%)!important;
  backdrop-filter:blur(10px)!important;
}
#page-vod .vod-hero-copy{
  display:grid!important;
  align-content:center!important;
  gap:10px!important;
  padding:32px 34px!important;
}
#page-vod .vod-hero-kicker{
  color:var(--v23-accent)!important;
  font-size:11px!important;
  font-weight:800!important;
  letter-spacing:.16em!important;
}
#page-vod .vod-hero-copy h2{
  margin:0!important;
  color:var(--v23-text)!important;
  font-size:clamp(28px,2.25vw,40px)!important;
  line-height:1.18!important;
  letter-spacing:-.05em!important;
}
#page-vod .vod-hero-meta{
  margin:0!important;
  color:var(--v23-muted)!important;
  font-size:13px!important;
}
#page-vod .vod-hero-description{
  margin:4px 0 0!important;
  color:var(--v23-muted)!important;
  font-size:14px!important;
  line-height:1.72!important;
}
#page-vod .vod-hero-cta{
  display:inline-flex!important;
  justify-self:start!important;
  align-items:center!important;
  min-height:42px!important;
  margin-top:8px!important;
  padding:0 18px!important;
  border-radius:999px!important;
  background:var(--v23-accent)!important;
  color:#fff!important;
  text-decoration:none!important;
  font-size:13px!important;
  font-weight:850!important;
}
#page-vod .vod-archive-head{
  display:flex!important;
  align-items:end!important;
  justify-content:space-between!important;
  gap:16px!important;
  margin:0 0 16px!important;
}
#page-vod .vod-archive-head h2{
  margin:0!important;
  color:var(--v23-text)!important;
  font-size:24px!important;
  letter-spacing:-.04em!important;
}
#page-vod .vod-reset-btn{
  color:var(--v23-muted)!important;
  font-size:13px!important;
  font-weight:800!important;
}
#page-vod .vod-reset-btn:disabled{
  opacity:.4!important;
  pointer-events:none!important;
}
#page-vod .vod-library-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:16px!important;
}
#page-vod .vod-library-card{
  overflow:hidden!important;
  border:1px solid var(--v23-line)!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--v23-surface) 98%,transparent),color-mix(in srgb,var(--v23-surface-2) 26%,transparent))!important;
  color:var(--v23-text)!important;
  text-decoration:none!important;
  box-shadow:none!important;
}
#page-vod .vod-library-card:hover{
  transform:translateY(-4px)!important;
  border-color:color-mix(in srgb,var(--v23-accent) 30%,var(--v23-line))!important;
  box-shadow:0 18px 34px color-mix(in srgb,var(--v23-accent) 10%,transparent)!important;
}
#page-vod .vod-library-thumb{
  background:var(--v23-surface-2)!important;
}
#page-vod .vod-library-thumb>em{
  left:10px!important;
  background:var(--v23-accent)!important;
}
#page-vod .vod-library-thumb>i{
  right:10px!important;
  background:rgba(12,13,16,.82)!important;
}
#page-vod .vod-library-copy{
  padding:14px 14px 15px!important;
}
#page-vod .vod-library-copy>strong{
  min-height:2.9em!important;
  color:var(--v23-text)!important;
  font-size:15px!important;
  line-height:1.45!important;
}
#page-vod .vod-library-copy>small{
  margin-top:8px!important;
  color:var(--v23-muted)!important;
  font-size:12px!important;
}
#page-vod .vod-library-copy>span{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:6px!important;
  margin-top:10px!important;
}
#page-vod .vod-library-copy>span i{
  padding:4px 8px!important;
  border-radius:999px!important;
  background:color-mix(in srgb,var(--v23-accent) 10%,var(--v23-surface-2))!important;
  color:var(--v23-accent)!important;
  font-size:12px!important;
  font-style:normal!important;
  font-weight:800!important;
}
#page-vod .vod-library-empty{
  grid-column:1/-1!important;
  min-height:220px!important;
  border:1px dashed var(--v23-line)!important;
  border-radius:18px!important;
  background:color-mix(in srgb,var(--v23-surface) 96%,transparent)!important;
}
#page-vod .vod-pagination{
  margin-top:26px!important;
}
#page-vod .vod-pagination button{
  width:40px!important;
  height:40px!important;
  border:1px solid var(--v23-line)!important;
  border-radius:12px!important;
  background:color-mix(in srgb,var(--v23-surface) 96%,transparent)!important;
  color:var(--v23-text)!important;
}
#page-vod .vod-pagination button.active{
  background:var(--v23-accent)!important;
  border-color:var(--v23-accent)!important;
  color:#fff!important;
}
html[data-theme="dark"] #page-vod .vod-hero,html[data-theme="dark"] #page-vod .vod-toolbar,html[data-theme="dark"] #page-vod .vod-library-card,html[data-theme="dark"] #page-vod .vod-library-empty{
  box-shadow:none!important;
}
@media(max-width:1180px){#page-vod .vod-library-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
#page-vod .vod-toolbar{grid-template-columns:1fr 1fr!important}
#page-vod .vod-search{grid-column:1/-1!important}}
@media(max-width:900px){#page-vod .vod-hero{grid-template-columns:1fr!important}
#page-vod .vod-hero-media{min-height:240px!important}}
@media(max-width:768px){#page-vod.vod-library-page{padding:8px 10px 96px!important}
#page-vod .vod-page-head{grid-template-columns:1fr!important;gap:14px!important;padding:10px 0 18px!important}
#page-vod .vod-page-head h1{font-size:32px!important}
#page-vod .vod-page-head p{font-size:13px!important}
#page-vod .vod-page-count{justify-items:start!important;text-align:left!important}
#page-vod .vod-page-count strong{font-size:32px!important}
#page-vod .vod-toolbar{grid-template-columns:1fr 1fr!important;gap:8px!important;padding:10px!important}
#page-vod .vod-search{grid-column:1/-1!important}
#page-vod .vod-chip-row{flex-wrap:nowrap!important;overflow-x:auto!important;padding-bottom:2px!important}
#page-vod .vod-hero{margin-bottom:22px!important;border-radius:18px!important}
#page-vod .vod-hero-media{min-height:210px!important}
#page-vod .vod-hero-copy{padding:22px 18px!important}
#page-vod .vod-hero-copy h2{font-size:24px!important}
#page-vod .vod-hero-description{font-size:13px!important}
#page-vod .vod-archive-head{display:block!important}
#page-vod .vod-reset-btn{margin-top:6px!important;padding-left:0!important}
#page-vod .vod-library-grid{grid-template-columns:1fr!important;gap:10px!important}
#page-vod .vod-library-card{display:grid!important;grid-template-columns:132px minmax(0,1fr)!important;border-radius:14px!important}
#page-vod .vod-library-thumb{height:100%!important;min-height:104px!important;aspect-ratio:auto!important}
#page-vod .vod-library-copy{padding:10px!important}
#page-vod .vod-library-copy>strong{min-height:0!important;font-size:14px!important}}
@media(max-width:420px){#page-vod .vod-library-card{grid-template-columns:116px minmax(0,1fr)!important}}
/* ============================================================
   v24.30 LIVE · all-offline modern minimal state
   ============================================================ */
#page-live.live-hub-page{
  position:relative!important;
}
#page-live .live-extinct-overlay[hidden]{
  display:none!important;
}
#page-live .live-extinct-overlay{
  position:absolute!important;
  z-index:30!important;
  inset:104px 0 0!important;
  display:grid!important;
  place-items:center!important;
  min-height:clamp(430px,62vh,720px)!important;
  padding:36px 24px!important;
  pointer-events:none!important;
}
#page-live.is-all-offline #liveCardGrid{
  filter:blur(8px) brightness(.46) saturate(.58)!important;
  transform:translateZ(0)!important;
  opacity:.82!important;
  transition:filter .35s ease,opacity .35s ease!important;
  pointer-events:none!important;
  user-select:none!important;
}
#page-live .live-extinct-panel{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  width:min(650px,calc(100vw - 64px))!important;
  min-height:246px!important;
  padding:34px 44px 32px!important;
  overflow:hidden!important;
  border:1px solid color-mix(in srgb,#76e6b0 38%,var(--v23-line))!important;
  border-radius:28px!important;
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--v23-surface) 90%,transparent),color-mix(in srgb,var(--v23-surface) 80%,transparent))!important;
  box-shadow:
    0 26px 80px rgba(0,0,0,.28),
    inset 0 1px rgba(255,255,255,.045)!important;
  backdrop-filter:blur(28px) saturate(1.08)!important;
  -webkit-backdrop-filter:blur(28px) saturate(1.08)!important;
}
#page-live .live-extinct-panel::before{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:0!important;
  width:150px!important;
  height:2px!important;
  transform:translateX(-50%)!important;
  background:linear-gradient(90deg,transparent,#74e9b3,transparent)!important;
  opacity:.9!important;
}
#page-live .live-extinct-panel::after{
  content:""!important;
  position:absolute!important;
  inset:-1px!important;
  z-index:-1!important;
  border-radius:inherit!important;
  background:radial-gradient(circle at 50% -10%,rgba(83,220,155,.11),transparent 38%)!important;
  pointer-events:none!important;
}
#page-live .live-extinct-mark{
  position:relative!important;
  display:grid!important;
  place-items:center!important;
  width:42px!important;
  height:42px!important;
  margin:0 0 14px!important;
  border:1px solid rgba(116,233,179,.34)!important;
  border-radius:50%!important;
  background:rgba(116,233,179,.07)!important;
}
#page-live .live-extinct-mark::before{
  content:""!important;
  width:13px!important;
  height:7px!important;
  border-left:2px solid #77e7b2!important;
  border-bottom:2px solid #77e7b2!important;
  transform:translateY(-2px) rotate(-45deg)!important;
  border-radius:1px!important;
}
#page-live .live-extinct-mark span{
  position:absolute!important;
  inset:-7px!important;
  border:1px solid rgba(116,233,179,.08)!important;
  border-radius:50%!important;
}
#page-live .live-extinct-kicker{
  margin:0 0 8px!important;
  color:color-mix(in srgb,#8be9bd 72%,var(--v23-muted))!important;
  font-size:10px!important;
  font-weight:750!important;
  line-height:1!important;
  letter-spacing:.22em!important;
}
#page-live .live-extinct-title{
  margin:0 0 13px!important;
  color:var(--v23-text)!important;
  font-size:clamp(24px,2vw,31px)!important;
  font-weight:800!important;
  line-height:1.15!important;
  letter-spacing:-.045em!important;
}
#page-live .live-extinct-timer{
  display:flex!important;
  align-items:flex-end!important;
  justify-content:center!important;
  gap:17px!important;
  min-height:67px!important;
  color:var(--v23-text)!important;
  font-variant-numeric:tabular-nums lining-nums!important;
}
#page-live .live-extinct-timer>span{
  display:flex!important;
  align-items:baseline!important;
  gap:5px!important;
  white-space:nowrap!important;
}
#page-live .live-extinct-timer strong{
  min-width:1.7ch!important;
  color:var(--v23-text)!important;
  font-family:ui-monospace,"SFMono-Regular","Cascadia Code","Roboto Mono",monospace!important;
  font-size:clamp(44px,4.2vw,64px)!important;
  font-weight:520!important;
  line-height:1!important;
  letter-spacing:-.075em!important;
}
#page-live .live-extinct-timer small{
  color:var(--v23-muted)!important;
  font-size:12px!important;
  font-weight:750!important;
  letter-spacing:-.02em!important;
}
#page-live .live-extinct-pending{
  min-height:56px!important;
  display:grid!important;
  place-items:center!important;
  color:var(--v23-muted)!important;
  font-size:14px!important;
  font-weight:700!important;
}
#page-live .live-extinct-pending[hidden],#page-live .live-extinct-timer[hidden]{display:none!important}
html[data-theme="light"] #page-live.is-all-offline #liveCardGrid{
  filter:blur(8px) brightness(.72) saturate(.55)!important;
  opacity:.65!important;
}
html[data-theme="light"] #page-live .live-extinct-panel{
  background:rgba(250,250,251,.88)!important;
  border-color:color-mix(in srgb,#45b883 32%,var(--v23-line))!important;
  box-shadow:0 26px 80px rgba(28,30,34,.14),inset 0 1px rgba(255,255,255,.72)!important;
}
@media(max-width:780px){#page-live .live-extinct-overlay{
    inset:118px 0 0!important;
    min-height:460px!important;
    padding:24px 14px!important;
  }
#page-live .live-extinct-panel{
    width:min(560px,calc(100vw - 28px))!important;
    min-height:220px!important;
    padding:28px 18px 26px!important;
    border-radius:22px!important;
  }
#page-live .live-extinct-timer{gap:10px!important}
#page-live .live-extinct-timer strong{font-size:clamp(36px,11vw,52px)!important}
#page-live .live-extinct-timer small{font-size:11px!important}}
@media(max-width:460px){#page-live .live-extinct-kicker{font-size:9px!important;letter-spacing:.16em!important}
#page-live .live-extinct-title{font-size:23px!important}
#page-live .live-extinct-timer{gap:7px!important}
#page-live .live-extinct-timer>span{gap:3px!important}
#page-live .live-extinct-timer strong{font-size:34px!important}
#page-live .live-extinct-timer small{font-size:10px!important}}

/* ===================================================================
   [v24.33] 라이브 카드 — 현재 시청자 수 배지
   썸네일 오른쪽 위. 왼쪽 위 LIVE 배지와 겹치지 않는 자리입니다.
   =================================================================== */
#page-live .live-card-thumb{position:relative}
#page-live .live-viewers{
  position:absolute;top:10px;right:10px;z-index:3;
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 9px;border-radius:999px;
  background:rgba(9,13,20,.78);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:#f4f6f9;font-size:12px;font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums;
  box-shadow:0 2px 10px rgba(0,0,0,.32);
  pointer-events:none;
}
#page-live .live-viewers i{
  width:6px;height:6px;border-radius:50%;
  background:var(--v23-accent,#ea3f69);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--v23-accent,#ea3f69) 26%,transparent);
}
@media(max-width:760px){
  #page-live .live-viewers{top:8px;right:8px;padding:3px 7px;font-size:11px}
}

/* [v25] 캘린더 레이아웃
   index.html 의 .schedule-layout 에 인라인 style="...!important" 로 박혀 있던 것을
   여기로 옮겼습니다. 인라인 !important 는 어떤 스타일시트도 이길 수 없어서,
   app.bundle.css 의 모바일 규칙(max-width:760px 에서 숨김)이 계속 무시됐고
   폰에서 PC 월간 캘린더가 모바일 주간 뷰 아래에 같이 보였습니다. */
@media (min-width:761px){
  #page-calendar .schedule-layout{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0 0 56px!important;
    transform:none!important;
  }
}