/* Home art direction: the approved 1536 × 1024 theater, with live DOM controls. */
@font-face {
  font-family: 'Channel Serif';
  src: url('assets/glass-book/book-serif.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
}
:root { --channel-serif: 'Channel Serif', 'Noto Serif KR', serif; }
body.theater:has(#page-home.active) { background: radial-gradient(ellipse at 45% 8%,#23252c66,transparent 65%),#12151a; }
.sidebar { width: 100vw; padding-top: 27px; }
.theater-wordmark { font: 400 34px/48px var(--channel-serif); letter-spacing: .18em; }
.nav { height: 53px; padding: 0; width: min(43vw, 660px); display: flex; }
.nav button { padding: 12px 0; flex: 1; font-weight: 300; letter-spacing: .09em; }
.nav button[data-page="home"] { flex: .7; }
.nav button[data-page="gallery"] { flex: 1.22; }
.nav button.active { background: none; box-shadow: none; text-shadow: none; }
.nav button::after { height: 18px; background: #e3d3ed33; }
.nav-glass-marker {
  position: absolute; inset: 0 auto 0 0; pointer-events: none; border-radius: 40px;
  border: 1px solid #d4b0f6b3;
  background: linear-gradient(145deg, #7d648d91, #9a7fba55 60%, #b59bc247);
  box-shadow: inset 0 1px 2px #f4dcff20, inset 0 -2px 4px #bc8bea38, 0 2px 8px #c39ae423;
  transition: transform 270ms cubic-bezier(.22,1,.36,1), width 270ms cubic-bezier(.22,1,.36,1), opacity 180ms;
}
.nav button { z-index: 1; }
.social-icon { width: 47px; height: 49px; border-radius: 12px; background: linear-gradient(135deg,#ffffff06,#ffffff01); }
.social-icon small { font: 13px var(--channel-serif); bottom: 0; }
.social-icon:hover { border-color: #c7b3dd88; background: #b5a3d00c; }
.channel-icons { gap: 14px; }
.theater-home { padding-top: clamp(36px,5.86vh,72px); padding-bottom: 10px; isolation: isolate; }
.theater-home::before { display: none; }
.theater-stage { perspective: none; isolation: auto; }
.theater-stage::after { display: none; }
.theater-floor {
  position: absolute; z-index: -2; pointer-events: none; left: 0;
  top: calc(100% - 39.3vw); width: 100%; aspect-ratio: 3/2;
  background: url('assets/theater/smoked-glass-floor-v2.webp') center/100% 100% no-repeat;
  opacity: .48; filter: saturate(.55) brightness(.7) blur(.35px);
  mask-image: linear-gradient(transparent, #000 22%, #000 90%, transparent);
}
.theater-floor::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 85%, transparent 8%, #11141950 65%);
}
.theater-hero {
  background: radial-gradient(ellipse at 70% 35%,#51475145,transparent 65%),#22232c;
  border-color: #e2c8f5ab;
  box-shadow: 0 3px 6px #0008, 0 20px 35px -18px #0009, inset 0 0 0 1px #f7e7ff10;
}
.theater-image img { filter: saturate(.89) contrast(1.025); }
.theater-hero-shade { background: linear-gradient(0deg,#17151d96,transparent 32%),linear-gradient(90deg,#14131a12,transparent 42%); }
.theater-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(112deg,transparent 19%,#f5eaff05 32%,transparent 42%);
  box-shadow: inset 0 1px #ffffff10; transform: translateX(var(--scene-light,0px));
  transition: transform 800ms cubic-bezier(.22,1,.36,1);
}
.theater-identity { left: 4.1%; bottom: 5.5%; z-index: 2; }
.theater-identity #heroName { font-weight: 300; font-size: clamp(34px,3.5vw,54px); letter-spacing: -.045em; margin-bottom: 5px; }
.theater-identity>p { font: 400 13px/1.6 var(--channel-serif); letter-spacing: .45em; color: #d8c5e7; }
.theater-status {
  right: 1.25%; bottom: 5%; width: 32%; min-width: 0; min-height: 78px;
  padding: 13px 22px 13px 28px; gap: 19px; z-index: 3;
  border-color: #e6d5f0a1; border-radius: 60px;
  background: linear-gradient(130deg,#24202d96,#4137494d 48%,#c8b4db1c);
  backdrop-filter: blur(18px) saturate(.68);
  box-shadow: inset 0 1px 1px #fff3, inset 0 -1px 4px #d4b2f51c, 0 8px 24px #0c081f20;
}
.theater-status #heroLive { font: 400 16px/1.4 var(--channel-serif); letter-spacing: .18em; gap: 19px; }
.theater-status #heroLive i { width: 15px; height: 15px; box-shadow: inset 0 1px 2px #ffffff6b,0 1px 6px #e2c9ff29; }
.theater-status p { margin: 5px 0 0 34px; font-size: 11px; letter-spacing: .04em; font-weight: 300; }
.theater-status::before { content: ''; position: absolute; right: 76px; top: 25%; height: 50%; width: 1px; background: #e4cff845; }
.theater-status .soop-glyph { border: 0; width: 34px; }
.preview-empty svg { opacity: .75; width: 24px; height: 24px; }
.theater-reflection {
  top: calc(100% + 5px); left: 16.8%; width: 66.4%; height: 230px; z-index: -1;
  opacity: .28; filter: blur(3px) saturate(.65);
  mask-image: linear-gradient(#000b, #0006 24%, transparent 93%);
}
.theater-reflection .reflection-source {
  width: 100%; height: var(--hero-reflection-height,548px); overflow: hidden;
  position: relative; transform: scaleY(-1); background: #2b2631;
}
.theater-reflection img {
  width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 50%;
  transform: translate(var(--hero-offset-x,0%),var(--hero-offset-y,0%)) scale(calc(var(--hero-scale,1.45) / 1.45));
}
.theater-ruler { margin-top: 59px; gap: 35px; }
.ruler-arrow { width: 49px; height: 49px; display: grid; place-items: center; background: #14151a29; border-color: #e1d4ed9c; }
.ruler-arrow svg { width: 21px; height: 21px; stroke: currentColor; stroke-width: 1.1; fill: none; }
.ruler-arrow:hover { background: #c2a2e512; border-color: #f2deff; }
.ruler-arrow:disabled { opacity: .35; }
.ruler-ticks { height: 28px; top: 6px; background: none; display: flex; justify-content: space-between; align-items: center; }
.ruler-ticks i { display: block; width: 1px; height: 14px; background: #bba9ce67; }
.ruler-ticks i:nth-child(3n+1) { height: 27px; background: #d2bcdf99; }
.ruler-ticks::after { top: 13px; background: linear-gradient(90deg,#c5aedf20,#d3b8f1ad,#c5aedf20); box-shadow: none; }
.ruler-dates { font: 300 10px/1.4 'Noto Sans KR',sans-serif; top: 44px; color: #c5b9cd; }
.ruler-orb {
  top: 6px; width: 31px; height: 31px;
  background: radial-gradient(ellipse at 32% 17%,#ffffffd9 0, #e9d7ffb0 7%,#b995e033 27%,transparent 50%),radial-gradient(ellipse at 65% 78%,#d4bcfb52,transparent 60%),#76618c20;
  box-shadow: inset 1px 1px 3px #fff9,inset -3px -4px 8px #38225180,0 0 14px #d4afff5c,0 0 32px #a06dd521;
  transition: left 570ms cubic-bezier(.2,.8,.2,1);
}
.ruler-orb::after { height: 98px; top: -32px; background: linear-gradient(transparent,#e7d7ff91 36%,#b290d44d 64%,transparent); }
.ruler-orb::before { content: ''; position: absolute; left: -50%; top: 65%; width: 200%; height: 62px; background: radial-gradient(ellipse at 50% 0,#d6b3ff50,transparent 70%); filter: blur(8px); }
.ruler-selected { font: 400 16px/1.4 var(--channel-serif); top: 45px; transition: left 570ms cubic-bezier(.2,.8,.2,1); }
.theater-next { margin-top: 29px; width: min(1015px,72%); gap: 27px; }
#homeNextStream { font-weight: 300; }
#homeNextStream small { font: 400 14px var(--channel-serif); letter-spacing: .3em; }
#homeNextStream .v148-date { font: 400 25px var(--channel-serif); }
#homeNextStream .v148-title { font-weight: 300; font-size: 16px; }
#homeNextStream .v148-time { font-weight: 300; font-size: 13px; }
.theater-footer { margin-top: 6px; font-family: var(--channel-serif); font-size: 10px; color: #d7cadf; }
.theater-footer small { font: 400 9px/1.8 var(--channel-serif); color: #a89fae; }
.theater-footer button { font-size: 10px; font-weight: 300; opacity: .65; }
.music-dock { background: linear-gradient(115deg,#b8a4cf12,#12141859); box-shadow: inset 0 1px #fff1; }
.music-dock #musicTitle { font-weight: 300; letter-spacing: .06em; }
@media(min-width:1201px) { .nav { transform: translateX(-16px); } }
@media(min-width:1700px) {
  .theater-stage { grid-template-columns:16.3vw 66.4vw 16.3vw; }
  .theater-hero { max-height: none; }
}
@media(max-width:1200px) {
  .sidebar { padding-top: 20px; }
  .nav { width: min(49vw,660px); }
  .nav button { font-size: 12px; }
  .social-icon { width: 38px; height: 42px; }
  .channel-icons { gap: 8px; }
  .theater-status { min-height: 68px; padding: 12px 18px; width: 35%; }
  .theater-status::before { right: 64px; }
  .theater-status p { font-size: 10px; }
  .theater-status #heroLive { font-size: 14px; gap: 12px; }
  .theater-status p { margin-left: 27px; }
}
@media(max-width:900px) {
  .sidebar { padding-top: 16px; }
  .nav { width: min(590px,100%); height: 50px; }
  .nav button { padding: 10px 0; }
  .theater-home { padding-top: 28px; }
  .theater-floor { top: calc(100% - 39.3vw); opacity: .55; }
  .theater-reflection { left: 12.5%; width: 75%; height: 180px; }
  .theater-identity #heroName { font-size: 36px; }
  .theater-identity>p { font-size: 10px; letter-spacing: .35em; }
  .theater-status { width: 44%; min-height: 60px; }
  .theater-status #heroLive { font-size: 13px; gap: 10px; }
  .theater-status p { margin-left: 25px; font-size: 9px; }
  .theater-status #heroLive i { width: 13px; height: 13px; }
  .theater-status::before { display: none; }
  .theater-ruler { margin-top: 47px; gap: 16px; }
  .theater-next { width: 90%; margin-top: 22px; }
  .theater-footer { margin-top: 25px; }
}
@media(max-width:600px) {
  .sidebar { padding-top: 12px; }
  .theater-wordmark { font-size: 30px; line-height: 42px; }
  .nav { height: 48px; }
  .nav button { padding: 10px 0; font-size: 10px; letter-spacing: 0; }
  .nav button[data-page="home"] { flex: .8; }
  .social-icon { width: 35px; height: 39px; }
  .channel-icons { gap: 6px; }
  .theater-home { padding-top: 4px; padding-bottom: 104px; }
  .theater-floor { top: 30%; height: 650px; aspect-ratio: auto; background-size: auto 100%; opacity: .38; }
  .theater-identity { left: 7%; bottom: 28%; }
  .theater-identity #heroName { font-size: 42px; }
  .theater-identity>p { font-size: 10px; }
  .theater-hero-shade { background: linear-gradient(0deg,#16121bdb,transparent 65%); }
  .theater-status { width: auto; min-height: 66px; padding: 13px 20px; bottom: 6%; }
  .theater-status #heroLive { font-size: 15px; }
  .theater-status p { font-size: 10px; }
  .theater-reflection { display: none; }
  .theater-ruler { margin-top: 29px; gap: 12px; }
  .ruler-arrow { width: 38px; height: 38px; }
  .ruler-arrow svg { width: 18px; height: 18px; }
  .ruler-ticks i:nth-child(even) { display: none; }
  .ruler-ticks i { height: 12px; }
  .ruler-ticks i:nth-child(3n+1) { height: 23px; }
  .ruler-orb { width: 27px; height: 27px; }
  .ruler-dates { font-size: 9px; top: 43px; }
  .ruler-selected { font-size: 14px; top: 43px; }
  .theater-next { width: calc(100% - 32px); margin-top: 23px; gap: 12px; }
  #homeNextStream { font-size: 12px; }
  #homeNextStream small { font-size: 11px; }
  #homeNextStream .v148-title { font-size: 12px; }
  #homeNextStream .v148-date { font-size: 20px; }
  #homeNextStream .v148-time { font-size: 11px; }
  .theater-footer { margin-top: 22px; }
}
/* Fit the complete desktop home into the browser's visible height. Keep document
   scrolling available for other sections, small windows and enlarged layouts. */
@media(min-width:901px) and (min-height:600px) {
  html:has(body.theater #page-home.active) { scrollbar-gutter: stable both-edges; }
  body.theater:has(#page-home.active) {
    --home-header-height: clamp(84px,10.55dvh,108px);
    --home-top-space: clamp(18px,calc(12dvh - 63px),60px);
    --home-ruler-gap: clamp(22px,calc(12dvh - 64px),59px);
    --home-ruler-height: clamp(70px,calc(6dvh + 27px),89px);
    --home-next-gap: clamp(0px,calc(9dvh - 63px),29px);
    --home-bottom-space: max(24px,env(safe-area-inset-bottom));
    --home-height: calc(100dvh - var(--home-header-height));
    --home-stage-height: min(calc(66.4vw / 1.86),calc(var(--home-height) - var(--home-top-space) - var(--home-ruler-gap) - var(--home-ruler-height) - var(--home-next-gap) - 48px - 54px - var(--home-bottom-space)));
    --home-stage-width: calc(var(--home-stage-height) * 2.8012048193);
  }
  body.theater:has(#page-home.active) .sidebar {
    height: var(--home-header-height);
    padding-top: clamp(16px,2.636dvh,27px);
  }
  body.theater:has(#page-home.active) main,
  #page-home:is(.active,.section-departing) { min-height: var(--home-height); }
  #page-home:is(.active,.section-departing) .theater-home {
    height: var(--home-height); min-height: 0;
    display: grid;
    padding-top: var(--home-top-space); padding-bottom: var(--home-bottom-space);
    /* Include the gap before NEXT in its row rather than stealing stage space. */
    grid-template-rows: minmax(0,1fr) auto calc(48px + var(--home-next-gap)) 54px;
  }
  #page-home:is(.active,.section-departing) .theater-stage {
    width: var(--home-stage-width); height: var(--home-stage-height);
    grid-template-columns: 16.3% 66.4% 16.3%; gap: .5%;
    justify-self: center; align-self: start; min-height: 0;
  }
  #page-home:is(.active,.section-departing) .theater-hero { height: 100%; max-height: none; }
  #page-home:is(.active,.section-departing) .theater-floor {
    left: 50%; width: 100vw; transform: translateX(-50%);
  }
  #page-home:is(.active,.section-departing) .scene-wing {
    min-height: 0; max-width: none; margin: 0;
    padding: clamp(24px,calc(var(--home-stage-height) * .115),63px) clamp(12px,calc(var(--home-stage-width) * .0156),24px) 16px;
  }
  #page-home:is(.active,.section-departing) .scene-wing-right {
    padding-top: clamp(24px,calc(var(--home-stage-height) * .08),44px);
    padding-right: clamp(10px,calc(var(--home-stage-width) * .0091),14px);
  }
  #page-home:is(.active,.section-departing) .wing-heading {
    font-size: clamp(18px,calc(var(--home-stage-width) * .017),27px);
    gap: 12px; margin-bottom: clamp(14px,calc(var(--home-stage-height) * .044),24px);
  }
  #page-home:is(.active,.section-departing) .wing-person {
    font-size: clamp(18px,calc(var(--home-stage-width) * .017),28px);
    gap: 8px; padding-bottom: clamp(12px,calc(var(--home-stage-height) * .0365),20px);
  }
  #page-home:is(.active,.section-departing) .wing-person img { width: 65%; max-width: min(140px,calc(100% - 52px)); }
  #page-home:is(.active,.section-departing) .wing-profile-links button {
    min-height: 44px; padding-block: clamp(8px,calc((var(--home-stage-height) - 300px) * .05 + 8px),23px);
    gap: clamp(10px,calc(var(--home-stage-width) * .015),23px);
    font-size: clamp(13px,calc(var(--home-stage-width) * .0104),16px);
  }
  #page-home:is(.active,.section-departing) .scene-wing-left { display: flex; flex-direction: column; }
  #page-home:is(.active,.section-departing) .wing-tabs { gap: 0; }
  #page-home:is(.active,.section-departing) .wing-tabs button {
    flex: 1; min-width: 0; white-space: nowrap; padding-inline: 0; letter-spacing: 0;
    font-size: clamp(10px,calc(var(--home-stage-width) * .00846),13px);
  }
  #page-home:is(.active,.section-departing) .wing-tabs button:first-child {
    font-size: clamp(10px,calc(var(--home-stage-width) * .00781),12px);
  }
  #page-home:is(.active,.section-departing) .wing-gallery { flex: 1; min-height: 0; align-content: start; }
  #page-home:is(.active,.section-departing) .wing-gallery:has(.preview-empty) { align-content: stretch; }
  #page-home:is(.active,.section-departing) .wing-gallery .preview-empty { min-height: 0; padding: 4px; }
  #page-home:is(.active,.section-departing) .wing-bottom { flex: none; min-height: 44px; }
  #page-home:is(.active,.section-departing) .theater-identity #heroName {
    font-size: clamp(34px,calc(var(--home-stage-width) * .035),54px);
  }
  #page-home:is(.active,.section-departing) .theater-identity>p {
    font-size: clamp(10px,calc(var(--home-stage-width) * .00846),13px);
  }
  #page-home:is(.active,.section-departing) .theater-status {
    width: max(270px,32%); min-height: clamp(64px,calc(var(--home-stage-height) * .142),78px);
    padding: 12px clamp(18px,calc(var(--home-stage-width) * .0143),22px);
  }
  #page-home:is(.active,.section-departing) .theater-status #heroLive {
    font-size: clamp(14px,calc(var(--home-stage-width) * .0104),16px);
    gap: clamp(12px,calc(var(--home-stage-width) * .0124),19px);
  }
  #page-home:is(.active,.section-departing) .theater-status p { font-size: clamp(10px,calc(var(--home-stage-width) * .00716),11px); margin-left: 27px; }
  #page-home:is(.active,.section-departing) .theater-ruler {
    width: 91.4%; justify-self: center;
    margin: var(--home-ruler-gap) 0 0; height: var(--home-ruler-height);
  }
  #page-home:is(.active,.section-departing) .ruler-track { height: calc(var(--home-ruler-height) - 6px); }
  #page-home:is(.active,.section-departing) .theater-next {
    min-width: 0; min-height: 48px; height: 48px;
    margin: var(--home-next-gap) 0 0; justify-self: center;
  }
  #page-home:is(.active,.section-departing) #homeNextStream { min-width: 0; gap: clamp(12px,1.56vw,24px); }
  #page-home:is(.active,.section-departing) #homeNextStream .v148-title {
    min-width: 0; max-width: 30vw; overflow: hidden; text-overflow: ellipsis;
  }
  #page-home:is(.active,.section-departing) .theater-footer { width: 91.4%; margin: 0; justify-self: center; }
  #page-home:is(.active,.section-departing) .theater-footer button { margin-right: 300px; }
  body.theater:has(#page-home.active) .music-dock { bottom: var(--home-bottom-space); }
}
@media(prefers-reduced-motion:reduce) {
  .nav-glass-marker,.theater-hero::after,.scene-wing::before,.ruler-orb,.ruler-selected,.wing-gallery img { transition: none; }
}