:root { 
      --gap: 14px; 
      --radius: 14px; 
      --shadow: 0 6px 20px rgba(0,0,0,.08);
      --sidebar-width: 400px;
    }
    * { box-sizing: border-box; }
    html, body { 
      margin: 0; 
      padding: 0;
      height: 100%;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Noto Sans KR', Arial, sans-serif; 
      background:#0b0b0c; 
      color:#f2f2f2;
      overflow: hidden;
    }
    .wrap { 
      width: 100%;
      height: 100%;
      padding: 18px; 
      position: relative; 
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
    }
    
    .grid { 
      display: grid; 
      grid-template-columns: 1fr var(--sidebar-width); 
      gap: var(--gap);
      flex: 1;
      min-height: 0;
      height: 100%;
    }
    
    .grid.sidebar-hidden { 
      grid-template-columns: 1fr 0; 
    }

    .player-card, .list-card {
      background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border: 1px solid rgba(255,255,255,.08);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .player-card {
      min-height: 0;
      height: 100%;
    }

    .player {
      position: relative; 
      width: 100%; 
      height: 100%;
      background: #000;
      flex: 1;
    }

    .list-card {
      transition: all 0.3s ease;
      min-width: 0;
      min-height: 0;
      height: 100%;
    }
    
    .grid.sidebar-hidden .list-card {
      opacity: 0;
      pointer-events: none;
      overflow: hidden;
    }

    .toggle-sidebar {
      position: absolute;
      top: 50%;
      right: var(--sidebar-width);
      transform: translateY(-50%);
      z-index: 10;
      background: rgba(255,255,255,.1);
      border: 1px solid rgba(255,255,255,.2);
      border-radius: 50%;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #f2f2f2;
      font-size: 16px;
      transition: all 0.3s ease;
      backdrop-filter: blur(10px);
    }
    
    .toggle-sidebar:hover {
      background: rgba(255,255,255,.15);
      transform: translateY(-50%) scale(1.1);
    }
    
    .grid.sidebar-hidden .toggle-sidebar {
      right: 10px;
    }

    .list {
      flex: 1;
      overflow: auto;
      padding: 8px;
      min-height: 0;
    }
    
    .item {
      display: grid;
      grid-template-columns: 100px 1fr;
      gap: 10px;
      padding: 8px;
      border-radius: 12px;
      cursor: pointer;
      align-items: center;
      transition: background .15s ease, transform .06s ease;
    }
    
    .item:hover { 
      background: rgba(255,255,255,.06); 
      transform: translateY(-1px); 
    }
    
    .item.active { 
      outline: 2px solid #71a6ff; 
      background: rgba(113,166,255,.12); 
    }
    
    .thumb { 
      width: 100%; 
      border-radius: 8px; 
      aspect-ratio: 16/9; 
      object-fit: cover; 
      background:#111; 
    }
    
    .meta { display: grid; gap: 3px; min-width: 0; }
    .title { 
      font-size: 13px; 
      line-height: 1.3; 
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .channel { 
      font-size: 11px; 
      color: #c9c9c9; 
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .published { 
      font-size: 10px; 
      color: #a1a1a1; 
    }

    @media (max-width: 1024px) {
      .wrap {
        padding: 10px;
      }
      
      .grid { 
        grid-template-columns: 1fr !important; 
        grid-template-rows: 1fr auto;
        gap: 10px;
      }
      
      .grid.sidebar-hidden { 
        grid-template-rows: 1fr 0;
      }
      
      .list-card {
        order: 2;
        height: auto;
        max-height: 40vh;
        transition: all 0.3s ease;
      }
      
      .grid.sidebar-hidden .list-card {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
      }
      
      .toggle-sidebar {
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        margin: 10px auto;
        display: block;
      }
    }

    @media (max-width: 480px) {
      :root { --sidebar-width: 100vw; }
      .wrap { 
        padding: 5px; 
      }
      .grid { gap: 5px; }
      .item {
        grid-template-columns: 80px 1fr;
        gap: 8px;
        padding: 6px;
      }
      .title { font-size: 12px; }
      .channel { font-size: 10px; }
      .published { font-size: 9px; }
    }

    .error-msg {
      padding: 12px 14px;
      border-top: 1px solid rgba(255,255,255,.07);
      background: rgba(255,0,0,.1);
      color: #ff6b6b;
      font-size: 13px;
      flex-shrink: 0;
    }

    .fallback-iframe {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .fallback-iframe iframe {
      width: 100%;
      height: 100%;
      border: none;
      border-radius: var(--radius);
      flex: 1;
    }