/* Hanboreum Schedule v3.0 — hybrid YouTube latest + member LIVE cards. */
.live-section.is-youtube-fallback{
  border-color:rgba(132,100,166,.14);
  background:rgba(255,255,255,.88);
}
.live-section.is-youtube-fallback::after{
  content:none !important;
  display:none !important;
}
.live-section.is-youtube-fallback .live-manual-note[data-source="youtube"]{
  background:#f3eff9;
  color:#79668c;
}
.live-section.is-youtube-fallback .live-manual-note[data-source="hybrid"]{
  background:#fff0f3;
  color:#c74d67;
  border-color:rgba(255,66,95,.16);
}
.live-members.is-youtube-fallback{
  display:block !important;
  width:100%;
  overflow:visible !important;
  padding:0 !important;
  margin:0 !important;
  scroll-snap-type:none !important;
}
.youtube-fallback-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  width:100%;
}
.youtube-fallback-card{
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(132,100,166,.13);
  border-radius:14px;
  background:rgba(255,255,255,.92);
  box-shadow:0 7px 18px rgba(92,70,116,.07);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.youtube-fallback-card:hover{
  transform:translateY(-2px);
  border-color:rgba(132,100,166,.28);
  box-shadow:0 10px 24px rgba(92,70,116,.11);
}
.youtube-fallback-card.is-crew{
  border-color:rgba(149,111,190,.30);
  box-shadow:0 8px 20px rgba(122,87,155,.11);
}
.youtube-fallback-thumb{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:linear-gradient(135deg,#eee8f5,#f8f3fb);
}
.youtube-fallback-thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.youtube-fallback-thumb-placeholder{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  color:#9a8ba7;
  font-size:11px;
  font-weight:850;
  letter-spacing:.08em;
}
.youtube-fallback-play{
  position:absolute;
  left:8px;
  bottom:7px;
  display:grid;
  place-items:center;
  width:25px;
  height:25px;
  border-radius:50%;
  background:rgba(22,18,28,.78);
  color:#fff;
  font-size:9px;
  line-height:1;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
}
.youtube-fallback-copy{
  display:block;
  min-width:0;
  padding:9px 10px 10px;
}
.youtube-fallback-channel{
  display:block;
  margin-bottom:4px;
  color:var(--lavender-deep);
  font-size:10px;
  font-weight:850;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.youtube-fallback-card.is-crew .youtube-fallback-channel{
  font-weight:900;
}
.youtube-fallback-copy strong{
  display:-webkit-box;
  min-height:2.7em;
  overflow:hidden;
  color:var(--ink);
  font-size:12px;
  font-weight:800;
  line-height:1.35;
  word-break:keep-all;
  overflow-wrap:break-word;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.youtube-fallback-copy small{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:9px;
  font-weight:700;
}
.youtube-fallback-card.is-unavailable{
  opacity:.72;
}
.youtube-fallback-loading{
  display:grid;
  place-items:center;
  min-height:120px;
  padding:18px;
  border:1px dashed rgba(132,100,166,.18);
  border-radius:14px;
  color:var(--muted);
  background:rgba(250,247,253,.7);
  font-size:12px;
  font-weight:750;
  text-align:center;
}

/* A LIVE member occupies the same slot that normally shows that member's YouTube card. */
.youtube-fallback-grid > .hybrid-live-card{
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(255,66,95,.22);
  border-radius:14px;
  background:rgba(255,255,255,.94);
  box-shadow:0 8px 22px rgba(183,54,79,.11);
}
.youtube-fallback-grid > .hybrid-live-card:hover{
  border-color:rgba(255,66,95,.42);
  box-shadow:0 11px 28px rgba(183,54,79,.16);
}
.youtube-fallback-grid > .hybrid-live-card .live-thumbnail-wrap{
  border-radius:13px 13px 0 0;
  box-shadow:none;
}
.youtube-fallback-grid > .hybrid-live-card .live-card-meta{
  padding:11px 12px 12px;
}

@media(min-width:901px){
  .live-section.is-youtube-fallback .live-section-heading .eyebrow{
    font-size:12px;
    letter-spacing:.08em;
  }
  .live-section.is-youtube-fallback .live-section-heading h2{
    font-size:22px;
    line-height:1.25;
  }
  .live-section.is-youtube-fallback .live-manual-note[data-source="youtube"],
  .live-section.is-youtube-fallback .live-manual-note[data-source="hybrid"]{
    font-size:12px;
  }
  .youtube-fallback-copy{
    padding:11px 12px 12px;
  }
  .youtube-fallback-channel{
    margin-bottom:5px;
    font-size:12px;
  }
  .youtube-fallback-copy strong{
    min-height:2.8em;
    font-size:14px;
    line-height:1.4;
  }
  .youtube-fallback-copy small{
    margin-top:6px;
    font-size:11px;
  }
}

html[data-theme="dark"] .live-section.is-youtube-fallback{
  background:#211a2c;
  border-color:rgba(194,161,224,.16);
}
html[data-theme="dark"] .live-section.is-youtube-fallback .live-manual-note[data-source="youtube"]{
  background:#33283d;
  color:#cbb5df;
}
html[data-theme="dark"] .live-section.is-youtube-fallback .live-manual-note[data-source="hybrid"]{
  background:#422631;
  color:#ff9eb2;
  border-color:rgba(255,109,137,.18);
}
html[data-theme="dark"] .youtube-fallback-card{
  background:#2a2232;
  border-color:rgba(194,161,224,.14);
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}
html[data-theme="dark"] .youtube-fallback-card.is-crew{
  border-color:rgba(194,161,224,.28);
}
html[data-theme="dark"] .youtube-fallback-thumb{
  background:linear-gradient(135deg,#342a3e,#251e2d);
}
html[data-theme="dark"] .youtube-fallback-thumb-placeholder{
  color:#b8a4ca;
}
html[data-theme="dark"] .youtube-fallback-copy strong{
  color:#f4edf8;
}
html[data-theme="dark"] .youtube-fallback-loading{
  background:#292131;
  border-color:rgba(194,161,224,.16);
  color:#b9aabd;
}
html[data-theme="dark"] .youtube-fallback-grid > .hybrid-live-card{
  background:#2a2232;
  border-color:rgba(255,109,137,.24);
  box-shadow:0 9px 24px rgba(0,0,0,.24);
}

@media(max-width:900px){
  .youtube-fallback-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media(max-width:700px){
  .live-section.is-youtube-fallback{overflow:visible;}
  .youtube-fallback-grid{gap:8px;}
  .youtube-fallback-card,
  .youtube-fallback-grid > .hybrid-live-card{border-radius:12px;}
  .youtube-fallback-copy{padding:8px 8px 9px;}
  .youtube-fallback-copy strong{font-size:11px;}
  .youtube-fallback-channel{font-size:9px;}
  .youtube-fallback-play{width:22px;height:22px;left:6px;bottom:6px;font-size:8px;}
  .youtube-fallback-grid > .hybrid-live-card .live-thumbnail-wrap{border-radius:11px 11px 0 0;}
}

@media(max-width:560px){
  /* Match the existing mobile LIVE carousel for readability. */
  .live-section.is-youtube-fallback{
    overflow:hidden;
  }

  .live-members.is-youtube-fallback{
    overflow:visible !important;
  }

  .youtube-fallback-grid{
    display:flex;
    flex-wrap:nowrap;
    grid-template-columns:none;
    gap:12px;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    padding:0 14% 10px 0;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:0;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    touch-action:pan-x pan-y;
  }

  .youtube-fallback-grid::-webkit-scrollbar{
    display:none;
  }

  .youtube-fallback-card,
  .youtube-fallback-grid > .hybrid-live-card{
    flex:0 0 86%;
    width:86%;
    max-width:86%;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    border-radius:14px;
  }

  .youtube-fallback-copy{
    padding:10px 10px 11px;
  }

  .youtube-fallback-channel{
    font-size:10px;
  }

  .youtube-fallback-copy strong{
    min-height:2.7em;
    font-size:13px;
    line-height:1.35;
  }

  .youtube-fallback-copy small{
    font-size:10px;
  }

  .youtube-fallback-play{
    width:25px;
    height:25px;
    left:8px;
    bottom:7px;
    font-size:9px;
  }

  .youtube-fallback-grid > .hybrid-live-card .live-thumbnail-wrap{
    border-radius:13px 13px 0 0;
  }

  .live-section.is-youtube-fallback::after{
    content:"← 좌우로 밀어서 최신 영상을 더 볼 수 있어요 →" !important;
    display:block !important;
    margin-top:8px;
    color:var(--muted);
    font-size:9px;
    font-weight:750;
    text-align:center;
    letter-spacing:-.02em;
  }

  .live-section.is-youtube-fallback.has-live-content::after{
    content:"← LIVE와 최신 영상을 좌우로 밀어서 확인할 수 있어요 →" !important;
  }
}
