/* =========================
   Curtain Theme · Tokens
   ========================= */
:root{
  --bg:#0b0f18;
  --ink:#f4f6fb;
  --muted:#9aa3b2;
  --pri:#8fb5ff; --pri2:#c1b0ff;
  --ring:rgba(143,181,255,.55);
  --ring-weak:rgba(143,181,255,.25);
  --card:rgba(255,255,255,.06);
  --card-strong:rgba(255,255,255,.09);
  --shadow-lg:0 24px 80px rgba(2,6,23,.55);
  --shadow-xl:0 40px 140px rgba(2,6,23,.75);
  --brass:#c8a86a;

  /* Parallax effect variables */
  --mouse-x: 0;
  --mouse-y: 0;
  --parallax-strength: 0.02; /* Adjust for more/less intense parallax */
}
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; color:var(--ink);
  font:14px/1.5 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif;
  background:
    radial-gradient(60% 50% at 50% -10%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, #0b0f18 0%, #0e1420 100%);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x: hidden; /* Prevent horizontal scroll from parallax */
}

/* film grain & beams - Enhanced */
.page-beams{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(60% 40% at 15% 10%, rgba(143,181,255,.12), transparent 55%),
    radial-gradient(40% 40% at 85% 0%, rgba(193,176,255,.12), transparent 60%),
    conic-gradient(from 220deg at 10% 0%, rgba(255,255,255,.04), transparent 30%),
    repeating-radial-gradient(circle at 20% 30%, rgba(255,255,255,.016) 0 1px, transparent 1px 4px);
  opacity:.8;
  /* Parallax for background beams */
  transform: translate(calc(var(--mouse-x) * var(--parallax-strength) * -1px), calc(var(--mouse-y) * var(--parallax-strength) * -1px));
  transition: transform 0.1s ease-out; /* Smooth parallax */
}

.container{
  max-width:1200px; margin:28px auto; padding:16px; position:relative;
  display:flex; justify-content:center; align-items:flex-start; gap:12px;
}
.main-content{ flex-grow:1; display:flex; flex-direction:column; align-items:center; }
.header{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.header .dot{ width:10px; height:10px; border-radius:50%;
  background:linear-gradient(135deg, var(--pri), var(--pri2));
  box-shadow:0 0 18px rgba(143,181,255,.7);
}
.header h1{ margin:0; font:600 18px/1.2 inherit; letter-spacing:.1px; color:#f2f5ff; text-shadow:0 1px 1px rgba(0,0,0,.25); }

/* =========================
   Stage
   ========================= */
.stage{ position:relative; min-height:720px; width:min(1200px, 90vw); isolation:isolate; }
@media (max-width:980px){ .stage{ min-height:620px; } }
@media (max-width:760px){ .stage{ min-height:560px; } }
.center-wrap{ position:absolute; inset:0; display:grid; place-items:center; }

/* =========================
   Video Player as Window - Enhanced transitions
   ========================= */
.video-wrap{
  position:relative; width:min(560px, 68vw); aspect-ratio:16/9; border-radius:22px; overflow:hidden;
  background:#0a0f1a;
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.08), inset 0 0 0 2px rgba(255,255,255,.04);
  transition:all .5s cubic-bezier(.4, 0, .2, 1); /* Smoother, more cinematic transition */
  will-change:transform, box-shadow, width, z-index; z-index:2;
}
.video-wrap::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 18%),
    linear-gradient(to right, rgba(255,255,255,.04), rgba(255,255,255,0) 30%, rgba(255,255,255,.04) 70%, rgba(255,255,255,0));
  mix-blend-mode:soft-light; pointer-events:none;
}
/* 수정된 theater 모드 (버튼 가림 방지) */
.video-wrap.theater{
  width:min(640px, 82vw); /* Slightly larger theater mode */
  transform:translateY(-2px) scale(1.06); /* Slightly more prominent */
  box-shadow: var(--shadow-xl),
              0 0 0 1px rgba(255,255,255,.18) inset,
              0 24px 80px rgba(2,6,23,.65); /* More intense shadow */
  z-index:3;
}
/* 반응형 YouTube: 컨테이너 비율 유지 + iframe 꽉 채움 */
.video-wrap{ aspect-ratio:16/9; }              /* 이미 있으면 유지 */
.player-slot{position:absolute; inset:0;}
.player-slot iframe{
  position:absolute; inset:0;
  width:100% !important;   /* ← inline width/height 덮어쓰기 */
  height:100% !important;
  border:0; display:block;
}

/* =========================
   Curtain Decor - Enhanced
   ========================= */
.rod{
  position:absolute; left:6%; right:6%; top:-10px; height:8px; border-radius:999px;
  background: linear-gradient(180deg, #d5c08b, #b99249);
  box-shadow: 0 4px 12px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.45);
  transform: translate(calc(var(--mouse-x) * var(--parallax-strength) * 0.5px), calc(var(--mouse-y) * var(--parallax-strength) * 0.5px));
  transition: transform 0.1s ease-out;
}
.rings{
  position:absolute; left:7.5%; right:7.5%; top:-22px; height:22px; pointer-events:none;
  background:
    radial-gradient(9px 9px at 0 50%, transparent 6px, rgba(0,0,0,.35) 6.5px, transparent 7px) 0 0/56px 100% repeat-x,
    radial-gradient(9px 9px at 0 50%, transparent 5px, var(--brass) 5.5px, #8f6f32 6.5px, transparent 7px) 0 0/56px 100% repeat-x;
  opacity:.9; filter: drop-shadow(0 4px 6px rgba(0,0,0,.3));
  transform: translate(calc(var(--mouse-x) * var(--parallax-strength) * 0.6px), calc(var(--mouse-y) * var(--parallax-strength) * 0.6px));
  transition: transform 0.1s ease-out;
}

/* soft sheer curtain - Enhanced */
.sunbeams,.curtain,.dust{ position:absolute; inset:0; pointer-events:none; }
.sunbeams{ mix-blend-mode:screen; opacity:.45; filter: blur(2.5px); /* Slightly stronger blur and opacity */
  background:
    conic-gradient(from 200deg at -10% 10%, rgba(255,245,200,0), rgba(255,245,200,.45) 8%, rgba(255,245,200,0) 16%),
    conic-gradient(from 215deg at 110% -10%, rgba(255,235,160,0), rgba(255,235,160,.4) 10%, rgba(255,235,160,0) 18%);
  transform-origin:50% 0%; animation: sunSwing 12s ease-in-out infinite alternate; /* Slower, more subtle swing */
  transform: translate(calc(var(--mouse-x) * var(--parallax-strength) * 0.8px), calc(var(--mouse-y) * var(--parallax-strength) * 0.8px)) rotate(calc(var(--mouse-x) * var(--parallax-strength) * 0.05deg));
  transition: transform 0.1s ease-out;
}
@keyframes sunSwing{ 0%{ transform:rotate(-3.5deg);} 100%{ transform:rotate(3.5deg);} }

.curtain{
  opacity:.9; mix-blend-mode:normal;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 2px, rgba(255,255,255,0) 2px 10px), /* Slightly more prominent lines */
    linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0)); /* Stronger gradient */
  mask-image: linear-gradient(180deg, rgba(0,0,0,.98), rgba(0,0,0,.3) 70%, rgba(0,0,0,0)); /* Stronger mask */
  animation: sway 10s ease-in-out infinite alternate; transform-origin: top center; /* Slower sway */
  transform: translate(calc(var(--mouse-x) * var(--parallax-strength) * 0.9px), calc(var(--mouse-y) * var(--parallax-strength) * 0.9px)) skewX(calc(var(--mouse-x) * var(--parallax-strength) * 0.02deg));
  transition: transform 0.1s ease-out;
}
@keyframes sway{ 0%{ transform:skewX(-1.5deg) translateX(-3px);} 100%{ transform:skewX(1.5deg) translateX(3px);} }

.dust::before,.dust::after{
  content:""; position:absolute; inset:-20%;
  background:
    radial-gradient(2.2px 2.2px at 10% 20%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(2.2px 2.2px at 60% 30%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(2px 2px at 30% 80%, rgba(255,255,255,.15), transparent 60%),
    radial-gradient(1.8px 1.8px at 80% 70%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(1.6px 1.6px at 40% 50%, rgba(255,255,255,.15), transparent 60%),
    radial-gradient(1.4px 1.4px at 20% 60%, rgba(255,255,255,.12), transparent 60%);
  animation:dustFloat 25s linear infinite; opacity:.65; mix-blend-mode:screen; /* Slower animation, more prominent */
}
.dust::after{ animation-duration:32s; opacity:.45; } /* Different speed and opacity for variety */
@keyframes dustFloat{ to{ transform: translate3d(-8%, -10%, 0);} } /* Further float distance */

/* tiebacks (show in theater mode) */
.tieback{
  position:absolute; top:42%; width:34%; height:54%; pointer-events:none; opacity:0; transition:opacity .45s ease;
  background:
    radial-gradient(120% 100% at 0% 50%, rgba(255,255,255,.28), rgba(255,255,255,0) 55%), /* Slightly stronger */
    linear-gradient(90deg, rgba(255,255,255,.2), rgba(255,255,255,0)); /* Slightly stronger */
  mask-image: linear-gradient(90deg, black 30%, transparent 70%);
  transform: translateZ(0); /* Ensure hardware acceleration */
}
.tieback.left{ left:-2%; transform: skewX(-6deg); }
.tieback.right{ right:-2%; transform: scaleX(-1) skewX(-6deg); }
.video-wrap.theater .tieback{ opacity:.9; }

/* =========================
   Now Pill
   ========================= */
.now{
  position:absolute; left:12px; top:12px; z-index:5; display:flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08)); /* Slightly more prominent */
  border:1px solid rgba(255,255,255,.2); backdrop-filter: blur(10px); /* Stronger blur */
  font:600 12px/1.1 ui-sans-serif; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.now .dot{ width:8px; height:8px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #8fdcff, #6aa7ff); box-shadow:0 0 12px rgba(106,167,255,.9); /* Stronger glow */
}
.now .time{ opacity:.9; font-weight:500; } /* Slightly less muted */

/* =========================
   Progress Bar & Markers
   ========================= */
#chapterBar{
  position:absolute; left:14px; right:14px; bottom:14px; height:8px; border-radius:999px;
  background: rgba(255,255,255,.22); overflow:hidden; z-index:4; backdrop-filter: blur(4px); /* Stronger background/blur */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}
#chapterBar .progress{
  position:absolute; left:0; top:0; height:100%; width:0;
  background: linear-gradient(90deg, #cfd8ea, #9fb3d6);
  transition: width .3s cubic-bezier(.4, 0, .2, 1); /* Smoother transition */
}
#chapterBar .progress::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent); /* Stronger sheen */
  mix-blend-mode:screen; animation: sheen 2s linear infinite; opacity:.4; /* Faster sheen, more prominent */
}
@keyframes sheen{ from{ transform:translateX(-100%);} to{ transform:translateX(100%);} }

#chapterBar .marker{ position:absolute; top:0; height:100%; width:2px; background:#fff; opacity:.8; mix-blend-mode:overlay; } /* More opaque */

/* =========================
   Radial Chapter Nodes - Enhanced
   ========================= */
.orbit{ position:absolute; inset:0; pointer-events:none; z-index:3; }
.node{
  position:absolute; transform: translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:8px 12px; pointer-events:auto; text-decoration:none; color:inherit;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08)); /* Slightly more prominent */
  border:1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px); /* Stronger blur */
  box-shadow:0 12px 36px rgba(2,6,23,.4); /* Stronger shadow */
  transition: transform .18s ease-out, box-shadow .2s ease-out, background .2s ease-out, opacity .2s ease-out, outline .2s ease-out; /* Smoother transitions */
  will-change:transform, box-shadow, background, opacity;
}
.node:hover{
  transform: translate(-50%,-50%) scale(1.12);
  border-color:rgba(185,200,255,.8);
  box-shadow:
        0 0 0 3px rgba(185,200,255,.4),
        0 0 25px 12px rgba(120,160,255,.28),
        0 20px 60px rgba(2,6,23,.75);
}
@keyframes nodeHoverGlow {
  from { box-shadow:0 20px 50px rgba(2,6,23,.6), 0 0 15px rgba(143,181,255,0.4); }
  to { box-shadow:0 20px 50px rgba(2,6,23,.6), 0 0 25px rgba(143,181,255,0.7); }
}

.node:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; }
.node.active{
  outline:2px solid rgba(143,181,255,.85); /* Stronger active outline */
  background: linear-gradient(180deg, rgba(143,181,255,.28), rgba(193,176,255,.25)); /* Stronger active background */
  transform: translate(-50%,-50%) scale(1.12); /* More pronounced active scale */
  box-shadow:0 22px 66px rgba(2,6,23,.65); /* More intense active shadow */
  animation: nodeActiveGlow 1s infinite alternate ease-in-out; /* Pulsating active glow */
}
@keyframes nodeActiveGlow {
  from { box-shadow:0 22px 66px rgba(2,6,23,.65), 0 0 18px rgba(143,181,255,0.6); }
  to { box-shadow:0 22px 66px rgba(2,6,23,.65), 0 0 30px rgba(143,181,255,0.9); }
}

.badge{
  min-width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  font-weight:800; font-size:12px; color:var(--bg);
  background:linear-gradient(135deg, var(--pri), var(--pri2));
  box-shadow:0 6px 16px rgba(143,181,255,.45), inset 0 0 0 1px rgba(255,255,255,.35);
}
.n-title{ font-size:13px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px; letter-spacing:.1px; }
.n-time{ font-size:12px; color:var(--muted); margin-left:4px; }

/* Tooltip - Enhanced for chapter list hover */
/*
.node::after{
  content: attr(data-full-title);
  position:absolute; top:-34px; left:50%; transform:translateX(-50%);
  background:rgba(12,12,16,.95); color:#fff; padding:6px 10px; border-radius:6px; white-space:nowrap; font-size:12px;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:10; box-shadow:0 8px 24px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.12);
}
.node:hover::after{ opacity:1; transform:translateX(-50%) translateY(-2px); }
*/
/* Curtain Toggle: 심플한 고정 버튼 */
#curtain-toggle{
  position:fixed; top:96px; right:24px;
  width:56px; height:56px;
  cursor:pointer;
  background: radial-gradient(circle at 30% 30%, #fdf7e6, #e7d3a4);
  border:1px solid rgba(0,0,0,.15); border-radius:50%;
  display:grid; place-items:center;
  box-shadow:0 10px 30px rgba(2,6,23,.35),
             inset 0 0 0 1px rgba(255,255,255,.45);
  transition: transform .2s, box-shadow .2s;
  z-index: 9999; /* ← 리스트보다 항상 위 */
}

/* 끈/술 제거 */
#curtain-toggle::before,
#curtain-toggle::after{
  display:none !important;
}

#curtain-toggle:hover{ transform:scale(1.05); }
#curtain-toggle.open{ transform:scale(1.05); }

/* 리스트 열릴 때 버튼 오른쪽으로 이동 */
@media (min-width:981px){
  body.list-open #curtain-toggle{ right: calc(24px + 320px); }
}

/* 모바일은 숨김 */
@media (max-width:980px){
  #curtain-toggle{ display:none; }
}


/* =========================
   Chapter List (Desktop) - Enhanced
   ========================= */
.chapter-list-wrap{
  position:fixed;            /* absolute → fixed */
  top:80px; right:0;
  width:280px;
  max-height:calc(100vh - 100px);
  overflow-y:auto;

  padding:16px; border-radius:16px 0 0 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 24px 72px rgba(2,6,23,.45);
  backdrop-filter: blur(12px);
  z-index:5;

  transform:translateX(100%);           /* 우측 밖으로 숨김 */
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.chapter-list-wrap.open{ transform:translateX(0); }

.chapter-list-wrap::-webkit-scrollbar{ width:12px; }
.chapter-list-wrap::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.25); border-radius:999px; border:3px solid transparent; background-clip:padding-box;
}
.chapter-list-wrap h2{ margin:0 0 14px; font-size:18px; font-weight:600; letter-spacing:.2px; color:#f5f7ff; }

.chapter-list-item{
  display:flex; align-items:center; gap:10px; padding:12px; border-radius:14px; text-decoration:none; color:inherit;
  transition: background-color .2s, transform .1s, box-shadow .2s; border:1px solid transparent; position: relative;
}
.chapter-list-item:hover{ background:rgba(255,255,255,.08); transform:translateY(-2px); box-shadow:0 12px 28px rgba(2,6,23,.3) inset; }
.chapter-list-item:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; }
.chapter-list-item.active{ background: rgba(143,181,255,.16); border-color: var(--ring-weak); box-shadow:0 0 0 2px var(--ring-weak) inset; }
.chapter-list-item .badge{ box-shadow:none; }
.chapter-list-item .n-title{ max-width:100%; font-size:14px; }
.chapter-list-item .n-time{ display:block; color:var(--muted); }

/* Tooltips */
.chapter-list-item::after{
  content: attr(data-full-title);
  position:absolute; top:-34px; left:50%; transform:translateX(-50%);
  background:rgba(12,12,16,.95); color:#fff; padding:6px 10px; border-radius:6px; white-space:nowrap; font-size:12px;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:10; box-shadow:0 8px 24px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.12);
}
.chapter-list-item:hover::after{ opacity:1; transform:translateX(-50%) translateY(-2px); }

/* 리스트 열리면 스테이지 우측 여백 확보 */
@media (min-width:981px){
  .stage{ transition: margin-right .35s cubic-bezier(.4,0,.2,1); }
  body.list-open .stage{ margin-right:320px; } /* 패널 280 + 여백 40 */
}

/* =========================
   Mobile
   ========================= */
@media (max-width:980px){
  .container{ flex-direction:column; align-items:center; gap:0; }
  .stage{ width:100%; }
  .main-content{ width:100%; }
  .orbit{ display:none; }
  .chapter-list-wrap{ display:block; position:static; width:100%; max-height:none; margin-top:12px; opacity:1; visibility:visible; transform:translateX(0); box-shadow:none; }
  #curtain-toggle{ display:none; }
  .rod{ top:-8px; }
  .rings{ top:-20px; opacity:.8; }
}

/* =========================
   Motion Pref
   ========================= */
@media (prefers-reduced-motion:reduce){
  * {
    animation: none !important;
    transition: none !important;
    transform: none !important; /* Disable parallax as well */
  }
}

/* =========================
   Print
   ========================= */
@media print{
  body{ background:#fff; color:#111; }
  .page-beams,.orbit,#curtain-toggle,.sunbeams,.curtain,.dust{ display:none !important; }
  .chapter-list-wrap{ position:static; transform:none; opacity:1; visibility:visible; box-shadow:none; border:1px solid #ddd; }
  .video-wrap{ box-shadow:none; border:1px solid #ccc; }
}

/* 데스크톱: 리스트 열리면 스테이지를 왼쪽으로 확보 */
@media (min-width:981px){
  .stage{ transition: margin-right .35s cubic-bezier(.4,0,.2,1); }
  body.list-open .stage{ margin-right:320px; } /* 280 + 여백40 */
  body.list-open #curtain-toggle{ right: calc(24px + 320px); }
  body.list-open .orbit{ transform: translateX(-160px) scale(var(--node-scale)); } /* 노드도 살짝 이동(옵션) */
}

/* 리스트 패널 여백/레이어 정리 */
.chapter-list-wrap{ right:20px; top:84px; z-index:4; }
.video-wrap{ z-index:3; } /* 리스트가 영상 위로 덮지 않도록 */