/* ============================================================
   JINHO ARCHIVE v23 · GLOBAL UI RENEWAL / PHASE 1
   Global top navigation + editorial home + shared page language
   ============================================================ */
:root{
  --v23-accent:#ea3f69;
  --v23-accent-soft:rgba(234,63,105,.09);
  --v23-bg:#f7f6f7;
  --v23-surface:#ffffff;
  --v23-surface-2:#f2f1f2;
  --v23-line:#e7e3e6;
  --v23-text:#171619;
  --v23-muted:#7b777d;
  --v23-soft-text:#9b969d;
  --v23-shadow:0 18px 48px rgba(33,24,29,.06);
  --bg:#f7f6f7;
  --bg2:#f2f1f2;
  --panel:#ffffff;
  --panel2:#f3f1f2;
  --line:#e7e3e6;
  --text:#171619;
  --muted:#7b777d;
  --primary:#ea3f69;
  --accent:#ea3f69;
  --shadow:0 16px 42px rgba(33,24,29,.055);
}
html[data-theme="dark"]{
  --v23-accent:#ff547d;
  --v23-accent-soft:rgba(255,84,125,.10);
  --v23-bg:#0b0c0f;
  --v23-surface:#121318;
  --v23-surface-2:#17191f;
  --v23-line:#292b32;
  --v23-text:#f5f3f5;
  --v23-muted:#9d99a2;
  --v23-soft-text:#74727a;
  --v23-shadow:0 22px 56px rgba(0,0,0,.26);
  --bg:#0b0c0f;
  --bg2:#0e0f13;
  --panel:#121318;
  --panel2:#17191f;
  --line:#292b32;
  --text:#f5f3f5;
  --muted:#9d99a2;
  --primary:#ff547d;
  --accent:#ff547d;
  --shadow:0 18px 50px rgba(0,0,0,.24);
}
html,body{background:var(--v23-bg)!important;color:var(--v23-text)}
body.v23-ui{padding-left:0!important;background:var(--v23-bg)!important}
body.v23-ui .panel{box-shadow:none;border-color:var(--v23-line)}
/* ---------- Global header ---------- */
.v23-global-header{
  position:sticky!important;top:0!important;left:0!important;right:auto!important;z-index:90!important;
  width:100%!important;max-width:none!important;height:76px!important;margin:0!important;padding:0 clamp(24px,3.1vw,64px)!important;
  display:flex!important;align-items:center!important;gap:24px!important;
  border-bottom:1px solid color-mix(in srgb,var(--v23-line) 88%,transparent)!important;
  background:color-mix(in srgb,var(--v23-bg) 90%,transparent)!important;
  backdrop-filter:blur(20px) saturate(1.25)!important;
  box-shadow:none!important;
}
.v23-global-brand{
  flex:0 0 168px;display:flex;align-items:center;height:44px;text-decoration:none;overflow:hidden;
}
.v23-global-brand img{display:block;width:164px;height:40px;object-fit:contain;object-position:left center}
.v23-global-brand .v23-logo-dark{display:none}
html[data-theme="dark"] .v23-global-brand .v23-logo-light{display:none}
html[data-theme="dark"] .v23-global-brand .v23-logo-dark{display:block}
.v23-global-nav{
  flex:1 1 auto;min-width:0;height:100%;display:flex;align-items:stretch;justify-content:center;gap:2px;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
}
.v23-global-nav::-webkit-scrollbar{display:none}
.v23-global-nav .v23-nav-tab.sidebar-tab{
  position:relative;flex:0 0 auto;width:auto!important;min-width:auto!important;min-height:0!important;height:100%!important;
  display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;
  margin:0!important;padding:0 13px!important;border:0!important;border-radius:0!important;background:transparent!important;
  color:var(--v23-muted)!important;box-shadow:none!important;transform:none!important;font-size:13px!important;font-weight:720!important;
  letter-spacing:-.01em;cursor:pointer;transition:color .16s ease!important;
}
.v23-global-nav .v23-nav-tab.sidebar-tab::after{
  content:"";position:absolute;left:50%;right:50%;bottom:-1px;height:2px;background:var(--v23-accent);
  transition:left .18s ease,right .18s ease;
}
.v23-global-nav .v23-nav-tab.sidebar-tab:hover{color:var(--v23-text)!important;background:transparent!important}
.v23-global-nav .v23-nav-tab.sidebar-tab.active{color:var(--v23-text)!important;background:transparent!important;border:0!important;box-shadow:none!important}
.v23-global-nav .v23-nav-tab.sidebar-tab.active::after{left:12px;right:12px}
.v23-global-nav .v23-live-nav i{width:6px;height:6px;border-radius:50%;background:#a5a1a7;box-shadow:none}
body.is-live .v23-global-nav .v23-live-nav i{background:#ff315e;box-shadow:0 0 0 4px rgba(255,49,94,.11)}
body:not(.up-rank-enabled) .v23-up-rank-nav{display:none!important}
.v23-global-header .page-heading{display:none!important}
.v23-global-header .top-actions{flex:0 0 auto;display:flex!important;align-items:center!important;gap:8px!important;margin:0!important}
.v23-global-header .top-live-cluster{display:flex;align-items:center;gap:7px}
.v23-global-header .cloud-status{
  max-width:132px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  border:0!important;background:transparent!important;color:var(--v23-soft-text)!important;padding:0 3px!important;font-size:10px!important;font-weight:650!important;
}
.v23-global-header #themeToggle{
  min-width:38px!important;height:38px!important;padding:0 11px!important;border:1px solid var(--v23-line)!important;border-radius:999px!important;
  background:var(--v23-surface)!important;color:var(--v23-text)!important;box-shadow:none!important;font-size:11px!important;font-weight:750!important;
}
.v23-soop-pill{
  height:38px;display:flex;align-items:center;gap:7px;padding:0 11px;border:1px solid var(--v23-line);border-radius:999px;
  background:var(--v23-surface);color:var(--v23-muted);text-decoration:none;font-size:10px;font-weight:850;letter-spacing:.08em;
}
.v23-soop-pill i{width:6px;height:6px;border-radius:50%;background:#a5a1a7}
.v23-soop-pill .on{display:none;color:#ff315e}
body.is-live .v23-soop-pill{border-color:rgba(255,49,94,.28);background:rgba(255,49,94,.07)}
body.is-live .v23-soop-pill i{background:#ff315e;box-shadow:0 0 0 4px rgba(255,49,94,.11)}
body.is-live .v23-soop-pill .off{display:none}
body.is-live .v23-soop-pill .on{display:inline}
/* Keep floating live toast below the new global header. */
.v23-ui .live-toast{top:88px!important;right:24px!important}
/* ---------- Desktop shell ---------- */
.v23-ui .app-shell{
  width:min(1540px,calc(100% - 64px))!important;max-width:1540px!important;margin:0 auto!important;
  padding:34px 0 76px!important;background:transparent!important;
}
.v23-ui .app-page{width:100%;max-width:none;margin:0 auto}
.v23-ui .app-page.active{animation:v23PageIn .24s ease both}
@keyframes v23PageIn{from{opacity:.35;transform:translateY(5px)}to{opacity:1;transform:none}}
/* ---------- Shared editorial page title language ---------- */
.v23-page-intro{
  display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:0 0 30px;padding:10px 2px 25px;
  border-bottom:1px solid var(--v23-line);
}
.v23-page-intro>span,.v23-ui .live-hub-header::before,.v23-ui .poster-archive-header::before,.v23-ui .vod-page-head::before,.v23-ui .up-rank-head::before,.v23-ui .schedule-page-head::before{
  color:var(--v23-accent);font-size:10px;font-weight:850;letter-spacing:.19em;line-height:1.2;
}
.v23-page-intro h1{margin:7px 0 8px;font-size:clamp(34px,3.15vw,52px);line-height:1;letter-spacing:-.055em;font-weight:820}
.v23-page-intro p{max-width:720px;margin:0;color:var(--v23-muted);font-size:13px;line-height:1.65}
.v23-ui .live-hub-header,.v23-ui .poster-archive-header,.v23-ui .vod-page-head,.v23-ui .up-rank-head,.v23-ui .schedule-page-head{
  position:relative!important;margin:0 0 28px!important;padding:31px 2px 24px!important;border:0!important;border-bottom:1px solid var(--v23-line)!important;
  background:transparent!important;box-shadow:none!important;border-radius:0!important;
}
.v23-ui .live-hub-header::before{content:"05 / LIVE";position:absolute;top:7px;left:2px}
.v23-ui .vod-page-head::before{content:"06 / VOD";position:absolute;top:7px;left:2px}
.v23-ui .up-rank-head::before{content:"08 / UP RANK";position:absolute;top:7px;left:2px}
.v23-ui .poster-archive-header::before{content:"09 / POSTER";position:absolute;top:7px;left:2px}
.v23-ui .schedule-page-head::before{content:"02 / SCHEDULE";position:absolute;top:7px;left:2px}
.v23-ui .live-hub-header h2,.v23-ui .poster-archive-header h2,.v23-ui .vod-page-head h1,.v23-ui .up-rank-head h1,.v23-ui .schedule-page-head h1{
  margin:3px 0 8px!important;color:var(--v23-text)!important;font-size:clamp(34px,3.15vw,52px)!important;line-height:1!important;
  letter-spacing:-.055em!important;font-weight:820!important;
}
.v23-ui .live-hub-header p,.v23-ui .poster-archive-header p,.v23-ui .vod-page-head p,.v23-ui .up-rank-head p,.v23-ui .schedule-page-head p{color:var(--v23-muted)!important;font-size:13px!important;line-height:1.65!important}
.v23-ui .up-rank-head .eyebrow{display:none!important}
/* ---------- Calendar / Activity / Stats first-pass shell cleanup ---------- */
#page-calendar .portal-hero,#page-calendar .spotlight-row,#page-calendar .dashboard-strip{display:none!important}
#page-calendar .schedule-layout{margin-top:0!important}
#page-calendar .calendar-card{box-shadow:none!important;border-color:var(--v23-line)!important;background:var(--v23-surface)!important}
#page-calendar .calendar-head{padding-bottom:12px!important;border-bottom:1px solid var(--v23-line)!important}
#page-calendar .calendar-kicker{color:var(--v23-accent)!important}
#page-activity .activity-layout{gap:18px!important}
#page-activity .activity-feed-panel,#page-activity .activity-filter-panel{box-shadow:none!important;border-color:var(--v23-line)!important;background:var(--v23-surface)!important}
#page-activity .activity-status-row{margin-top:-18px!important;margin-bottom:14px!important;color:var(--v23-soft-text)!important}
#page-stats .stats-view-switcher{margin-bottom:22px!important}
#page-stats .stats-view-tabs{border-bottom:1px solid var(--v23-line)!important}
/* ---------- Secondary pages: remove oversized dashboard framing ---------- */
.v23-ui .vod-toolbar,.v23-ui .up-rank-panel,.v23-ui .poster-filter-tabs{box-shadow:none!important}
.v23-ui .btn{box-shadow:none}
/* ---------- Desktop: sidebar is replaced by global navigation ---------- */
@media (min-width:1101px){body.v23-ui>.app-sidebar{display:none!important}}
@media (min-width:1900px){.v23-ui .app-shell{width:min(1660px,calc(100% - 96px))!important;max-width:1660px!important}
.v23-global-header{padding-left:clamp(48px,4vw,96px)!important;padding-right:clamp(48px,4vw,96px)!important}}
@media (max-width:1380px) and (min-width:1101px){.v23-global-header{padding-left:24px!important;padding-right:24px!important;gap:14px!important}
.v23-global-brand{flex-basis:142px}
.v23-global-brand img{width:138px}
.v23-global-nav .v23-nav-tab.sidebar-tab{padding:0 9px!important;font-size:12px!important}
.v23-global-header .cloud-status{display:none!important}
.v23-ui .app-shell{width:min(100% - 44px,1480px)!important}}
/* ---------- Tablet/mobile: keep the existing drawer navigation ---------- */
@media (max-width:1100px){body.v23-ui{padding-left:0!important}
.v23-global-header{
    height:64px!important;padding:0 14px!important;gap:10px!important;background:color-mix(in srgb,var(--v23-bg) 94%,transparent)!important;
  }
.v23-global-header .v23-global-brand,.v23-global-header .v23-global-nav,.v23-soop-pill{display:none!important}
.v23-global-header .page-heading{display:grid!important;gap:0!important;min-width:0;margin-right:auto}
.v23-global-header .page-heading span{font-size:8px!important;letter-spacing:.14em!important;color:var(--v23-accent)!important}
.v23-global-header .page-heading strong{font-size:16px!important;color:var(--v23-text)!important;white-space:nowrap}
.v23-global-header .top-actions{gap:5px!important}
.v23-global-header .cloud-status{display:none!important}
.v23-global-header #themeToggle{height:36px!important;min-width:36px!important;padding:0 9px!important;font-size:10px!important}
.v23-ui .app-shell{width:100%!important;max-width:none!important;padding:18px 12px 86px!important}
.v23-page-intro{display:none!important}
.v23-ui .live-hub-header,.v23-ui .poster-archive-header,.v23-ui .vod-page-head,.v23-ui .up-rank-head,.v23-ui .schedule-page-head{padding-left:4px!important;padding-right:4px!important}}
.v23-global-header .v23-global-brand.sidebar-tab{
  width:168px!important;min-height:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;
  box-shadow:none!important;transform:none!important;cursor:pointer!important;
}
.v23-global-header .v23-global-brand.sidebar-tab::after{display:none!important}
.v23-global-header .v23-global-brand.sidebar-tab:hover{background:transparent!important;transform:none!important}
/* High-specificity cleanup for legacy topbar positioning rules. */
html[data-theme="light"] body.v23-ui .v23-global-header{
  background:rgba(247,246,247,.92)!important;border-bottom-color:var(--v23-line)!important;
}
html[data-theme="dark"] body.v23-ui .v23-global-header{
  background:rgba(11,12,15,.92)!important;border-bottom-color:var(--v23-line)!important;
}
html[data-theme="light"] body.v23-ui .app-shell,html[data-theme="dark"] body.v23-ui .app-shell{background:transparent!important}
.v23-global-header .top-live-cluster{position:static!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;flex:0 0 auto!important;overflow:visible!important}
.v23-global-header .live-toast{display:none!important}
/* ============================================================
   v23.0.1 · GLOBAL NAV VISIBILITY FIX
   Legacy .app-topbar .top-actions{width:100%} was consuming the
   entire header row and collapsing the center navigation to 0px.
   Desktop header is now an explicit 3-column grid:
   brand | global navigation | utilities.
   ============================================================ */
@media (min-width:1101px){body.v23-ui .v23-global-header{
    display:grid!important;
    grid-template-columns:168px minmax(0,1fr) max-content!important;
    align-items:center!important;
    column-gap:clamp(16px,1.5vw,28px)!important;
  }
body.v23-ui .v23-global-header .v23-global-brand{
    width:168px!important;
    min-width:168px!important;
    max-width:168px!important;
    justify-self:start!important;
  }
body.v23-ui .v23-global-header .v23-global-nav{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    display:flex!important;
    justify-content:center!important;
    overflow-x:auto!important;
    visibility:visible!important;
    opacity:1!important;
  }
body.v23-ui .v23-global-header .top-actions{
    width:auto!important;
    min-width:max-content!important;
    max-width:none!important;
    flex:none!important;
    justify-self:end!important;
    margin:0!important;
  }
body.v23-ui .v23-global-header .top-live-cluster{
    flex:0 0 auto!important;
    width:auto!important;
  }}
@media (max-width:1500px) and (min-width:1101px){body.v23-ui .v23-global-header{grid-template-columns:148px minmax(0,1fr) max-content!important;padding-left:22px!important;padding-right:22px!important}
body.v23-ui .v23-global-header .v23-global-brand{width:148px!important;min-width:148px!important;max-width:148px!important}
body.v23-ui .v23-global-header .v23-global-brand img{width:144px!important}
body.v23-ui .v23-global-header .v23-global-nav .v23-nav-tab.sidebar-tab{padding-left:9px!important;padding-right:9px!important;font-size:12px!important}
body.v23-ui .v23-global-header .cloud-status{display:none!important}}
@media (max-width:1240px) and (min-width:1101px){body.v23-ui .v23-global-header{grid-template-columns:132px minmax(0,1fr) max-content!important;column-gap:10px!important;padding-left:16px!important;padding-right:16px!important}
body.v23-ui .v23-global-header .v23-global-brand{width:132px!important;min-width:132px!important;max-width:132px!important}
body.v23-ui .v23-global-header .v23-global-brand img{width:128px!important}
body.v23-ui .v23-global-header .v23-global-nav{justify-content:flex-start!important}
body.v23-ui .v23-global-header .v23-global-nav .v23-nav-tab.sidebar-tab{padding-left:8px!important;padding-right:8px!important;font-size:11.5px!important}
body.v23-ui .v23-global-header .v23-soop-pill{display:none!important}}
@media (max-width:1100px){body.v23-ui .v23-global-header{display:flex!important}
body.v23-ui .v23-global-header .top-actions{width:auto!important;min-width:0!important;margin-left:auto!important}}
/* ============================================================
   v23.22 · LIGHT MODE HOME HEADER VISIBILITY
   home-v23.css intentionally uses white nav over the hero.
   In light mode the global header itself is light, so force the
   light-mode header controls/text back to dark readable colors.
   ============================================================ */
html[data-theme="light"] body.v23-ui.home-v23-page.home-v23-at-top .v23-global-header{
  background:rgba(247,246,247,.94)!important;
  border-bottom-color:rgba(30,27,31,.10)!important;
  backdrop-filter:blur(18px) saturate(1.15)!important;
}
html[data-theme="light"] body.v23-ui.home-v23-page.home-v23-at-top .v23-global-nav .v23-nav-tab.sidebar-tab{
  color:#716c73!important;
  text-shadow:none!important;
}
html[data-theme="light"] body.v23-ui.home-v23-page.home-v23-at-top .v23-global-nav .v23-nav-tab.sidebar-tab:hover,html[data-theme="light"] body.v23-ui.home-v23-page.home-v23-at-top .v23-global-nav .v23-nav-tab.sidebar-tab.active{
  color:#171619!important;
}
html[data-theme="light"] body.v23-ui.home-v23-page.home-v23-at-top .v23-global-brand img{
  filter:none!important;
  opacity:1!important;
}
html[data-theme="light"] body.v23-ui.home-v23-page.home-v23-at-top .v23-global-brand .v23-logo-light{
  display:block!important;
}
html[data-theme="light"] body.v23-ui.home-v23-page.home-v23-at-top .v23-global-brand .v23-logo-dark{
  display:none!important;
}html[data-theme="light"] body.v23-ui.home-v23-page.home-v23-at-top .v23-soop-pill,html[data-theme="light"] body.v23-ui.home-v23-page.home-v23-at-top #themeToggle{
  background:#fff!important;
  border-color:#e3dfe2!important;
  color:#171619!important;
  box-shadow:0 5px 16px rgba(34,27,31,.06)!important;
}
html[data-theme="light"] body.v23-ui.home-v23-page.home-v23-at-top .cloud-status{
  color:#777179!important;
}
/* ============================================================
   v23.23 · hard light-mode header fix
   Must remain readable while the light header sits over the hero.
   ============================================================ */
html[data-theme="light"] body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header{
  background:rgba(248,247,248,.96)!important;
  border-bottom:1px solid #e4e1e4!important;
  color:#171619!important;
}
html[data-theme="light"] body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header .v23-global-nav .v23-nav-tab.sidebar-tab{
  color:#69656b!important;
  text-shadow:none!important;
}
html[data-theme="light"] body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header .v23-global-nav .v23-nav-tab.sidebar-tab:hover,html[data-theme="light"] body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header .v23-global-nav .v23-nav-tab.sidebar-tab.active{
  color:#111014!important;
}
html[data-theme="light"] body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header .v23-global-brand img{
  filter:none!important;
  opacity:1!important;
}
html[data-theme="light"] body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header .v23-logo-light{
  display:block!important;
}
html[data-theme="light"] body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header .v23-logo-dark{
  display:none!important;
}html[data-theme="light"] body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header .v23-soop-pill,html[data-theme="light"] body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header #themeToggle{
  color:#171619!important;
  background:#fff!important;
  border-color:#dfdcdf!important;
  filter:none!important;
  text-shadow:none!important;
}
html[data-theme="light"] body.v23-ui.home-v23-page.home-v23-at-top header.v23-global-header .cloud-status{
  color:#6f6a70!important;
}